语义化HTML（SEO友好结构）

语义化HTML指使用具有明确含义的标签描述内容，帮助搜索引擎理解页面结构。

核心语义标签

页面结构标签

HTML

<header>页眉区域</header>
<nav>导航区域</nav>
<main>主内容区域</main>
<article>独立文章内容</article>
<section>内容分区</section>
<aside>侧边栏/补充内容</aside>
<footer>页脚区域</footer>

内容语义标签

标签	用途	SEO价值
`<article>`	独立完整内容	高，标识核心内容块
`<section>`	主题分组内容	中，划分内容章节
`<aside>`	相关补充内容	低，标识次要信息
`<figure>`	图片/图表容器	中，关联说明文字
`<time>`	时间日期	中，语义化时间信息

SEO最佳实践

主内容结构

HTML

<main>
  <article>
    <header>
      <h1>文章标题</h1>
      <time datetime="2026-05-17">2026年5月17日</time>
    </header>

    <section>
      <h2>章节标题</h2>
      <p>正文内容...</p>
    </section>

    <section>
      <h2>另一章节</h2>
      <figure>
        <img src="diagram.png" alt="流程示意图">
        <figcaption>图1: 流程示意图</figcaption>
      </figure>
    </section>
  </article>

  <aside>
    <h2>相关推荐</h2>
    <!-- 相关内容 -->
  </aside>
</main>

面包屑导航

HTML

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/articles/">文章</a></li>
    <li><a href="/articles/html/" aria-current="page">HTML</a></li>
  </ol>
</nav>

常见错误

错误做法	正确做法
`<div class="header">`	`<header>`
`<div class="nav">`	`<nav>`
`<div class="article">`	`<article>`
滥用`<section>`	按主题分组才用
跳过标题层级	h1→h2→h3顺序嵌套

注意：语义化标签不能嵌套自身，<article>内可嵌套<section>，反之不推荐。

要点总结

使用<header>、<nav>、<main>、<footer>划分页面结构
核心内容用<article>，章节分组用<section>
保持标题层级顺序（h1→h2→h3）
面包屑导航用<nav>+<ol>+aria-label
避免滥用<div>替代语义标签

📝 发现内容有误？点击此处直接编辑