引入
HTML 语义化标签用于让网页结构更清楚，不只是让内容显示出来。
它们能告诉浏览器、搜索引擎和辅助工具：这块内容是导航、正文、文章、侧边栏还是页脚。
正文
定义
定义
语义化标签是带有明确含义的 HTML 标签，用来描述内容在页面中的角色和结构。
例如 <header> 表示头部，<nav> 表示导航，<article> 表示文章。
相比全部使用 <div>，语义化标签更容易看出页面结构。
常见语义化标签
<header>
<header> 表示页面或某个区域的头部。
<header>
<h1>我的博客</h1>
<p>记录前端学习</p>
</header>它常用于放标题、Logo、简介等内容。
<nav>
<nav> 表示导航区域。
<nav>
<a href="index.html">首页</a>
<a href="about.html">关于</a>
</nav>它适合放主要页面链接，不是所有链接都必须放进 <nav>。
<main>
<main> 表示页面主要内容。
<main>
<h2>文章列表</h2>
<p>这里是页面的主要内容。</p>
</main>一个页面通常只建议有一个主要的 <main>。
<section>
<section> 表示页面中的一个主题区域。
<section>
<h2>HTML 基础</h2>
<p>这里介绍 HTML 的基础知识。</p>
</section>如果某块内容有自己的主题标题，可以考虑使用 <section>。
<article>
<article> 表示一块相对独立的内容。
<article>
<h2>HTML 学习笔记</h2>
<p>这是一篇独立的文章内容。</p>
</article>它适合博客文章、新闻、帖子、评论等独立内容。
<aside>
<aside> 表示侧边内容或补充内容。
<aside>
<h2>相关推荐</h2>
<a href="html.html">HTML 基础</a>
</aside>它常用于侧边栏、广告、相关阅读等内容。
<footer>
<footer> 表示页面或某个区域的底部。
<footer>
<p>Copyright 2026</p>
</footer>它常用于版权信息、备案信息、底部导航等。
简单页面结构
<header>
<h1>我的网站</h1>
</header>
<nav>
<a href="index.html">首页</a>
<a href="about.html">关于</a>
</nav>
<main>
<article>
<h2>第一篇文章</h2>
<p>文章正文内容。</p>
</article>
</main>
<footer>
<p>版权所有</p>
</footer>这比只用 <div> 更容易看懂每一块内容的作用。
和 <div> 的区别
<div> 本身没有明确语义，只表示一个普通容器。
<div>这里是一块内容</div>语义化标签不仅是容器，还说明了内容的角色。
<nav>这里是导航</nav>不是说不能用 <div>，而是有明确语义时，优先选择更合适的标签。
特点
- 语义化标签能让 HTML 结构更清楚
- 有助于搜索引擎理解页面内容
- 有助于屏幕阅读器等辅助工具理解页面结构
- 代码可读性更好，后期维护更方便
<div>仍然可以使用，但不要所有结构都只用<div>
注意事项
- 不要为了名字好看就乱用语义化标签
<main>通常一个页面只写一个<nav>适合主要导航，不是所有链接区域都必须用它<section>通常应该有自己的标题<article>更适合独立内容，不是普通区块都要用它- 语义化标签不会自动让页面变好看，样式仍然需要 CSS
理解
可以把语义化标签理解为给网页结构加上“身份”。
<div> 只是说“这里有一块内容”，而 <nav>、<main>、<footer> 会说明“这块内容是做什么的”。
语义化的重点不是外观，而是让结构更清楚、更容易被理解。
引出
理解语义化标签之后，可以继续学习 HTML 可访问性 和 HTML SEO 基础，它们都和清晰的页面结构有关。