HTML5引入语义化标签提升网页结构清晰度，如header、nav、main、article、section、aside、footer及figure配合figcaption，替代div+class模式，增强SEO与无障碍访问，提高代码可读性与维护性。

HTML5引入了多个新的语义化标签，让网页结构更清晰、可读性更强，同时提升搜索引擎优化（SEO）和无障碍访问（Accessibility）能力。这些标签通过明确标记内容的功能，帮助浏览器和开发者更好地理解页面布局。

常见的HTML5新增语义化标签及其功能

以下是一些核心的HTML5语义化标签，它们替代了过去常用的div+class方式，使代码更具含义：

• ：表示页面或区块的头部区域，通常包含标题、导航或logo。
• ：定义主导航链接区域，用于包裹主要的导航菜单。
• ain>：标识页面主要内容区域，每个页面应只有一个main标签。
• ：表示独立的内容块，如博客文章、新闻条目或论坛帖子。
• ：定义文档中的一个分区或章节，通常包含一个标题。
• ：表示与主体内容相关但可独立存在的侧边栏内容，如广告、作者介绍等。
• ：代表页面或区块的底部，常用于版权信息、联系方式或辅助链接。

• 和 ：用于图文组合，figure包裹图片、图表等，figcaption为其提供说明文字。

各标签的典型使用场景

合理使用语义化标签能显著提升代码的逻辑性和维护效率。

1. 页面整体结构示例：

  
网站标题
  



  
    

      
文章标题
    
    
文章正文内容...
    
  

  
    
相关推荐
    

      
推荐阅读1
    
  

2. 使用建议：

• 避免滥用，优先选择语义明确的标签组织内容。
• 适合有明确主题的分节内容，不要仅为了样式而用。
• 内的内容应具备自包含性，可被独立分发。
• 在一个页面中只出现一次，且不嵌套在、等内部。

对SEO和无障碍的支持优势

语义化标签让屏幕阅读器能准确识别页面结构，帮助视障用户快速定位导航、主内容或页脚区域。

搜索引擎也能更高效地抓取和理解页面重点内容，例如将标记的内容视为原创文章，有利于排名提升。

配合ARIA属性使用，还能进一步增强交互组件的可访问性。

基本上就这些。HTML5语义化标签不仅让代码更整洁，也提升了网页的可用性和专业度。掌握它们的正确用法，是现代前端开发的基础能力之一。