【发布时间】：2010-12-16 07:29:48
【问题描述】：
在性能或其他方面遵循语义 HTML 是否有一些明显的结果？
谢谢
【问题讨论】：
-
流行语合规性。 “语义 HTML”只是有人试图将最佳实践装扮成对营销人员等有好处的东西。
标签： html performance semantics
【发布时间】：2010-12-16 07:29:48
【问题描述】：
与性能无关
语义标记不是关于性能，而是关于意义。
让我们想象两个平行的宇宙。
-
在 Dumb HTML World 中，只有一个标签：
<thing>。您将如何指定应在何处应用样式？浏览器如何知道如何呈现页面？盲人屏幕阅读器如何区分标题和文本以及脚注和菜单项？你必须添加各种尴尬的属性。 - 同时，在详细的 HTML 世界中，有大量的名称。你有
<header>和<footer>和<article>和<caption>和<menu>和<paragraph>和<footnote>等等。现在用户代理（浏览器或屏幕阅读器）可以做出合理的假设如何设计这些样式，或使它们具有交互性，或大声朗读它们。例如，浏览器将使<button>s 看起来可点击，并允许使用tab 键在它们之间移动，而如果您使用<div class="button">，它不会知道这样做。屏幕阅读器可能比<aside>s 更优先阅读<p>s。
如果您想覆盖用户代理对元素的默认处理方式，或者如果用户代理设置为这样做，则更容易定位特定类型的内容。例如：
- “我的网站是关于珠宝的，所以我希望列表中的项目符号显示为钻石。”
- “我的用户是盲人，所以我应该宣布有图像，提供阅读相关标题，而不是下载实际的图像数据。”
- “我的用户不关心脚注，想忽略它们。”
现实世界介于这两种情况之间。
语义 HTML 的某些方面有点理想化，但原则是合理的。例如，使用<strong> 代替<b> 表示“此文本很重要”，而不一定“此文本应为粗体”。也许您的用户希望重要的文本以橙色突出显示。这取决于他们。
关键是，HTML 是标记，它是关于有用地标记事物。语义 HTML 是所有 HTML 应有的样子：有用、有意义的标签。
让您的网站快速加载是完全不同的问题。
（另请参阅：我的回答 here。）
附录 - 向语义 HTML 发展
我认为随着时间的推移 HTML 变得更加语义化是很自然的。
回到 Dumb HTML 世界，他们可能会以疯狂的标记结束，例如 <thing type='list'> 和 <thing render='image'>。网络程序员会抱怨：“嘿，我们一直都在这样做。为什么不直接使用 <image> 标签？它会让我们的生活更轻松。”
在现实世界中，人们不断地编写<div id='nav'> 和<div class='article'> 之类的代码。所以创建新元素是有意义的，比如<nav> 和<article> 和<section>。这是draft HTML5 specs would do。
【讨论】：
-
此外，语义 HTML 是迈向语义网络的一步——允许无智能的计算机处理意义。与人相比，语义 HTML 更适合计算机使用。
-
还补充说，这现在是可访问性的 SEO 排名工厂，这已成为一个日益严重的问题，并且正在受到相当重视。以下是关于 SEO 价值的简短读物：icrossing.com/uk/ideas/html5s-new-semantic-tags-whats-seo-value
有明显的好处。例如，看一下这段代码：<article>Bla bla bla</article>
现在看看 HTML4 的“等价物”：<div class="article">Bla bla bla</div>
对于一台机器来说，<div> 或<article> 之间没有特别的区别。没有特殊含义的两个不同的字符串。但是如果你提供不同的标签，你可以为每个标签赋予不同的含义，实际上就是这样。
从搜索引擎机器人的角度来看，<div> 标签是用作容器的东西，没有更多特殊含义。但是，如果我使用<article>，搜索引擎机器人可以理解，里面会是一段文字，对人们说起来很有趣。
您可以使用<aside> 之类的另一个标签更清楚地看到它，您是说其中的内容与文档的其余部分没有任何关系。例如，您可以在其中放置广告（广告可以与内容相关，但这种使用是偶然的:)）
在性能方面，我不知道是否有很大差异，或者根本没有差异，但这不是想要达到的目标。
【讨论】：
如果您编写语义 HTML，则页面的每个元素都包含它自己的含义。它适用于搜索页面、屏幕阅读器、桌面和移动浏览器。也为你。例如，您只能为标签编写样式。检查此示例：awsm.css。
【讨论】：
许多人认为性能是衡量某事执行速度的指标。在Linus Torvald's presentation on git（在 youtube 上）中，他认为性能不仅仅如此。性能也与实用性有关。我认为我的车是性能车，因为它使用的燃料更少。难以使用的网站可能下载速度很快，但执行任务却很差。
由于 CSS 和 js 文件被缓存，Web 上的语义提高了效率的论点并不是一个可靠的论点。可以构建一个占用空间非常小的网站，完全没有语义。但大多数时候，如果你深思熟虑并说出你的意思（语义），那么你可能会提高整体性能，因为无论如何你都是高效的！大多数时候，说出你的意思是最好的答案。
很多人认为您永远不应该偏离语义网。这个特定的纪律/规则永远不应该被打破，这样做会招致严厉的批评或嘲笑。考虑到您的应用程序可能存在的广泛情况和用途，这几乎不切实际。有时，灵活更明智。
最后，没有绝对的语义。在某些情况下，我会认为表格单元格是一列。强烈和大胆的术语有何不同？你真的可以争辩说应该总是使用“强”吗？ “粗体”在大多数情况下具有同样明确的含义。当然，“强调”和“斜体”是不同的。 “斜体”是“强调”的实现。如果你的语义化到了极致，你最终可能会花费大量时间和精力来执行规则，而花费更少的时间来完成任务。另外，你最终会成为一个脾气暴躁的人！
希望有帮助！
【讨论】：
虽然编写语义正确的标记有利于代码的组织和管理，并使样式和代码的分离更容易，但我认为使用它的背后有更强烈的动机。
语义正确的标记增加了机器（搜索引擎/机器人/屏幕抓取工具）的可能性 或其他类型的脚本）能够解析您的内容以评估其用途。
微格式是语义标记的逻辑扩展；使用微格式标准可以允许 进行更准确的评估。
【讨论】：
首先，残障人士无法访问非语义标记。阅读Nicholas C. Zakas's recent article关于这个话题；我认为这是对该主题的一个很好的介绍。
请记住，Google 等搜索引擎查看您的网站的方式与查看残疾人使用的辅助技术的方式大致相同。 Googlebot 既不知道也不关心某些东西有圆角和漂亮的蓝色背景，但如果它知道它是一个<h1> 而不是任何旧的<div>，它就会产生很大的不同。
【讨论】：
清晰的代码更易于维护
除了对用户有利之外，语义 HTML 对人类更有意义：您和您的同事。
如果你在编写 JavaScript 代码，你会编写这样的函数吗？
dothething(q);
CmtFn(x);
...还是这样？
loadUserData(username);
parseComments(language);
如果你说#2 更好，那么，同样的原则也适用于 HTML。清楚地标记事物，正确缩进代码等使您的代码更易于维护。
【讨论】：
语义 HTML 和性能
语义 HTML 不仅将正确的标签用于正确的目的，这明显改善了 SEO，而且还分离了标记 (HTML)、样式 (CSS) 和脚本 (JS)。分离不仅会改善维护，而且肯定会提高下载性能，因为您通常会缓存 CSS/JS 文件。如果您使用所有原始 CSS/JS 代码和/或使用 style 而不是 id 或 class 使 HTML 文件混乱，这只会使 HTML 页面不必要地变大，并且需要更长的时间才能将其拖入.
【讨论】：
除了所有这些答案之外，语义 HTML 还可以提高您的搜索排名（请参阅 SEO）。 Google 和其他搜索引擎会查找您网页的某些语义片段，并使用它们来进行大量排名。
【讨论】：
此外，使用语义 HTML 将有利于屏幕阅读器等辅助技术的用户，这可能会改变阅读声音的音调或性别以表示重要信息或表示信息或重点。例如，如果您想要真正强调的信息被标记为 em> 以进行说明，而不是简单地加粗（您仍然可以在 CSS 中将 <em> 标签设置为粗体），屏幕阅读器将改变该特定词的变形以强调它。
除了使用适当的数据分离和格式使您的代码在屏幕上更高效和更易读之外，正确使用标记不仅可以在视觉上表明信息属于某种类型，而且还会再次使辅助技术用户受益。例如，如果您有一个简单标记为段落的信息列表，对于看不到该页面的人，则无法表明该信息是相关的，而如果您的信息被标记为无序列表<ul>或有序列表<ol>，从视觉上看，人们更容易阅读该信息，因为它明显缩进或有项目符号。例如对于屏幕阅读器用户，当涉及到一个列表时，屏幕阅读器会宣布即将到来的内容是一个列表。
这就像在 Stack Overflow 上使用代码块样式一样 - 如果您使用“代码”格式突出显示帖子中的任何代码，它会让每个人都更清楚地阅读，并表明突出显示的文本是实际代码。 HTML 也一样。
【讨论】：
语义代码将 html 元素用于特定目的。结构良好的 HTML 将对广泛的用户和用户代理（没有样式表的浏览器、文本浏览器、PDA、搜索引擎等）具有语义意义
好处
前面提到的两点是使用语义代码的基本好处。如果我们使用全球已知的标签，其他人无需任何额外的努力就能理解。任何使用全球知名标签的软件程序都无法理解我们的页面。
这方面的一个工作示例是搜索引擎根据关键字的重要性来衡量关键字的重要性。例如，包含在其中一个标题（h1 及其层次结构）中的文章标题将获得比跨度更高的重要性和可见性。语义 HTML 可实现有效的搜索引擎优化 (SEO)。
W3C 的语义数据提取器很好地展示了使用语义 HTML 和软件自动化的可能性。
从语义标记中排除表示信息的副作用是现在数据及其表示可以在实现中解耦。这意味着您可以在不接触数据的情况下更改演示文稿，或者将演示文稿应用于多种类型的数据。这正是 CSS 和 XHTML 等技术共同实现的目标。当然，语义 HTML 对于这种解耦不是必需的，但通过语义提供了强制排除表现信息。
http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic-code.html
【讨论】：
您可能会发现，将数据与数据表示分离将有助于您作为程序员的表现。我的意思是最终你会想要以不同的方式显示你的数据。当那一天到来时，您确实不希望将数据与格式混合。你希望你的数据是纯净的，所以你所要做的就是调整格式，而不是数据。
在 HTML 和 CSS 方面，您只需要调整 CSS，而不必理会 HTML。
至于渲染 HTML/CSS 的性能，数据和格式的适当分离可以使您的 HTML 更小。
【讨论】：
在用于显示 HTML 的不同设备上获得更可预测的结果。
您可以将精力集中在每个（最常用于您的应用）设备中的不同怪癖/错误上。
【讨论】：
让您和其他开发人员更容易了解发生了什么，当 CSS 等不可用时阅读效果更好。 “可以”在使用屏幕阅读器时工作得更好，从而提高您的可访问性。更重要的是，我认为它让您养成编写更好标记的习惯，这更有可能验证而无需进行太多修复。简单地说它的好习惯，但我想说不要太挂在100%的正确上，脑力最好花在其他问题上，而不是争论天气，对于给定的问题等，dl比ul好。
【讨论】：
-
同意皮特并直接回答问题，不，没有性能优势。