HTML5 语义化标签

HTML5 新增了一组"有含义"的标签，让页面结构一目了然，对 SEO 和无障碍很友好。

为什么需要语义化

以前大家用一堆 div 搭页面，搜索引擎分不清哪是导航、哪是正文。语义化标签告诉浏览器每个区域"是什么"。

核心语义化标签

标签	含义	典型用途
<header>	页头	顶部标题、logo、导航
<nav>	导航	导航链接
<main>	主体	页面主要内容（每页一个）
<section>	章节	一组相关内容
<article>	文章	独立可复用的内容块
<aside>	侧边栏	附属信息、广告
<footer>	页脚	版权、联系、底部信息

页面骨架示例

<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/blog">博客</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>一篇文章标题</h2>
      <p>文章正文……</p>
    </article>
  </main>

  <aside>
    <p>侧边栏：推荐文章</p>
  </aside>

  <footer>
    <p>© 2026 版权所有</p>
  </footer>
</body>

语义化 vs div

不推荐：  <div class="header">  <div class="nav">  <div class="main">
推荐：    <header>              <nav>              <main>

对 SEO 的好处

• 搜索引擎能快速识别正文，提升内容收录质量
• 无障碍读屏软件能正确播报页面结构
• 代码可读性更高，利于维护

建议

优先用语义化标签搭结构，div 只做最后的补充。