下面的文章將為您提供HTML5中的各種語義元素。語義是關(guān)于不同類型的標(biāo)簽，其功能將根據(jù)其標(biāo)簽名稱描述并執(zhí)行相同的功能。標(biāo)簽的功能很容易通過其名稱來理解，該名稱采用用戶可理解的名稱/格式。 HTML 中的大多數(shù)元素通常都是語義元素。
HTML5 中語義元素的優(yōu)點
語義元素的優(yōu)點如下：
- 輕松理解代碼。
- 維護(hù)可以快速且適當(dāng)?shù)剡M(jìn)行。
- 無需為任何標(biāo)簽專門添加任何描述。
HTML5 中的各種語義元素
現(xiàn)在讓我們進(jìn)入語義元素：
1.
這個標(biāo)簽讓我們知道這個標(biāo)簽內(nèi)的數(shù)據(jù)是專門針對類似內(nèi)容的。這也取決于我們通常擁有的不同類型的文章。可以是博客、論壇、報紙專欄文章等
代碼：
<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.
這個標(biāo)簽是關(guān)于提供總數(shù)據(jù)的一個部分內(nèi)容。了解如何使用文章標(biāo)簽和章節(jié)標(biāo)簽后，可以在每個標(biāo)簽內(nèi)使用這些標(biāo)簽。也就是說，節(jié)標(biāo)簽可以在文章標(biāo)簽內(nèi)使用，反之亦然。
代碼：
<html>
<body>
<section>The section here is about:
<p><h4> Learning and practising</h4> </p>
</section>
</body>
</html>
輸出：
3.
這個標(biāo)簽給出了所有的標(biāo)題數(shù)據(jù)。我們想要放置在標(biāo)頭格式中的任何數(shù)據(jù)都在此標(biāo)頭標(biāo)簽下使用。并且這個標(biāo)簽可以在整個 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 腳本中的頁腳部分。一般來說，我們會看到所有版權(quán)數(shù)據(jù)以及我們在任何優(yōu)惠下找到的一小部分，例如任何優(yōu)惠的“條件適用”。所以這些東西都是在頁腳標(biāo)簽下定義的。
代碼：
<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.
這個標(biāo)簽為我們提供了導(dǎo)航元素。任何 HTML 文檔腳本中的 URL，我們通常希望通過此標(biāo)簽從一個頁面導(dǎo)航到另一個頁面。此標(biāo)簽下給出的任何數(shù)據(jù)都可以作為超鏈接提供。這些超鏈接可用于從一個部分導(dǎo)航到另一部分。
代碼：
<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>
輸出：
練習(xí)時，單擊這些鏈接并檢查單擊時超鏈接的顏色如何變化。
6. <旁白>
這是一個用于在 HTML 文檔兩側(cè)顯示數(shù)據(jù)的標(biāo)簽。在許多網(wǎng)站上，我們可以找到側(cè)邊欄中存在的內(nèi)容，這些內(nèi)容是使用此aside標(biāo)簽顯示的。此內(nèi)容應(yīng)與文檔中存在的其他數(shù)據(jù)一致。
代碼：
<html>
<body>
<p>How aside tag is used </p>
<aside>
<h4>Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>
</body>
</html>
輸出：
無法用同樣的方式完全指定具體的內(nèi)容；只有使用整個 HTML 頁面才能清楚地記錄和理解它。
7.
此標(biāo)簽指定我們要附加圖像。該標(biāo)簽可用于指定圖像源并顯示 gif 或圖像。
代碼：
<html>
<body>
<figure>
<img src="">
</figure>
</body>
</html>
如上所述，這就是我們定義figure標(biāo)簽的方式。在figure標(biāo)簽內(nèi)，我們可以使用source標(biāo)簽指定我們的圖像命令。在這個圖形標(biāo)簽內(nèi)，我們可以依次使用圖形標(biāo)題標(biāo)簽。
8.
此標(biāo)簽用于在所提供的圖像下提供標(biāo)題。它可以在figure標(biāo)簽內(nèi)使用。其用法可以在下面的示例中看到。
<html>
<body>
<figure>
<img src="">
<figcaption>This is description of the image attached.</figcaption>
</figure>
</body>
</html>
您可以嘗試通過提供圖像源來執(zhí)行相同的操作，并檢查輸出的顯示方式。
9.
該標(biāo)簽指定了 HTML 站點的所有屬性和完整內(nèi)容。它包含所有獨特的內(nèi)容。對于此特定標(biāo)記需要注意的重要一點是，此標(biāo)記在整個頁面創(chuàng)建中只能使用一次。我們發(fā)現(xiàn)其他標(biāo)簽在創(chuàng)建網(wǎng)頁時可以多次使用，但這個主標(biāo)簽是單次使用標(biāo)簽。
代碼：
<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 語義元素的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
![\"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