HTML5 語意元素

以下的文章將為您提供HTML5中的各種語意元素。語義是關於不同類型的標籤，其功能將根據其標籤名稱描述並執行相同的功能。標籤的功能很容易透過其名稱來理解，該名稱採用使用者可理解的名稱/格式。 HTML 中的大多數元素通常都是語意元素。

HTML5 中語意元素的優點

語意元素的優點如下：

• 輕鬆理解程式碼。
• 維護可以快速且適當地進行。
• 無需專門為任何標籤添加任何描述。

HTML5 中的各種語意元素

現在讓我們進入語意元素：

1.

這個標籤讓我們知道這個標籤內的資料是專門針對類似內容的。這也取決於我們通常擁有的不同類型的文章。可以是部落格、論壇、報紙專欄文章等

代碼：

<article>
<h2 id="HTML">HTML5</h2>
<p>New Updated version of HTML</p>
</article>
<article>
<h2 id="Learning-HTML">Learning HTML</h2>
<p> We are learning through EDUCBA</p>
</article>

輸出：

2.

這個標籤是關於提供總資料的一個部分內容。在了解如何使用文章標籤和章節標籤後，可以在每個標籤內使用這些標籤。也就是說，節標籤可以在文章標籤內使用，反之亦然。

代碼：

<section>The section here is about:
<p></p>
<h4 id="Learning-and-practising"> Learning and practising</h4> 
</section>

輸出：

3.

這個標籤給了所有的標題資料。我們想要放置在標頭格式中的任何資料都在此標頭標籤下使用。而這個標籤可以在整個 HTML 腳本中使用多次。

代碼：

<header>
<h3 id="This-is-header">This is header #1</h3>
<p> First one</p>
</header>
<p> next one ...</p>
<header>
<h3 id="This-is-header">This is header #2</h3>
<p> Second one </p>
</header>

輸出：

4.

這是 HTML 腳本中的頁腳部分。一般來說，我們會看到所有版權資料以及我們在任何優惠下找到的一小部分，例如任何優惠的「條件適用」。所以這些東西都是在頁腳標籤下定義的。

代碼：

<p> Inside Body and above footer tag</p>
<footer>
<p> Inside footer tag.</p>
</footer>
<footer>
<p></p>
<h4 id="Another-footer-tag"> Another footer tag</h4>
<p></p>
<h6 id="Conditions-Apply">Conditions Apply</h6> 
</footer>

輸出：

5.

這個標籤為我們提供了導航元素。任何 HTML 文件腳本中的 URL，我們通常希望透過此標籤從一個頁面導航到另一個頁面。此標籤下給出的任何數據都可以作為超連結提供。這些超連結可用於從一個部分導航到另一部分。

代碼：

<h4 id="About"> About </h4>
<nav><a href="#"> About link 1</a>
<a href="#"> About link 1</a>
</nav>
<h4 id="Contact"> Contact </h4>
<nav>
<a href="#"> Contact Link 1</a>
<a href="#"> Contact Link 2</a>
</nav>

輸出：

練習時，點擊這些連結並檢查點擊時超連結的顏色如何變化。

6.

這是一個用於在 HTML 文件兩側顯示資料的標籤。在許多網站上，我們可以找到側邊欄中存在的內容，這些內容是使用此aside標籤顯示的。此內容應與文件中存在的其他數據一致。

代碼：

<p>How aside tag is used </p>
<aside>
<h4 id="Inside-aside-tag">Inside aside tag</h4>
<p>Content inside aside tag</p>
</aside>

輸出：

無法用同樣的方式完全指定具體的內容；只有使用整個 HTML 頁面才能清楚地記錄和理解它。

7.

此標籤指定我們要附加圖像。此標籤可用於指定圖像來源並顯示 gif 或圖像。

代碼：

<figure>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543905337030.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML5 語意元素" >
</figure>

如上所述，這就是我們定義figure標籤的方式。在figure標籤內，我們可以使用source標籤指定我們的映像指令。在這個圖形標籤內，我們可以依序使用圖形標題標籤。

8.

此標籤用於在所提供的圖像下提供標題。它可以在figure標籤內使用。其用法可以在下面的範例中看到。

<figure>
<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/172543905337030.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML5 語意元素" >
<figcaption>This is description of the image attached.</figcaption>
</figure>

您可以嘗試透過提供影像來源來執行相同的操作，並檢查輸出的顯示方式。

9.

該標籤指定了 HTML 網站的所有屬性和完整內容。它包含所有獨特的內容。對於此特定標記需要注意的重要一點是，此標記在整個頁面建立中只能使用一次。我們發現其他標籤在建立網頁時可以多次使用，但這個主標籤是單次使用標籤。

代碼：

<main>
<h1 id="Learning-HTML-Semantic-Tags">Learning HTML Semantic Tags</h1>
<article>
<h4 id="Studying">Studying</h4>
<p> Reading would help to understand different topics</p>
</article>
<article>
<h4 id="Practising">Practising</h4>
<p> With Studying , Practising is a must thing to do in learning</p>
</article>
</main>

輸出：

10.

This tag is for highlighting specific content or data. In other words, this tag is helpful in marking data.

Code:

<p> In this whole text which I am writing now, <mark> I want to mark this text </mark></p>

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:

<details open="true">
<p>Is this displayed?</p>
</details>

Output:

Now, what would be the output if we did not use the open attribute?

Code:

<details>
<p>Is this displayed?</p>
</details>

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:

<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>

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:

<p>At present time is <time>11:00</time> pm in the night.</p>

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:

<dialog open="true">
<p> The data written here gets displayed in a dialog box </p>
</dialog>

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:

<h1 id="EDUCBA">EDUCBA</h1>
Your learning progress is:
<progress value="72" max="100">
</progress>

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:

<h2 id="EDCUBA">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>

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:

<video>
<source src="video_name.mp4" type="video/mp4">
</source></video>

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中文網其他相關文章！