?? ???? HTML5? ??? ?? ??? ?? ?????. ???? ?? ??? ?? ??? ??? ???? ???? ??? ??? ??? ?? ????. ??? ??? ???? ??? ? ?? ??/???? ? ???? ?? ??? ? ????. HTML? ???? ??? ????? ?? ?????.
HTML5 ?? ??? ??
??? ??? ??? ??? ????.
- ?? ??? ????.
- ??? ???? ????? ?????.
- ??? ?? ??? ??? ??? ??? ????.
HTML5? ??? ?? ??
?? ???? ??? ???????.
1.
? ??? ?? ?? ??? ???? ?? ??? ???? ?? ??? ? ? ????. ?? ??? ????? ?? ?? ??? ??? ??? ?? ?????. ???, ??, ?? ?? ?? ?? ? ? ????.
??:
<html>
<body>
<article>
<h2>HTML5</h2>
<p>New Updated version of HTML</p>
</article>
<article>
<h2>Learning HTML</h2>
<p> We are learning through EDUCBA</p>
</article>
</body>
</html>
??:
2.
?? ???? ???? ??? ???? ?????. ??? ?? ??? ?? ???? ??? ?? ??? ?? ??? ? ?? ??? ??? ? ????. ?, ?? ??? ?? ?? ???? ??? ? ??? ? ??? ?????.
??:
<html>
<body>
<section>The section here is about:
<p><h4> Learning and practising</h4> </p>
</section>
</body>
</html>
??:
3.
? ??? ?? ?? ???? ?????. ?? ??? ????? ?? ???? ? ?? ?? ??? ?????. ??? ? ??? ?? HTML ?????? ?? ? ??? ? ????.
??:
<html>
<body>
<header>
<h3>This is header #1</h3>
<p> First one</p>
</header>
<p> next one ...</p>
<header>
<h3>This is header #2</h3>
<p> Second one </p>
</header>
</body>
</html>
??:
4.
??? HTML ????? ??? ?????. ????? ??? ?? ??? ?? "?? ??"? ?? ?? ???? ?? ?? ??? ???? ?? ??? ? ? ????. ??? ??? ??? ??? ?? ??? ???? ????.
??:
<html>
<body>
<p> Inside Body and above footer tag</p>
<footer>
<p> Inside footer tag.</p>
</footer>
<footer>
<p><h4> Another footer tag</h4></p>
<p><h6>Conditions Apply</h6> </p>
</footer>
</body>
</html>
??:
5.
? ??? ?? ??? ?????. ????? ? ??? ?? ? ????? ?? ???? ????? HTML ?? ????? URL???. ? ?? ??? ???? ?? ???? ?????? ?????. ??? ?????? ? ???? ?? ???? ???? ? ??? ? ????.
??:
<html>
<body>
<h4> About </h4>
<nav><a href="#"> About link 1</a>
<a href="#"> About link 1</a>
</nav>
<h4> Contact </h4>
<nav>
<a href="#"> Contact Link 1</a>
<a href="#"> Contact Link 2</a>
</nav>
</body>
</html>
??:
????? ?? ??? ???? ?? ? ????? ??? ??? ???? ??? ???.
6.
??? HTML ??? ??? ???? ???? ? ???? ?????. ?? ?????? ? side ??? ???? ???? ????? ???? ???? ?? ? ????. ? ??? ??? ?? ?? ???? ???? ???.
??:
<html>
<body>
<p>How aside tag is used </p>
<aside>
<h4>Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>
</body>
</html>
??:
??? ??? ??? ??? ???? ??? ?? ????. ?? HTML ???? ???? ???? ???? ????? ??? ? ????.
7.
? ??? ???? ??? ??? ?????. ? ??? ???? ??? ??? ???? gif? ???? ??? ? ????.
??:
<html>
<body>
<figure>
<img src="">
</figure>
</body>
</html>
??? ????? Figure ??? ??? ??? ? ????. Figure ?? ??? source ??? ???? ??? ??? ??? ? ????. ? ?? ?? ??? ?? ?? ??? ??? ? ????.
8.
???? ??? ??? ??? ???? ? ???? ?????. ?? ?? ???? ??? ? ????. ? ???? ?? ??? ? ? ????.
<html>
<body>
<figure>
<img src="">
<figcaption>This is description of the image attached.</figcaption>
</figure>
</body>
</html>
??? ??? ???? ??? ??? ???? ??? ??? ????? ??? ? ????.
9.
? ??? HTML ???? ?? ??? ?? ???? ?????. ??? ??? ?? ???? ????. ? ?? ??? ?? ???? ? ??? ?? ? ??? ?? ??? ???? ? ?? ??? ? ??? ????. ?? ??? ????? ??? ? ? ? ?? ??? ? ??? ? ?? ??? ??? ?????.
??:
<html>
<body>
<main>
<h1>Learning HTML Semantic Tags</h1>
<article>
<h4>Studying</h4>
<p> Reading would help to understand different topics</p>
</article>
<article>
<h4>Practising</h4>
<p> With Studying , Practising is a must thing to do in learning</p>
</article>
</main>
</body>
</html>
??:
10.
This tag is for highlighting specific content or data. In other words, this tag is helpful in marking data.
Code:
<html>
<body>
<p> In this whole text which I am writing now, <mark> I want to mark this text </mark></p>
</body>
</html>
Output:
11.
This tag contains additional details that users can hide any details on their wish. Through this tag, users can open/close any content which they need. If we want that tag to disclose its details at the start itself, then the attribute “open” can be used.
Code:
<html>
<body>
<details open="true">
<p>Is this displayed?</p>
</details>
</body>
</html>
Output:
Now, what would be the output if we did not use the open attribute?
Code:
<html>
<body>
<details>
<p>Is this displayed?</p>
</details>
</body>
</html>
Output 1:
Output 2:
12.
This tag is used inside the details tag. Under the details tag, we can have a summary tag that specifies the entire summary of the web page or the HTML document. An important thing to note here is that the summary tag is the first child tag that has to come under the details tag.
Code:
<html>
<body>
<details>
<summary> Have written this inside summary tag which is inside details tag</summary>
<p>This text only comes under details tag</p>
</details>
<p> This text data is written after completion of details tag</p>
</body>
</html>
Output 1:
We had highlighted the arrow in the above output, as we get our output 2 once we expand it.
Output 2:
This tag might not be giving out any difference
13.
This tag defines date/time in such a format that users can easily understand. But a thing to note is that this tag may not give us a changed output in many of the browsers.
Code:
<html>
<body>
<p>At present time is <time>11:00</time> pm in the night.</p>
</body>
</html>
Output:
14.
As the name already suggests, this tag is for writing any content in a box. This tag should have an open attribute for displaying the dialog box once the source code is executed.
Code:
<html>
<body>
<dialog open=true>
<p> The data written here gets displayed in a dialog box </p>
</dialog>
</body>
</html>
Output:
15.
This tag gives the progress of a certain task in a graphical representation. We here need to have the maximum number for which the progress has to be represented. This tag mainly consists of two attributes. Max and value are the two attributes. Max represents the total count that has to be completed, and Value gives us the count percent that is finished with respect to the maximum count value.
Code:
<html>
<body>
<h1 style="color:red;">EDUCBA</h1>
Your learning progress is:
<progress value="72" max="100">
</progress>
</body>
</html>
Output:
16.
This tag is for measurement. This can be utilized for the space taken by a query or usage of disk space also. There are a few attributes that are to be used with this tag. The attributes are max, min, and value. Based on their usage, we can definitely figure out their purpose and usage.
Code:
<html>
<body>
<h2>EDCUBA</h2>
<p>Usage of Meter tag</p>
In a 6 floors apartment, I live in 2nd floor:
<meter value="2" min="0" max="6">2 out of 6</meter>
</body>
</html>
Output:
17.
This is a tag that has been introduced to add video files to our HTML page. Until this tag was introduced, developers used plugins to introduce video files into HTML page content. There are a few attributes that can be used along with the tag. Autoplay, Preload, Muted are some of these.
Code:
<html>
<body>
<video>
<source src="video_name.mp4" type="video/mp4">
</video>
</body>
</html>
We just need a source tag to give the source from where we need to upload the video content to our page.
18.
This tag is for adding audio files to our Html page. The usage and the source tag would be the same as that of the video tag. As an exercise, try using all the semantic elements and create e HTML 5 version web page to learn better and faster.
Conclusion
In this article, we have got to see many semantic elements and their usage in HTML5. One important thing to note here is, many of these tags are supported by internet explorer versions greater than 9 and chrome versions greater than 3.
? ??? HTML5 ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!
![\"HTML5](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543904430726.png\")
<\/p>\n![\"HTML5](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543904529733.png\")
<\/p>\n![\"HTML5](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/172543904743332.png\")
<\/p>\n