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中文网其他相关文章！