HTML5 新增语义化标签详解

HTML5 引入了多个语义化标签，这些标签能够更好地描述网页内容的结构和含义，使代码更具可读性，同时也有助于搜索引擎优化(SEO)和无障碍访问。

主要新增语义化标签

1. 结构类标签

   • <header> - 定义文档或节的页眉
   • <footer> - 定义文档或节的页脚
   • <nav> - 定义导航链接
   • <main> - 定义文档的主要内容
   • <article> - 定义独立的自包含内容
   • <section> - 定义文档中的节
   • <aside> - 定义页面内容之外的内容(如侧边栏)

2. 媒体类标签

   • <figure> - 定义自包含内容，如图表、插图等
   • <figcaption> - 定义 <figure> 元素的标题
   • <video> - 定义视频内容
   • <audio> - 定义音频内容

3. 其他语义化标签

   • <time> - 定义日期/时间
   • <mark> - 定义需要突出显示的文本
   • <progress> - 定义任务进度
   • <meter> - 定义度量衡
   • <details> - 定义用户可查看或隐藏的额外细节
   • <summary> - 定义 <details> 元素的可见标题

详细解释

结构类标签

1. <header>
   通常包含网站的标题、logo和主导航。可以出现在文档的多个位置，不仅限于页面顶部。

2. <footer>
   通常包含版权信息、联系方式等。和header一样，可以出现在多个位置。

3. <nav>
   专门用于导航链接的区域，如主导航、侧边导航等。一个页面可以有多个nav元素。

4. <main>
   表示文档的主要内容区域，一个页面应该只有一个main元素。

5. <article>
   表示独立的内容块，如博客文章、新闻故事等，应该能够独立于文档其余部分被理解。

6. <section>
   定义文档中的逻辑部分，通常会有标题(h1-h6)。与article不同，section不一定能独立存在。

7. <aside>
   表示与周围内容相关但不是主要内容的部分，如侧边栏、广告区域等。

媒体类标签

1. <figure> 和 <figcaption>
   用于将图像、图表等与其标题组合在一起，使内容更具语义化。

2. <video> 和 <audio>
   原生支持多媒体内容，无需插件即可播放视频和音频。

其他语义化标签

1. <time>
   用于标记日期和时间，可以包含机器可读的datetime属性。

2. <mark>
   高亮显示文本，常用于搜索结果中匹配的关键词。

3. <progress> 和 <meter>
   分别表示任务进度和度量值，如磁盘使用量、投票结果等。

4. <details> 和 <summary>
   创建可折叠的内容区域，summary是可见的标题，details包含详细内容。

这些语义化标签不仅使HTML结构更清晰，还能帮助搜索引擎更好地理解页面内容，同时提升无障碍访问体验。