HTML 中的文本与结构语义化标签

超文本标记语言（HTML）中的语义格式化标签不仅为内容赋予意义，还能帮助搜索引擎精准识别产品或服务信息。通过将 <div> 等通用容器替换为 <main> 等描述性标签，可构建更有序的页面结构。

这些语义元素有助于搜索引擎理解网站内容与架构，提升搜索排名及屏幕阅读器等辅助技术的无障碍访问体验。正如SEO专家巴里·亚当斯在《Google新闻SEO》中所述，语义标签能帮助搜索引擎识别“每个HTML部分的用途和价值”。

本指南将深入解析语义化HTML标签的定义、工作原理及最佳实践。

什么是HTML语义化格式标签？

语义HTML标签依据元素的含义、重要性或角色来定义网页特定部分。它们通过包含描述内容的开始和结束标签实现，例如 <strong> 以 <strong> 开头，以 </strong> 结尾，斜杠表示格式化结束。

文本级标签与结构级标签

语义化HTML元素主要分为两类：文本级标签和结构级标签。

文本级标签：用于描述内容含义或强调程度。例如 <strong> 标识重要词汇（如限时促销），其他常见标签包括标题（<h1>, <h2>）、强调（<em>）、段落（<p>）和引用（<blockquote>）。相比之下，非语义标签（如 <b>）仅关注视觉外观，向搜索引擎和辅助工具传达的意义较少。

结构性标签：如 <header> 或 <article>，用于组织和结构化网页内容。例如 <header> 包含标题或Logo，<article> 标识独立博客文章。相比 <div> 或 <span>，结构标签能让搜索引擎和屏幕阅读器更好地理解页面各部分的组织方式及相互关系。

注：许多Shopify主题已内置语义标记于模板和设置中，用户可间接使用而无需手动添加。

6种常见的文本语义化格式标签

• 强调重要性
• 强调
• 标题
• 标记
• 时间
• 引用

除基础的段落标签 <p> 外，语义化HTML还包含多种用于标识不同文本元素的标签。虽然浏览器通常以默认格式（粗体、斜体、高亮等）显示，但其核心价值在于提供意义和重要性：

强调重要性

<strong> 用于指示重要或有时效性的内容，提醒访客重点关注。常用于影响客户决策的信息，如销售截止日期或政策通知。浏览器通常将其显示为粗体。

示例：促销将于周日午夜结束 <strong></strong>。

强调

<em> 用于强调句中特定词语，类似口语语气的变化，常应用于产品描述或编辑内容。浏览器通常将其显示为斜体。

示例：这件夹克在同等重量下 <em></em> 异常保暖。

标题

使用 <h1> 至 <h6> 建立页面层级结构。每页通常仅含一个 <h1>（主标题），多个 <h2>（主要部分），以及 <h3>（子项目）等。浏览器默认以粗体显示，字体大小随级别递减。

示例：

<h1>美利奴羊毛便帽</h1>

<h2>产品详情</h2>

<h3>材质与护理</h3>

标记

<mark> 用于高亮显示与用户搜索查询相关的文本。电商网站的搜索结果常自动使用该标签高亮匹配词（如产品类型、颜色）。浏览器默认以黄色背景高亮显示。

示例：搜索结果：<mark>美利奴羊毛</mark> — 找到24款产品。

时间

结合机器可读的 datetime 属性使用 <time> 标签，可确保日期和时间在不同地区被一致解读（避免美式/英式日期歧义）。适用于标示销售截止日、预计运输时间或评论时间戳。

示例：请在 <time datetime="2026-05-06">5月6日</time> 前下单以确保送达。

引用

<blockquote> 表示来自外部来源的材料，如客户证言、推荐或产品评论。配合 cite 属性 (cite="source-url") 可注明原始出处，为屏幕阅读器提供更多上下文。浏览器通常将其显示为缩进引文。

示例：<blockquote cite="https://example-review-site.com">

"这是我二十年来徒步旅行中使用过的最好的防寒装备。"

</blockquote>

6种常见的结构语义格式化标签

• 页面或章节标题
• 导航
• 主要内容
• 独立内容
• 补充内容
• 页面或章节页脚

结构标签创建了“地标”，使屏幕阅读器用户能直接跳转至导航菜单或主要内容区，无需逐字收听全页。以下是六种常用标签：

页面或章节标题

<header> 标识页面或网站部分的介绍性区域，包含公司名称、Logo和导航链接。不同于 <h1>-<h6> 仅针对文本标题，<header> 描述整个区域，通常位于顶部，也可用于引入独立内容块。

示例：

<header>

<img src="logo.png" alt="Store Logo">

<nav>...</nav>

</header>

导航

<nav> 指示一组导航链接，帮助用户在网站内移动。屏幕阅读器可识别并允许用户直接跳转。通常位于 <header> 内，也可出现在 <footer> 或作为独立侧边栏。

示例：

<nav>

<a href="/womens">女装</a>

<a href="/mens">男装</a>

<a href="/sale">促销</a>

</nav>

主要内容

<main> 标识页面的核心内容（如产品详情、博客文章）。屏幕阅读器可利用此标签跳过页眉、导航等重复元素，直达关键信息。通常位于 <header> 之后并包裹相关内容。

示例：<main>

<h1>美利奴羊毛帽</h1>

<p>道德采购的100%美利奴……</p>

</main>

独立内容

<article> 帮助识别可独立存在和分发的内容，如博客文章、评论或详细产品描述。单页可包含多个 <article> 以分组独立内容项。

示例：

<article>

<h2>美利奴羊毛帽</h2>

<p>以其重量而言异常保暖……</p>

<a href="/products/merino-beanie">立即购买</a>

</article>

补充内容

<aside> 用于与主要内容相关但非焦点的内容，如侧边栏、促销提示、相关链接或产品技巧。

示例：

<aside>

<h3>您可能也喜欢</h3>

<a href="/products/wool-scarf">美利奴羊毛围巾</a>

<a href="/products/wool-gloves">美利奴羊毛手套</a>

</aside>

页面或区块页脚

<footer> 标识页面或部分的结论性或支持性信息，如法律声明、次要导航或社交媒体链接。也可用于文章内部，列出作者、出版日期或版权信息。

示例：

<footer>

© 2026 您的商店名称。保留所有权利。

<nav>

<a href="/privacy">隐私政策</a>

<a href="/returns">退货</a>

</nav>

</footer>