为什么要打扰正确地和语义地标记？

_{请注意，我（尝试）尽可能地在语义上进行标记，因为我喜欢它们的外观和感觉，但不是因为我意识到任何其他惊人的优点。我的问题的重点是能够教育他人}

好吧，我看过很多文章和教程，这些文章和教程经常说“让我们以最可能的语义方式进行标记”。

但是我想到了一个奇怪的想法，为什么？

为什么一个人需要（或想要）去打扰那些传达正确语义的特定元素？具体地讲，我指的是新的HTML5元素，如<time>，<output>，或<address>。特别是，如果页面“有效”（在所有浏览器中都能很好地呈现）。

为什么我要使用诸如<time>或元素<address>，而根本没有任何元素（或在最坏的情况下，泛型<span>）表现得那么好呢？

我之所以这样问，是因为我看到许多（非常受欢迎的）网站（包括此网站）没有遵循这些所谓的最佳实践。

免费功能

正确使用<label>s意味着您可以单击标签以输入文本字段。根据官方规范，许多浏览器会将逻辑默认功能添加到许多标签中，这意味着与完全由<div>s和<span>s组成的网站相比，您可以使用更少的JavaScript插件和编写更少的代码。

辅助功能

与免费功能有关，语义对屏幕阅读器软件有很多意义。输入字段前面的文本不会以与<label>遗嘱完全相同的方式读取。屏幕阅读器将忽略您的大多数CSS，因此很大程度上取决于HTML的结构。

逻辑CSS

div #header当您可以<header>直接使用和样式时为什么要使用a ？语义标签使标记变得更容易，并使样式更易于移植。如果您具有特定的删除线样式，并且始终使用<del>元素，则该样式更易于移植。<del>对每个人都意味着同一件事，但是每个人对.deletedText班级的称呼都不同。

它还有助于在大型项目中将所有人保持在同一页面上。没有人喜欢学习别人深奥的类命名约定。

搜索引擎优化

像Google这样的搜索引擎已经越来越多地使用语义HTML和元数据。Google的Rich Snippets还使用特殊的元数据来传达语义内容。

为什么不是那么普遍

它需要工作，并且人们习惯于通过网站的外观和工作来判断网站。通常，对于语义没有任何考虑，因为为应用程序编写业务案例的人不了解语义或语义为何如此重要。

非技术人员很难理解或评估HTML语义。

如果网站看起来不错并且似乎可以正常工作，为什么要烦恼呢？可能很多人甚至不知道有是什么了吧。类似于可访问性，在您团队中的某人真正理解这一点之前，这往往会被忽略。

如果你想语义的HTML是你的项目优先级，您需要出示的情况下它。在屏幕阅读器中向您的团队/老板展示您的网站如何工作也是一个有用的工具。

答案就是简单地传达信息并构造您的文档。

使用span和div时，您的文档没有结构。没有列表，没有段落，没有表，没有超链接。没有。选择HTML作为标记语言，然后忽略它提供的用于表达和组织内容的词汇，确实没有意义。顺便说一句，结构是这里的重要词。HTML是用于不显示的结构。这就是CSS的目的。

如果您在语义上标记代码，则将使人类读者和机器都有机会了解元素内部的数据。如果您一直使用span和div元素，那么您将没有这些额外的信息，并且仅从值中就无法推断出它们。

同样，如果我要抓取网站并仅提取标题以为其创建目录，我的蜘蛛将需要知道标题是什么。没有适当的要素，它就无法做到这一点。

最后但并非最不重要的一点是，如果仅使用div和spans，将很难用CSS设置样式。CSS选择器可以处理文档的结构，如果该结构大部分是模棱两可的，则很难应用CSS规则。您如何确定是否div div div真正提及table tr td或body ul li？然后，您必须添加类和ID，但随后您需要重新发明轮子。

另请参阅W3C的建议

使用适当的语义元素将确保该结构可用于用户代理。这涉及明确指出不同部门在理解内容含义方面的作用。内容的性质，如段落，标题，强调的文本，表格等都可以用这种方式表示。在某些情况下，还应指出内容单位之间的关系，例如标题和子标题之间的关系，或者表的单元格之间的关系。然后，用户代理可以使该结构对用户可感知，例如对不同类型的结构使用不同的视觉呈现，或者在听觉呈现中使用不同的声音或音调。

除了这里已经很好的答案之外，我还没有提到的一件事是前向兼容性。随着规范的发展，有可能为某些语义元素指定其他功能。如果您的代码在语义上是正确的，则无需任何维护或只需很少的维护就可以利用此功能。

您没有看到很多站点完全遵循语义的原因之一是，很多时候没有商业案例。如果它促进了销售（或类似的类别，例如曝光度），那么编写语义HTML是值得他们花钱的。

