使用语义HTML有什么好处?

时间:2009-11-13 14:13:55

标签: html performance semantics

在语义HTML方面,在性能或其他方面是否有一些明显的结果?

由于

14 个答案:

答案 0 :(得分:33)

与绩效无关

语义标记不是关于性能,而是关于意义。

让我们想象两个平行的宇宙。

  • 在Dumb HTML World 中,只有一个标记:<thing>。您如何指定应该应用哪种样式?浏览器如何知道如何呈现页面?屏幕阅读器如何区分标题和文本以及脚注和菜单项?你必须添加各种尴尬的属性。
  • 与此同时,在详细的HTML世界中 ,有很多名字。您有<header><footer>以及<article><caption>以及<menu><paragraph>以及<footnote>等。现在您可以智能地应用样式,任何读取内容的程序 - 浏览器,屏幕阅读器等等 - 都可以有适合内容的规则。例如:
    • “我的用户是盲人,所以我应该宣布有图片,提供阅读相关字幕,而不打扰下载实际图像数据。”
    • “我的用户有一个小屏幕和良好的视力,并要求我制作一些小的段落,以便它们适合页面。”
    • “我的用户不关心脚注,也不想看到它们。”

现实世界介于这两种情景之间。

语义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

答案 1 :(得分:6)

语义代码将html元素用于其特定目的。结构良好的HTML对于广泛的用户和用户代理(没有样式表,文本浏览器,PDA,搜索引擎等的浏览器)具有语义含义。

<强>优势

前面提到的两点是使用语义代码的基本好处。如果我们使用全球已知的标签,其他人无需任何额外的努任何使用全局已知标签的软件程序都无法理解我们的页面。

这方面的一个工作示例是搜索引擎根据它们的重要性来衡量关键字的重要性。例如,包含在其中一个标题(h1及其层次结构)中的文章标题将具有更高的重要性,因此可见性高于跨度。语义HTML支持有效的搜索引擎优化(SEO)。

W3C的语义数据提取器很好地展示了使用语义HTML和软件自动化的可能性。

从语义标记中排除表示信息的副作用是现在数据及其表示可以在实现中解耦。这意味着您可以在不触及数据的情况下更改演示文稿,或将演示文稿应用于多种类型的数据。这正是CSS和XHTML等技术共同实现的目标。当然,语义HTML对于这种解耦不是必需的,但通过语义规定它强制排除表示信息。

http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic-code.html

答案 2 :(得分:6)

  

语义HTML和性能

语义HTML不仅使用正确的标签用于正确的目的,这显然改善了SEO,而且还标记了标记(HTML),样式(CSS)和脚本(JS)。分离不仅可以改善维护,还可以提高下载性能,因为您通常会缓存CSS / JS文件。如果您使用所有原始CSS / JS代码混乱HTML文件和/或使用style而不是idclass,那么它只会使HTML页面变得更大而且需要更大把它拖进来的时间更长。

答案 3 :(得分:5)

明确代码更易于维护

除了对用户有益之外,语义HTML对人类更有意义:您和您的同事。

如果您正在编写JavaScript,您会编写这样的函数吗?

dothething(q);
CmtFn(x);

......还是喜欢这个?

loadUserData(username);
parseComments(language);

如果你说#2更好,那么同样的原则适用于HTML 。清楚地标记内容,正确缩进代码等使代码更易于维护。

答案 4 :(得分:2)

许多人认为表现是衡量某事物执行速度的标准。在Linus Torvald's presentation on git(在youtube上),他认为表现不止于此。表现也与实用性有关。我认为我的车是性能车,因为它使用的燃料更少。一个难以使用的网站可能会快速下载,但执行任务很差。

由于CSS和js文件被缓存,因此Web上的语义提高效率的论点并不是一个可靠的论点。构建一个占地面积非常小的网站是完全可能的。但大多数时候,如果你很周到并且你说出你的意思(语义),那么你可能会提高一般表现,因为你无论如何都很有效率!在大多数情况下说出你的意思是最好的答案。

很多人认为你永远不应该偏离语义网。这个特殊的纪律/规则永远不应该被打破,这样做会引起严厉的批评或嘲笑。考虑到您的应用程序可能存在的各种情况和用途,这很难实用。有时,灵活变得更聪明。

最后,没有绝对的语义。在某些情况下,我会认为表格单元格是一个列。强硬和大胆的术语有何不同?你真的可以说应该总是使用“强”吗? “大胆”在大多数时候都具有同样明确的含义。当然“强调”和“斜体”是不同的。 “斜体”是“强调”的实施。如果你的语义极端,你最终可能会花费大量的时间和精力来执行规则,而花费更少的时间完成任务。另外,你最终会成为一个暴躁的人!

希望有所帮助!

