为什么使用<h1> 标记和 <p> 标记编写 HTML？ 为什么不干脆统一使用 <div> 和 <span> 标记？ 为什么要使用特定的 HTML 标记？

原因在于，<p> 和 <h1>它们分别表示“这是一个段落”及“这是一个初级标题”。 这就是 语义HTML，作者应当竭尽所能确保 HTML 标志适当组织整理内容。 所有 Web 开发人员均在一定程度上运用过语义 HTML。 本文将对语义 HTML 进行阐述，并解释为什么应当更加深入地对其进行了解。

语义 HTML 是什么？

简而言之，语义 HTML 是一种使用正确的元素或标记开展作业的 HTML。 以 <h1>元素为例。它有什么用途？ 语义学答案是“用作页面的顶级标题”。 使用 <h1> 元素仅仅是为了放大文本，这是非语义 HTML 的典型例子。 除标题标记（<h1> 到 <h6>）外，还有许多其他 HTML 元素，从常见的 <p>元素到极少遇到的<cite> 和 <dfn>元素应有尽有。 每个元素都具有特定的含义，每个元素都可以用来提供更好的 HTML 结构，以便通过 CSS 进行样式设计，及通过 JavaScript 开展操作。

语义 HTML 还通过定性内容而不是单纯凭借外观来标记内容。 例如，想想无处不在的博客存档面板。 它是一个链接至其他博客页面的链接列表，往往位于页面右侧。 当为存档指定 ID 或为 CSS 样式指定类时，您可以使用名称反映其在页面上的位置；例如 rightpanel 。 或者，您也可以利用名称表示它在内容中所扮演的角色；例如sidebar 或者 archive更好。

语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：

段落包含在 <p> 元素中。

顺序表包含在<ol>元素中。

从其他来源引用的大型文字块包含在<blockquote>元素中。

HTML 元素不能用作语义用途以外的其他目的。例如：

<h1>包含标题，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本缩进。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何样式信息。例如：

不使用 <font> 或 <center> 等格式标记。

类或 ID 中不引用颜色或位置。

所有这一切的目的在于促使代码使用者（无论是用户、浏览器还是屏幕阅读器）能够使用内容，并从机器的客观角度和用户的主观角度轻松地对其进行解析。

为什么我要专门介绍语义 HTML？

传统而言，有五种有利于语义 HTML 的主要论点。

代码更少

CSS 样式的语义 HTML 所需的代码往往比表格格式的 HTML 少。 但是，您不能编写完全无表格的 HTML，这不是语义 HTML 的真正含义。 您仍然可以缩小代码规模，但却无法使代码更加容易理解。

可访问性

可访问性是指协助残疾人士使用您的网站。 语义代码往往 具有更高可访问性。 当您将页面各个部分标记为片头、标题、段落和列表，使屏幕阅读器及其他辅助技术能够更加轻松地以残疾人士能够理解的方式解析及呈现内容。 不过，要注意对“往往”一词的强调。 语义 HTML 解决方案并不神奇，并不能使您的网站符合可访问性原则，它只是用于简化可访问网站构建过程。

搜索引擎优化

由于具有可访问性功能，语义 HTML 往往通过使您的网站更加便于软件解析网站内容来完善搜索引擎优化 (SEO) 特性。 搜索引擎会扫描 HTML 文件中包含的 HTML 文本。 它们不呈现 CSS，也不运行 JavaScript。 如果您的重要内容并非以 HTML 格式呈现，则搜索引擎可能无法进行查看，更不会相应地进行排列。 此外，通过删除页面中的 HTML 垃圾，仅留下描述内容的标记，搜索引擎将能够更加轻松地识别网站的真正主旨。 这项技术称作“白帽” SEO。 这样完全可以接受，没有任何搜索引擎会就此对您实施处罚，因为您已经在语义方面对页面进行了优化。 （相反，使用隐藏文本加强特定主题的相关性则被称作“黑帽”SEO。）

应当指出的是，任何人都无法保证语义 HTML 更加适于 SEO。 Web 开发人员将搜索引擎视作 首选语义 HTML，Google HTML5 输入将此操作作为建议操作。然而，搜索引擎均严格遵守自身算法，不得不允许以非语义 HTML 编写极度相关的内容。

重复利用

语义 HTML 充分利用以下优势：“新闻项目”始终是新闻项目，“存档”永远是存档，而无论它们在页面上的位置如何。 不过，rightbar 却并不总是位于右侧。 此外，如果您通过 RSS 源同时发布内容，并在其中纳入 HTML，则标记越少越好。 然而，绝大多数网站和博客并不直接从经过特别处理的 HTML 同时发布内容。 它们往往单独构建，并会对联合格式进行处理以确保其他用户理解内容。

开发人员解读

