HTML5语义化标签详解

总裁您好，欢迎来到html5语义化航空，本文将为您提供从入门到登机的一站式服务

出发 --- 为什么选择语义化航空

语义化航空的优势：

• 提升代码的可读性和可维护性

  • 当您看到<header></ header>这样的标签时，您会很流畅的明白"这一部分组成网页的头部"

• 有利于搜索引擎优化（SEO）

  • 搜索引擎爬虫看到语义化标签后，它会立即明白页面结构和内容优先级

• 减少对额外class和id的依赖

  • 无需额外使用class='nav'这样的形式来标识区块的作用

• 增强网页的可访问性

  • 能帮助多种工具和辅助技术理解页面结构和内容关系

已到达 --- 机场大门

在您的左手边，是一份语义化航空站点大纲，我们一起来阅读一下

• 🧑<header></ header>

  表示页面或section的头部，通常包含，标题、logo、导航栏等

• 👣<nav></ nav>

  用于定义导航区域

• 📇<main></ main>

  用于定义页面的主要内容

• 📑<artical></ artical>

  用于定义可独立于页面且能够完整存在的内容，例如博客，评论等

• 👥<section></ section>

  用于对页面内容进行分组，通常包含一个主题性的标题，适用于章节、板块等。

• 💡<aside></ aside>

  主要用于和主要内容相关的辅助区域，例如章节大纲栏

• 🦶🏻<footer></ footer>

  表示页面的尾部

• 💿<figure></ figure>&<figcaption></ figcaption>

  前者用于包裹媒体内容（图片，图表，代码等） 后者用于给媒体内容提供标题

• ⌚<time></ time>

  用于表示时间，datetime属性提供机器可读的时间'2022-10-09'

• ✅<mark></ mark>

  用于表示高亮文本

已到达 --- 安检区域

安检需检查您对于语义化网页可访问性高的理解，在经过安检之前，先为您提供一些指导，以便您能迅速通过安检

首先我们需要清楚为什么语义化标签能提升可访问性

• 减少认知负担：对于残障人士常用的屏幕阅读器来说，语义化标签可以帮助它直接理解网页内容
• 符合WCAG标准：W3C 可访问性指南（WCAG）明确要求 "信息和关系能被用户代理识别"，语义标签是满足这一要求的基础。

提供一些语义化标签示例供您参考学习

• header + nav
  • 明确标识页头和导航栏，可以帮助屏幕阅读器直接识别到导航区块

<header>
  <h1>网站标题</h1>
  <nav aria-label="主导航"> <!-- aria-label补充说明导航用途 -->
    <ul>
      <li><a href="/home">首页</a></li>
      <li><a href="/news">新闻</a></li>
    </ul>
  </nav>
</header>

• section + h2~h6(h1最好在header中)
  • 每个section最好都要有一个h_i标签，并符合层级关系

<section>
  <h2>产品介绍</h2>
  <section>
    <h3>基础版</h3> <!-- 层级清晰，辅助工具可识别章节关系 -->
    <p>...</p>
  </section>
</section>

• article
  • 表示独立完整的内容（如文章、评论、卡片），屏幕阅读器会将其识别为一个 "可独立访问的单元"，用户可单独聚焦查看。

<article aria-labelledby="post-title"> <!-- 关联标题ID，增强语义 -->
  <h2 id="post-title">如何提升可访问性</h2>
  <p>...</p>
</article>

• aside
  • 示与主内容相关的辅助信息（如侧边栏、注释、广告），辅助工具会将其与主内容区分开，用户可选择是否忽略。

<main>
  <article>...</article>
  <aside aria-label="相关推荐"> <!-- 说明辅助内容的用途 -->
    <h3>你可能还喜欢</h3>
    <ul>...</ul>
  </aside>
</main>

眼尖的总裁也许发现了，article和aside示例中，都有一个aria开头的属性，这个属性的作用是增强语义，或区分多个相同语义化标签

已到达 --- 候机平台