答案 5 :(得分:1)

您和其他开发人员更容易了解最新情况,当CSS等不可用时,读取效果会更好。使用屏幕阅读器时“可以”更好地工作,从而提高您的可访问性。更重要的是,我认为它让你习惯于编写更好的标记,更有可能验证而无需做太多修复。简单地说它的良好实践,但我会说不要过于依赖100%正确,脑力比其他问题花费更多,而不是争论天气,对于给定的问题,dl优于ul。

答案 6 :(得分:1)

此外,使用语义HTML将有益于诸如屏幕阅读器之类的辅助技术的用户,这可能改变阅读语音的音高或性别以表示重要信息或表示信息或重点。例如,如果您想要真正强调的信息被标记为&lt; em>以进行限制,而不是简单地加粗(您仍然可以将<em>标记设置为在CSS中加粗),屏幕阅读器将改变该特定单词的变形以强调它。

除了使用正确的数据分离和格式化使您的代码在屏幕上更高效和更具可读性之外,正确使用标记不仅可以直观地表示信息属于某种类型,而且将再次使辅助技术用户受益。例如,如果您有一个简单标记为段落的信息列表,那么无法看到该页面的人无法表示该信息是相关的,而如果您的信息被标记为是和无序列表{{1或者有序列表<ul>,在视觉上,某人更容易阅读该信息,因为它显然缩进或有子弹点。例如,对于屏幕阅读器用户,当涉及列表时,屏幕阅读器将宣布即将发布的内容是列表。

这就像在Stack Overflow上使用代码块样式一样 - 如果您使用'代码'格式来突出显示帖子中的任何代码,那么每个人都可以更清楚地阅读,并显示突出显示的文本是非实际代码。 HTML也一样。

答案 7 :(得分:1)

一开始,残疾人无法访问非语义标记。阅读Nicholas C. Zakas's recent article关于此主题;我认为这是对这个主题的一个很好的介绍。

请记住,像谷歌这样的搜索引擎会以与残疾人使用的辅助技术大致相同的方式看待您的网站。 Googlebot既不知道也不关心某些东西有圆角和漂亮的蓝色背景,但如果它知道它是<h1>而不是任何旧的<div>,它会产生很大的不同。

答案 8 :(得分:1)

虽然编写语义正确的标记对于代码的组织和管理很有帮助,并且使样式和代码的分离更容易,但我认为它的使用背后有更强的动机。

  • 语义正确的标记增加了机器(搜索引擎/机器人/屏幕刮板)的可能性 或其他类型的脚本)能够解析您的内容以评估其目的。

  • 微格式是语义标记的逻辑扩展;使用微格式标准可以允许 更准确的评估。

答案 9 :(得分:0)

用于在HTML中显示HTML的不同设备具有更可预测的结果。

您的精力可以集中在每个(最常用于yor应用程序)设备的不同怪癖/错误上。

答案 10 :(得分:0)

您可能会发现,将数据与数据表示分离将有助于您作为程序员的性能。我的意思是,最终你会想要以不同的方式显示你的数据。当那一天到来时,希望将您的数据与格式混合在一起。您希望数据是纯粹的,因此您所做的就是调整格式,而不是数据。

就HTML和CSS而言,您只需要调整CSS,并保留HTML。

至于提升HTML / CSS的性能,正确分离数据和格式可以缩小HTML。

答案 11 :(得分:0)

如果您编写语义HTML,页面的每个元素都包含它自己的含义。它适用于搜索页面,屏幕阅读器,桌面和桌面设备。移动浏览器。对你也是。例如,您只能为标签编写样式。请查看此示例:awsm.css

答案 12 :(得分:0)

有明显的好处。例如,看一下这段代码:<article>Bla bla bla</article>

现在看一下HTML4的“等效”:<div class="article">Bla bla bla</div>

对于某台计算机,<div><article>之间没有特别的区别。两个不同的字符串,没有特殊含义。但是如果你提供不同的标签,你可以为每个标签分配不同的含义,实际上就是这样。

从搜索引擎机器人的角度来看,<div>标签是用作容器的东西,没有更多特殊含义。但是,如果我使用<article>,搜索引擎机器人可以理解其内部将会是一段文字,其中有些人会说人。

您可以使用其他标记<aside>更清楚地看到它,您可以说其中的内容与文档的其余部分没有任何关系。例如,您可以在其中放置广告(广告可以与内容相关,但这意外使用:))

在表现方面,我不知道是否存在很大差异或者是否存在差异,但这不是想达到的目标。

答案 13 :(得分:-1)

除了所有这些答案之外,语义HTML还可以提高您的搜索排名(请参阅SEO)。谷歌和其他搜索引擎会查找您网页的某些语义部分,并使用它们进行大量排名。