您可能已经注意到，迄今为止语义 HTML 参数中已经纳入主题。 所有这一切听起来都有很好的理由使用语义 HTML，但单独而言，没有一项特性真正让我心动。或许全部特性加起来足以让您心驰神往。 如果是这样，那真是太棒了。 但我承认，当下有一个很好的理由编写语义 HTML。 对于计算机开发人员（这是比较容易的部分）及其他开发人员而言，编码就是通信。 语义 HTML 比非语义 HTML 更加便于用户理解。r1c4 类div元素并不像所谓的 pullquote元素那样容易理解。 借助语义 HTML，您便可以帮助其他开发人员和 HTML 创作者理解代码的用途。

值得注意的是，该领域存在很大的主观性。 在这篇 关于 HTML 语义和前端架构的文章中，Nicholas Gallagher 证实了类和 IDs 不能是非语义形式，因为语义与含义息息相关，而您在类或 ID 中放置的任何元素均具有意义。 他的逻辑非常合理，但在我看来，这并不是看待问题的最佳方式。

语义不是二进制。 您无法实现完全语义化，也无法完全保持非语义化。 语义是一个连续特性。 Web 内容介于完全非语义化和完全语义化之间，因为这两个极端是无法达到的。 考虑到这一点，当您持续简化 Web 内容用户理解 Web 内容片段含义的同时，将可以跨越非语义化到语义化的鸿沟移动内容。

语义 HTML 提供了哪些全新元素？

HTML 语义其中一个颇具争议的部分在于 ID 和类的命名。 部分问题在于 HTML 规范定义的内容与实际页面上显示的内容之间的差距。 例如，拿网站导航来说。 由于二十世纪九十年代中期，导航菜单已经发展到无处不在的地步，但当时很长一段时间缺乏标记导航的单一标准化方法。 文章或帖子形式的页眉、页脚和内容也是一样。 由于缺乏相关的标准化方法，并且存在大量可能操作途径，因而在操作方式上存在相当大的分歧。

其中一些问题已通过 HTML5 得到缓解。 在 HTML5 规范的发展过程中，各大领先的 Web 内容企业共享了对一些常用 ID 和类名称的分析结果，并将其作为指导创建新的 HTML5 元素，这些元素对于标记许多常用 Web 内容片段非常有效。 结果生成一系列新的元素，其中包括：
<header>

<footer>

<nav>

<article>

还有许多其他元素，我们将在 W3C 的 HTML4 与 HTML5 的差异列表中进行详细阐释。

关键在于建立更加标准的内容标记方法。 标记方法越统一，越便于用户与设备使用内容。

语义专为您服务，而不是您为语义服务

我认为 HTML 语义存在的最大问题之一在于，人们往往将语义 HTML 的功能视为客观规则而非指导原则。 您应当（但并非必须）采用有效的语义编写 HTML。如果您要使用语义 HTML，那么用它来强化内容将比遵循一系列最佳实践（而不了解背后理论）的效果更好。

语义促使 HTML 更加易于理解。 这意味着您要注意，确保<h1> 标记、 <h2> 标记及<h3>标记妥善嵌套。 意味着您应当不遗余力地确保 <section>是包装某些内容的正确标记。 这并不是说您应当进入为期一周的电子邮件线程（包含四十封邮件），讨论该页面的<div> 标记是否应当具有 news 或 breakingID。 经过一番审慎思考，选择一个，然后继续您的生活。 只要将实际想法运用到内容内涵沟通中，就应该没有问题。 另一名开发人员将走过来，查看并理解内容，而后便可立即投入工作。假设您选择 news 。 此时，心存语义思想的开发人员将会感到奇怪，为什么在显然应当是 breaking 的情况下将其命名为 news。 您几乎无法在诸如此类的主观领域阻止此类质疑。 但是，它们再也不会混淆页眉、页脚或导航栏，这是一个更加重大的成就。

下一步阅读方向

语义方法意义重大，能够有效增强可访问性、SEO、可重用性及开发人员之间的交流。 它们连续存在，您的目标应当伴随这种连续性扩展至更加语义化的内容，但不能试图达到完美语义这个遥不可及的目标，否则无异于自杀。

下面是一些用于帮助您提升语义 HTML 作用的方法。

要了解有关一般性语义的详细信息，请参阅：

W3C HTML5 参考

万维网联盟 (W3C) 是一家 Web 标准机构。 因此，他们负责对所有元素进行定义。 他们在 HTML 元素的使用方面具有独到的见解（或者说绝对看法，具体取决于您咨询的人员）。 HTML 中的每个元素均包含细节文档，其中包括元素的语义用法。

whichElement.com

WhichElement.com 是一家网站，我最初就是以此为起点讨论适当的内容语义。 例如，如果您寻求以语义的形式标记日历，whichElement.com 将为您带来福音。

要了解有关 HTML5 语义的详细信息，请参阅：

HMTL5 Doctor

HTML5 Doctor 是一种帮助开发人员利用 HTML5 的资源，因为它始终处于一种参与状态。 该网站提供了大量有关 HTML5 元素语义用法的不错信息。

Adobe 开发人员连接

Stephanie (Sullivan) Rewis 编写了一个很棒的系列文章 了解 HTML5 语义，从而帮助您了解如何使用新型语义 HTML 元素。