什么是语义化 HTML？以及如何正确使用它
了解什么是语义化 HTML，以及如何用它来提升网站的可用性和搜索可见性。
什么是语义化 HTML？
语义化 HTML 是使用能清晰界定其所包裹内容用途的 HTML 标签，让你的网站代码对开发者和搜索引擎都更易理解。
这些 HTML 标签也被称为语义化元素。它们对内容在网页中的角色提供了有意义的描述。
例如，<header> 就是一个语义化 HTML 标签。它包裹页面顶部的页眉部分（介绍性内容）。
你可以在下面看到它以及其他一些常见的语义化HTML 标签：
语义化 HTML 与非语义化 HTML
语义化 HTML 标签描述内容的含义，而非语义化 HTML 标签则是通用的，主要用于样式和布局目的。
非语义化 HTML 标签不传达关于内容本身的任何具体含义。
下面是代码块中非语义化 HTML 与语义化 HTML 的可视化对比：
对比这两个代码块，可以很容易看出，只使用 <div> 和 <span> 标签的非语义化代码没有描述页面的内容或区块。
而语义化 HTML 代码提供了清晰的描述，即使不是程序员也能看懂。
例如，语义化 HTML 代码会告诉你“My Website”是一个页面页眉。
为什么语义化 HTML 标签很重要？
语义化 HTML 标签很重要，因为它们提升了页面对人类和搜索引擎的可访问性与可理解性。
以下是使用语义化 HTML 的主要好处：
- 更好的用户体验和可访问性：屏幕阅读器和其他工具能更有效、更准确地浏览语义化布局，并向用户描述你的内容
- 更好的 SEO 表现：HTML 中的语义化标签能帮助 Googlebot 等网络爬虫从页面 HTML 中准确识别出内容的相关部分。这可以带来更好的索引，并可能让相关关键词获得更高排名。
- 更有可能出现在富结果中：语义化元素能增强 schema 标记——你添加到页面以帮助 Google 显示富结果的代码。富结果包含评分、价格或活动日期等附加信息。
- 面向未来的代码：语义化 HTML 遵循网络标准，让你的代码与未来技术更兼容
- 清晰的沟通：协作的开发人员、设计人员和 SEO 人员可以轻松理解每个部分的用途，从而使网站的维护和更新更容易。
延伸阅读：提升 SEO：改善排名的 11 个步骤
常见的语义化 HTML 元素
有许多语义化 HTML 元素，但我们按类别来看最常用的语义化标签：
用于结构的语义化 HTML 标签
这些 HTML 语义化元素定义了页面的结构和布局：
- <header>：表示网页或某个区块的介绍性或导航性内容。它通常包含标题、导航菜单、搜索栏和徽标等元素。
- <nav>：定义一组导航链接。用它来做全站导航（例如指向“首页”“关于我们”或“服务”的链接），或把链接归纳到页面内的特定区块中（如“功能”“定价”或“目录”）。
- <main>：表示网页的主要内容或主要区块。每个页面只能使用一次这个标签。
- <section>：把共享同一主题或用途的相关内容聚在一起。例如，你可以把一个落地页划分成“功能”“优势”或“使用场景”等区块。
- <article>：定义可以单独复用或分发的独立内容，例如博客文章、产品测评和新闻文章。
- <aside>：表示为主内容提供支撑或额外背景的次要或补充内容。例如侧边栏、标注框或一组相关链接。
- <footer>：表示页面或区块的页脚，通常包含导航链接、联系信息和版权信息
下面是一个用上述语义化标签标记的示例 HTML 代码块：
这是最终页面可能呈现的样子（标注出的语义化标签显示了它们影响的区域）。
用于文本的语义化 HTML 标签
这些 HTML 语义化标签传达其所应用文本的含义和格式：
- <h1> 到 <h6>（标题）：表示网页上信息的层级。例如，<h1> 标记顶层标题，而 <h2> 到 <h6> 表示副标题。
- <p>（段落）：表示一段文本——通常是段落。避免用 <p> 标记单个词或短语。
- <a>（锚点）：标记指向其他页面或同一文档内其他区块的超链接。使用有描述性、相关的锚文本来告知用户和搜索引擎该链接指向何处。
- <ol>（有序列表）：表示有序（编号）列表。用于需要按特定顺序呈现的项目（例如食谱中的步骤）。
- <ul>（无序列表）：定义无序（项目符号）列表。用于不需要顺序的内容（例如功能清单）。
- <q> / <blockquote>：表示带引号的文本。用 <q> 标签表示较短的文内引用，用 <blockquote> 表示较长的多行引用。
- <em>（强调）：标记文本以表示重要性，通常以斜体显示。谨慎使用以突出i重要信息——而不是用于样式。
- <strong>（强烈强调）：表示强烈重要的文本，通常以粗体显示。用它来突出关键信息。
看看下面这个用上述语义化标签标记文本的示例 HTML 代码块：
这是最终页面可能呈现的样子（标注出的语义化标签显示了它们影响的区域）。
其他语义化 HTML 标签
这些标签在通用结构或文本之外，服务于特殊用途：
- <figure> 和 <figcaption>：为组合在一起的媒体内容（例如图片、图表或示意图）提供背景说明。把 <figure> 标签与 <figcaption> 元素搭配使用，以加入说明文字或描述。
- <mark>：高亮与当前上下文相关的文本，常用于强调文本中的搜索结果或关键点。默认情况下，浏览器会以黄色背景渲染 <mark>。
- <pre>：表示预格式化文本，非常适合展示代码片段或其他格式至关重要的文本。例如，保留空白、换行等。
语义化 HTML 最佳实践
遵循以下最佳实践可以有效实施语义化 HTML 元素：
为正确的用途选择正确的元素
始终选择与内容用途相符的语义化元素。
例如，用 <header> 表示介绍性内容，用 <article> 表示独立内容，用 <nav> 表示导航链接。这能让你的 HTML 易读且对 SEO 友好。
不要用语义化 HTML 标签来做样式
不要仅仅为了视觉效果而使用语义化 HTML 标签。
例如，不要仅仅为了让文字变大而使用 <h1> 到 <h6> 标签。要把它们用于内容的主标题和副标题。
同样，不要仅仅为了给无需强调的文本加粗或倾斜，就使用 <strong> 或 <em> 元素。
简而言之，只在为了传达含义和上下文时才选择语义化标签。至于样式和外观，请使用 CSS。
正确嵌套标签
确保按正确的顺序嵌套语义化标签，以维持合理的结构。
例如，把标题放在 <section> 或 <article> 标签内部，并确保把 <footer> 放在其父级上下文之中。
另外，每个页面只使用一次 <main> 元素。并确保不要把它嵌套在 <header>、<footer>、<article> 或 <aside> 等其他语义化标签内。
发现并修复 HTML 标签问题
实施得当的语义化 HTML 能提升网站的 SEO 表现和用户体验。
然而，错误地使用它们会让搜索引擎困惑，并导致你内容排名出现问题。
你可以通过对网站进行定期的 SEO 审计来避免其中一些问题。
用我们免费的网站 SEO 检查器快速抽查某个 URL 上的标题、标题层级和 alt 文本等 HTML 标签信号。
若要对整个网站进行持续监控，Semrush Site Audit 可以大规模标记 HTML 问题。
打开该工具，输入你的域名，然后点击“开始审计”。
遵循配置说明并点击“开始站点审计”。
接下来，进入“问题”选项卡。
并在搜索框中输入“tag”。
如果你的网站有任何 HTML 标签问题，你会看到一份列表。
其中大多数与并非语义化元素的 HTML 标签有关。但你也可以看看你的 <h1> 标签是否存在任何问题。
点击“为什么以及如何修复”可进一步了解这些问题。并按照建议修复它们。