使用语义HTML有什么好处?

pen*_*ake 14 html performance semantics

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

谢谢

Nat*_*ong 33

不是表现

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

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

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

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

语义HTML的某些方面有点理想化,但原则是合理的.例如,使用<strong>而不是<b>传达"这个文本很重要"而不一定"这个文本应该是大胆的".也许您的用户希望重要文本突出显示为橙色.这取决于他们.

关键是,HTML是标记,它是关于有用地标记事物.语义HTML是所有HTML应该是:有用的,有意义的标签.

快速加载网站是一个完全不同的问题.

(:我的答案也请参见这里).


附录 - 向语义HTML发展

我认为随着时间的推移HTML变得更加语义是很自然的.

回到Dumb HTML世界,他们可能最终会得到疯狂的标记,比如<thing type='list'>,和<thing render='image'>.网络编码员会抱怨,"嘿,我们一直这样做.为什么不只是一个<image>标签?它会让我们的生活更轻松."

在现实世界中,人们不断地编码之类的东西<div id='nav'><div class='article'>.因此,有必要创建新的元素,如<nav><article><section>.这是HTML5规范草案的内容.

  • 除此之外,语义HTML是向语义网迈出的一步 - 允许无智能的计算机处理意义.语义HTML更多地供计算机使用,而不是人. (5认同)

Jit*_*yas 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


Bal*_*usC 6

语义HTML和性能

语义HTML不仅为正确的目的使用正确的标签,这明显改善了SEO,而且标记(HTML),样式(CSS)和脚本(JS)的分离.分离不仅可以改善维护,还可以提高下载性能,因为您通常会缓存CSS/JS文件.如果你用所有原始的CSS/JS代码混淆HTML文件和/或使用style而不是使用id或者class,它只会使HTML页面不必要地变大,并且需要更长的时间来运送它.


Nat*_*ong 5

明确的代码更易于维护

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

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

dothething(q);
CmtFn(x);
Run Code Online (Sandbox Code Playgroud)

......还是这样?

loadUserData(username);
parseComments(language);
Run Code Online (Sandbox Code Playgroud)

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