使用语义HTML5.docVIP

使用语义 HTML 为什么使用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 参数中已经