宽敞明亮的候机平台，随处可见各种指引路标，路标提供的便利不禁使我们联想起➡️语义化标签对于搜索引擎解析页面结构和定位内容提供的便利(SEO)

搜索引擎爬虫依赖标签的语义来解析页面结构，清晰的层级能帮助爬虫快速识别核心内容和次要内容。

1、<header> + 标题标签（h1-h6） ：

`<header>` 中的 `<h1>` 通常被视为页面的核心主题，爬虫会赋予其较高权重。后续内容通过 `<h2>`（章节）、`<h3>`（子章节）建立层级，形成 "主题 - 分支" 结构，让爬虫理解内容逻辑。



```html
<header>
  <h1>2024年最佳旅行背包推荐</h1> <!-- 页面核心主题 -->
</header>
<main>
  <section>
    <h2>如何选择旅行背包？</h2> <!-- 主要章节 -->
    <p>...</p>
    <section>
      <h3>容量选择指南</h3> <!-- 子章节 -->
      <p>...</p>
    </section>
  </section>
</main>
```
**注意**：一个页面建议只保留一个 `<h1>`（通常在 `<header>` 中），避免稀释核心主题权重。

2、使用<main>突出核心内容

<main> 能让爬虫直接识别 "这是页面最重要的内容"，减少对冗余代码的解析成本。以及强化核心关键词与页面主题的联系

<main>
  <article>
    <h2>东京自由行全攻略</h2>
    <p>东京作为日本首都，拥有丰富的旅游资源...（包含"东京旅游"、"自由行攻略"等核心关键词）</p>
    <!-- 核心内容：景点推荐、交通指南、住宿建议等 -->
  </article>
</main>

3、使用 <article> 标记独立内容，提升内容价值识别

<article> 表示独立完整的内容（如博客文章、产品介绍、新闻报道），搜索引擎会将其视为 "具有独立价值的信息单元"，更易被判定为高质量内容。

1. 对于博客、资讯类网站，每篇文章用 <article> 包裹，有助于爬虫将其识别为单独的索引单元。
2. 对于电商产品页，<article> 可包裹单个产品的详细信息，提升 "产品名称"、"特性" 等关键词的权重。

<article>
  <h2>Apple iPhone 15 Pro 评测：性能与摄影的突破</h2>
  <p>iPhone 15 Pro 搭载 A17 Pro 芯片，相机系统升级...（包含产品名、核心参数等关键词）</p>
</article>

4、使用<nav>标签，标记网站重要页面，提升搜索结果排名

<nav aria-label="主导航">
  <ul>
    <li><a href="/travel">旅行攻略</a></li>
    <li><a href="/equipment">户外装备</a></li>
    <li><a href="/community">旅游社区</a></li>
  </ul>
</nav>

5、<figure> + <figcaption> 优化媒体内容的 SEO

图片、视频等媒体内容通过 <figure> 包裹，并配合 <figcaption> 提供描述，能帮助搜索引擎理解媒体内容，提升图片搜索（如 Google Images）的曝光率。

<figure>
  <img src="tokyo-tower.jpg" alt="东京铁塔夜景">
  <figcaption>东京铁塔：建于1958年，高333米，是东京的标志性建筑之一</figcaption>
</figure>

6. <time> 标签提升时间敏感内容的相关性

对于新闻、活动、教程等时间敏感的内容，<time> 标签的 datetime 属性提供标准化时间格式，帮助搜索引擎识别内容的时效性，提升在 "最新资讯" 类搜索中的排名。

<p>发布于 <time datetime="2024-08-20">2024年8月20日</time></p>
<p>活动时间：<time datetime="2024-09-15T10:00">2024年9月15日10:00</time></p>

正在经过检票口

总结一下，语义化标签，使得内容含义直接与标签绑定，提高了开发效率，提升网站在搜索中的排名，并且对于屏幕阅读器和其他辅助工具更加友好，是现代web中结构与语义分离的具体实践和体现

成功登机，准备起飞

欢迎总裁乘坐html5语义化航空00001号客机，请关闭手机，系好安全带，我们将在两小时后到达西安，开启新一轮的旅途