HTML5的新语义化标签

HTML5引入了许多新的语义化标签，这些标签旨在使网页的结构更加清晰和易于理解，不仅对开发者有帮助，对搜索引擎和辅助技术也非常友好。本文将详细介绍HTML5中的新语义化标签及其用途。

HTML5语义化标签概述

HTML5中的语义化标签通过定义网页内容的结构和意义，使得网页内容更加清晰，便于搜索引擎和浏览器理解。这些标签包括：

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <main>
• <figure>
• <figcaption>
• <mark>
• <time>
• <details>
• <summary>

1. <header>

<header>标签用于定义文档或部分的页眉。它通常包含导航链接、标题、标志等。

<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
        </ul>
    </nav>
</header>
​

 

 

2. <nav>

<nav>标签用于定义导航链接的部分。它包含一组导航链接。

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#contact">联系</a></li>
    </ul>
</nav>
​

 

 

3. <section>

<section>标签表示文档中的一个独立部分，可以包含主题内容或功能。

<section>
    <h2>关于我们</h2>
    <p>这是关于我们的内容。</p>
</section>
​

 

 

4. <article>

<article>标签表示一篇独立的内容，如文章、博客、新闻等。

<article>
    <h2>文章标题</h2>
    <p>这是文章的内容。</p>
</article>
​

 

 

5. <aside>

<aside>标签表示与主要内容相关的附属内容，如侧边栏、广告等。

<aside>
    <h3>侧边栏标题</h3>
    <p>这是侧边栏的内容。</p>
</aside>
​

 

 

6. <footer>

<footer>标签表示文档或部分的页脚，通常包含版权信息、链接等。

<footer>
    <p>© 2024 网站名称. 版权所有.</p>
</footer>
​

 

 

7. <main>

<main>标签用于表示文档的主要内容，内容应是文档中唯一的主要内容。

<main>
    <h1>主要内容标题</h1>
    <p>这是主要内容。</p>
</main>
​

 

 

8. <figure>

<figure>标签用于表示独立的内容，通常与图片、图表、代码块等一起使用。

<figure>
    <img src="image.jpg" alt="描述" style="">
    <figcaption>图像描述</figcaption>
</figure>
​

 

 

9. <figcaption>

<figcaption>标签用于为 <figure>元素提供说明。

<figure>
    <img src="image.jpg" alt="描述" style="">
    <figcaption>图像描述</figcaption>
</figure>
​

 

 

10. <mark>

<mark>标签用于高亮显示文本，表示其重要性或相关性。

<p>请注意这个<mark>重要</mark>的部分。</p>
​

 

 

11. <time>

<time>标签用于表示时间或日期。

<p>活动日期是<time datetime="2024-06-15">2024年6月15日</time>。</p>
​

 

 

12. <details> 和 <summary>

<details>标签用于表示用户可以查看或隐藏的额外细节，<summary>标签用于提供 <details>元素的概要。

<details>
    <summary>更多信息</summary>
    <p>这是详细信息的内容。</p>
</details>