对于标记的语义使用，我可以做的最好的情况是当您使用工具或将HTML与工具一起使用时。例如，使用语义标记使您可以直接对元素进行样式设置，而不必担心在其他样式中添加或删除样式。此外，如果您不得不使用刮板或类似工具来解析HTML，那么您肯定会喜欢格式正确的语义HTML，因为编写XPath和DOM查询可以更轻松地查找所需内容。

我应该注意，类不是语义标记的直接替代。我有一个可重用的类[error, information, warning]，这些类传达了不同的含义，因此根据它们所附加的标签显示样式。

因为它对于爬网程序和Web服务（AKA计算机与计算机进行通信）很有用或需要。如果您写：

<span class="time">Sep 16 at 2:17</span>

...网络搜寻器将不必要将其理解为日期和时间。否则将其定位为日期信息将更加困难。

如果您使用：

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

...对于任何爬虫来说，查找和分析这些东西将更加容易。

当我说爬虫时，我并不是说搜索引擎一定是:)

我经营一家小型网络咨询公司，我们目前的方法是不使用新的HTML5标签，因为我们试图平衡许多因素。在这种情况下，平衡是在可用性，可用性和SEO之间：

• SEO：这里的其他答案是什么-这可能对SEO有所帮助，尽管根据我的经验，SEO策略越明显，则帮助的可能性就越小。

• 可用性＃1：合理地假设HTML5标签具有某种可用性优势。对于盲人用户，可以肯定的是，他们可以访问的浏览器提供的任何后备功能都将比我将提供的任何功能都要好。对于您的典型用户而言，它更具争议性。也许使用浏览器提供的无皮肤媒体播放器比不熟悉的窗口小部件更容易使用。也许您的浏览器的默认设置是废话（例如Chrome Windows的默认MP3播放器只是定期停止工作的方式）。

• 可用性2：旧版IE。旧版IE需要一堆使页面膨胀的HTML5填充程序，才能使这些标签中的任何一个起作用。您必须在head标记中添加一些脚本，该脚本在您使用的所有HTML5标记中循环调用CreateElement（）。如果您不打算为正在使用的标签整理每个页面，那就意味着每个HTML5标签。这需要在每个页面上内联运行，这意味着不进行缓存。坏消息是：旧的IE是执行Javascript的最慢的程序，因此它在加载时会产生一些混乱。然后，您必须使用一堆旧的仅限IE的Javascript和CSS（通常是Flash），以使所有新的不受支持的元素都能正确呈现。在决定加载旧的IE代码之前，您可以先进行功能检测，但随后 让旧的IE用户等待，直到加载了足够的脚本以执行该功能检测，甚至开始请求使这些标记起作用的所有内容。您可以通过浏览器检测到旧的IE内容，然后仅将旧的IE内容发送给使用这些浏览器的用户，但是根据您的平台，这可能会使缓存变得困难或无法实现。向不同的用户提供不同的代码也意味着测试更加复杂-曾经有异步错误吗？只出现在特定浏览器上的怎么样？而且仅在生产中？注册我。因此，您可能只会将膨胀信息发送给所有人。向不同的用户提供不同的代码也意味着测试更加复杂-曾经有异步错误吗？只出现在特定浏览器上的怎么样？而且仅在生产中？注册我。因此，您可能只会将膨胀信息发送给所有人。向不同的用户提供不同的代码也意味着测试更加复杂-曾经有异步错误吗？只出现在特定浏览器上的怎么样？而且仅在生产中？注册我。因此，您可能只会将膨胀信息发送给所有人。

在IE8死亡之前，这些较新的HTML5标签的价值还不足以解决它们带来的性能问题。我们还没有和观众见面，后者甚至快要死了*，但是总有一天。

*我们最近的指标显示，IE8访问者最少的网站的IE8率为6％，而IE8访问者最多的网站的IE8为24％。远远没有死。

简短的答案是“实践中没有充分的理由。”几乎所有支持“语义”标记的争论都是对可能发生或应该发生的事情的想法，而不是有形的想法。例如，搜索引擎常常被称为，但他们关心的至少约没有公开证据time或output或address。

间接地，我们可以推断出他们在可预见的将来不会在意​​。一些领先的搜索引擎的schema.org网站显然赞成基于完全不同的东西（即微数据（itemscope和相关属性））的“语义标记”的特定方法。他们实际上主要是针对大型商业或社区站点。

使用span或div比HTML5新颖性更好地工作，因为HTML5新颖性甚至出于样式目的也无法被IE的旧版本识别。因此，您需要一些技巧才能使它们像容器元素一样“起作用”。

但是，有些 “语义”元素由浏览器，辅助软件或搜索引擎赋予了它们真正的含义。使用h1主标题一向很好的做法对于这样的理由。使用label表单字段标签对可用性和可访问真正的影响。等等; 参见《实用HTML指南：原则》。

HTML不仅是一种UI语言，它也是一种数据结构语言。它旨在帮助异构计算机采用一种通用的方式来识别服务器中即将到来的信息类型。因此，有许多不同的标签。HTML页面应被视为数据结构。