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. 页面整体结构示例：
立即学习“前端免费学习笔记（深入）”；
网站标题
文章标题
文章正文内容...
2. 使用建议：
- 避免滥用，优先选择语义明确的标签组织内容。
- 适合有明确主题的分节内容，不要仅为了样式而用。
- 内的内容应具备自包含性，可被独立分发。
- 在一个页面中只出现一次，且不嵌套在、等内部。
对SEO和无障碍的支持优势
语义化标签让屏幕阅读器能准确识别页面结构，帮助视障用户快速定位导航、主内容或页脚区域。
搜索引擎也能更高效地抓取和理解页面重点内容，例如将标记的内容视为原创文章，有利于排名提升。
配合ARIA属性使用，还能进一步增强交互组件的可访问性。
基本上就这些。HTML5语义化标签不仅让代码更整洁，也提升了网页的可用性和专业度。掌握它们的正确用法，是现代前端开发的基础能力之一。
