HTML5引入语义化标签提升网页结构清晰度，如header、nav、main、article、section、aside、footer及figure配合figcaption，替代div+class模式，增强SEO与无障碍访问，提高代码可读性与维护性。
HTML5引入了多个新的语义化标签，让网页结构更清晰、可读性更强，同时提升搜索引擎优化（SEO）和无障碍访问（Accessibility）能力。这些标签通过明确标记内容的功能，帮助浏览器和开发者更好地理解页面布局。
常见的HTML5新增语义化标签及其功能
以下是一些核心的HTML5语义化标签，它们替代了过去常用的div+class方式，使代码更具含义：
- <header>：表示页面或区块的头部区域，通常包含标题、导航或logo。
- <nav>：定义主导航链接区域，用于包裹主要的导航菜单。
- <main>：标识页面主要内容区域，每个页面应只有一个main标签。
- <article>：表示独立的内容块，如博客文章、新闻条目或论坛帖子。
- <section>：定义文档中的一个分区或章节，通常包含一个标题。
- <aside>：表示与主体内容相关但可独立存在的侧边栏内容，如广告、作者介绍等。
- <footer>：代表页面或区块的底部，常用于版权信息、联系方式或辅助链接。
- <figure> 和 <figcaption>：用于图文组合，figure包裹图片、图表等，figcaption为其提供说明文字。
各标签的典型使用场景
合理使用语义化标签能显著提升代码的逻辑性和维护效率。
1. 页面整体结构示例：
立即学习“前端免费学习笔记（深入）”；
<header>
<h1>网站标题</h1>
<nav>
<a href="/home">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<header>
<h2>文章标题</h2>
</header>
<p>文章正文内容...</p>
<footer>
<p>发布于2024年</p>
</footer>
</article>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href="#">推荐阅读1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 公司名称. 保留所有权利。</p>
</footer>
2. 使用建议：
- 避免滥用<div>，优先选择语义明确的标签组织内容。
- <section>适合有明确主题的分节内容，不要仅为了样式而用。
- <article>内的内容应具备自包含性，可被独立分发。
- <main>在一个页面中只出现一次，且不嵌套在<article>、<aside>等内部。
对SEO和无障碍的支持优势
语义化标签让屏幕阅读器能准确识别页面结构，帮助视障用户快速定位导航、主内容或页脚区域。
搜索引擎也能更高效地抓取和理解页面重点内容，例如将<article>标记的内容视为原创文章，有利于排名提升。
配合ARIA属性使用，还能进一步增强交互组件的可访问性。
基本上就这些。HTML5语义化标签不仅让代码更整洁，也提升了网页的可用性和专业度。掌握它们的正确用法，是现代前端开发的基础能力之一。
