语义化标签是HTML5中具有明确含义的元素，如header、nav、main、article、section、aside、footer，它们通过定义内容结构提升可读性、SEO和无障碍访问，正确使用需根据内容意义选择标签而非仅替代div。
HTML5 引入了多个语义化标签，让网页结构更清晰，提升可读性和 SEO 效果。这些标签不是为了“好看”，而是为了让浏览器、开发者和辅助设备更好地理解页面内容的结构。
什么是语义化标签？
语义化标签是指标签本身能表达其内容意义的 HTML 元素。比如 article 表示一篇文章，nav 表示导航区域，而不是像 div 那样无具体含义。
使用语义化标签有助于：
- 提高代码可读性
- 增强搜索引擎优化（SEO）
- 提升无障碍访问支持（如屏幕阅读器）
- 便于团队协作与维护
常用 HTML5 语义化标签及功能
以下是 HTML5 新增的主要语义化标签及其典型用途：
立即学习“前端免费学习笔记（深入）”；
header表示页面或区块的头部区域，通常包含标题、logo 或导航。可以出现在页面顶部，也可以用于文章内部的标题部分。
<header> <h1>网站标题</h1> <nav><a href="#home">首页</a></nav> </header>nav
定义主导航链接区域，用于包裹主要的导航菜单。
<nav>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
main
表示页面主体内容，一个页面只能有一个 main 标签，且不应嵌套在 article、aside 等其他区域中。
<main>
<h2>文章标题</h2>
<p>这是主要内容……</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9849" title="plan-family-law-practice-local-seo-faq-cluster"><img
src="https://img.php.cn/upload/skill/000/000/081/179283251677988.jpg" alt="plan-family-law-practice-local-seo-faq-cluster" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9849" title="plan-family-law-practice-local-seo-faq-cluster">plan-family-law-practice-local-seo-faq-cluster</a>
<p>调研本地常见问题，将其归类为若干主题簇，并为家事法律业务撰写可直接上线的 FAQ 内容。适用于开展针对……的本地 SEO 工作。</p>
</div>
<a href="/xiazai/skill9849" title="plan-family-law-practice-local-seo-faq-cluster" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</main>
article
代表独立的内容块，比如博客文章、新闻条目或用户评论。
<article> <h3>技术分享：HTML5 语义化</h3> <p>本文介绍如何使用新标签……</p> </article>section
表示文档中的一个区块，通常包含一个标题。适合将内容按主题分组。
<section> <h2>第一部分：简介</h2> <p>这里是介绍内容……</p> </section>aside
表示与主内容相关但可独立存在的侧边内容，如侧栏、广告、引用等。
<aside> <h4>推荐阅读</h4> <ul><li><a href="#">CSS 布局技巧</a></li></ul> </aside>footer
表示页面或区块的底部信息，常用于版权说明、联系方式或页脚导航。
<footer> <p>© 2025 我的网站. 版权所有.</p> </footer>
如何正确使用语义化标签？
关键是根据内容的实际含义选择合适的标签，而不是仅仅为了替换 div。以下是一些实用建议：
- 每个页面最多使用一个 main 标签
- nav 不必只出现在顶部，也可用于页脚中的关键链接组
- article 内部可以包含自己的 header 和 footer
- section 和 div 的区别：有明确主题用 section，仅做样式容器用 div
- 避免滥用 div 替代语义标签
基本上就这些。合理使用语义化标签，能让 HTML 更聪明，也让网页更易用、更专业。
