html5语义化标签提升网页结构清晰度、可读性及seo。通过使用<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等标签，按内容含义组织页面，替代无意义的div，增强无障碍访问支持。正确用法包括：header用于页眉，nav包含主导航，main唯一包裹主体内容，article表示独立文章，section划分主题区块，aside放置关联侧边内容，footer定义底部信息，并配合figure与figcaption强化图文语义。编写时应避免滥用div，保持层级合理，heading连续，优先使用原生语义标签而非依赖ARIA。典型结构示例中，页面由header、main（含article和aside）、footer构成，main内不嵌套其他区域标签，确保结构逻辑清晰。语义化不仅是标签选择，更是信息架构设计，有助于维护、搜索引擎抓取与辅助技术解析。
html5 引入了语义化标签（Semantic Tags），让网页结构更清晰、可读性更强，同时提升 SEO 和无障碍访问支持。使用语义化标签不是简单替换 div，而是根据内容的真实含义选择合适的标签。
常用 HTML5 语义化标签及其用途
以下是一些核心语义化标签及其推荐使用场景：
- <header>：表示页面或区块的头部，通常包含标题、导航、logo 等。可用于页面顶部，也可用于文章或 aside 区块内的标题区域。
- <nav>：定义主导航链接区域，如顶部菜单、侧边栏导航。注意不是所有链接组都需要 nav，仅用于主要导航。
- <main>：包裹页面主要内容，每个页面应只有一个 main 标签，且不应嵌套在 article、aside、footer 等内部。
- <article>：表示独立的内容块，比如博客文章、新闻条目、用户评论等可被单独分发的内容。
- <section>：定义文档中的一个区块，通常包含一个 heading（h1-h6），适合按主题划分内容。
- <aside>：表示与主内容相关但可独立存在的侧边内容，如侧边栏、广告、引用等。
- <footer>：页面或区块的底部信息，常用于版权信息、联系方式、返回顶部链接等。
- <figure> 和 <figcaption>：用于图文组合，如图片+说明文字，增强内容语义。
语义化结构编写规范
正确使用语义标签需遵循一定的结构逻辑和最佳实践：
- 避免滥用 div，优先考虑是否有更合适的语义标签替代。
- 保持标签层级合理，不要过度嵌套。例如，nav 通常放在 header 内，但也可独立存在。
- 确保每个页面的 main 标签唯一，并且是主要内容的直接容器。
- 使用 article 包裹可独立传播的内容，如博客、论坛帖；用 section 划分主题区块。
- 为屏幕阅读器考虑，配合 ARIA 属性增强可访问性，但优先使用原生语义标签。
- heading 层级要连续，不要跳级（如 h1 后直接 h4），保持大纲清晰。
实际结构示例
一个典型页面的语义化结构如下：
立即学习“前端免费学习笔记（深入）”；
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>文章标题</h2>
<p>发布于 2025 年</p>
</header>
<p>文章内容…</p>
</article>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href=”#”>推荐阅读 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 版权信息</p>
</footer>
</body>
基本上就这些。语义化不只是写对标签，更是构建清晰信息架构的过程。合理使用 HTML5 语义标签，能让代码更易维护，也让网页对搜索引擎和辅助技术更友好。