Semantics:Html/Xhtml是不是真实合乎规范

2021-03-22 17:22 jianzhan

原文:http://jorux.com/archives/what-is-semantics/
Semantics可汉语翻译为词义的(学),它是Html/Xhtml是不是真实合乎规范的关键1环。Jorux在这和大伙儿探讨1些自身的见解,如有不当之处的地方,还请各位网友纠正。在西方,为何这么多人这般高度重视网页页面的Semantics,或许你会说,西方较为守规定,高度重视规范,但我想说的是,在这些表象的身后拥有“1只无形中的手”操纵着。
在此,举个导航栏条的事例来讲明我的见解。大伙儿应当看见过许多诸以下类的导航栏构造:
主页 | 有关 | blog | 留言 | 相册
它们拥有相互的特性,都有切分条“|”将各个条目分开。要完成以上实际效果的导航栏栏,其Html/Xhtml有许多种写法,在此仅具几个较为典型的事例:
例1:
<p><a href=”home.html”>主页</a> | <a href=”about.html”>有关</a> | <a href=”blog.html”>blog</a> | <a href=”message.html”>留言</a> | <a href=”album.html”>相册</a></p>
例2:
<ul>
<li><a href=”home.html”>主页</a></li>
<li>|</li>
<li><a href=”about.html”>有关</a></li>
<li>|</li>
<li><a href=”blog.html”>blog</a></li>
<li>|</li>
<li><a href=”message.html”>留言</a></li>
<li>|</li>
<li><a href=”album.html”>相册</a></li>
</ul>

例3:
<ul>
<li><a href=”home.html”>主页</a> | </li>
<li><a href=”about.html”>有关</a> | </li>
<li><a href=”blog.html”>blog</a> | </li>
<li><a href=”message.html”>留言</a> | </li>
<li><a href=”album.html”>相册</a></li>
</ul>

例4:
<ul>
<li><a href=”home.html”>主页</a></li>
<li><a href=”about.html”>有关</a></li>
<li><a href=”blog.html”>blog</a></li>
<li><a href=”message.html”>留言</a></li>
<li><a href=”album.html”>相册</a></li>
</ul>

以上为表明Semantics而举的4个导航栏条Html/Xhtml事例.
例1应用了段落p做为导航栏条的词义元素标志(相对构造元素,诸如div等)。很明显它犯了很典型的不正确,不正确的把本来是条目(list)的导航栏栏当做了段落。
例2,3,4都应用了ul/li做为导航栏栏的词义元素标志,它们的差别进在于切分条“|”的部位,和是不是在Html/Xhtml中出現。
因为CSS的存在,运用其操纵表象的工作能力,能够将以上4个事例的表面变得1模1样,而不被肉眼发觉。可是这只是表象,伴随着检索模块的互联网技术影响力提高,和XML的应用频率和关键性提升,它们做为Robot,写保护Html/Xhml/XML源码,而不读CSS,也便是说它们更在意你的网页页面的具体含意,而并不是你的网页页面漂亮与否。也便是说让你的网页页面合乎词义标准,便是让这些Robot更好的读懂你的网页页面,提升你的网站在检索結果中的排名,得到更大的权益,这只无形中的手决策了西方对Semantics的高度重视,乃至超出网页页面是不是根据W3C的检验的关键性。
我本人觉得的Semantics的含意便是:
将CSS除去,你的网页页面主要表现仍然标准,易懂。
这条规律,能让你的肉眼和Robot的逻辑性做到某种水平的统1。运用以上基础理论,在例1中犯的不正确,就较为非常容易了解,条目中的重要词比段落中的重要词,更具使用价值。1个本来是条目地內容为何还要应用段落?!
那末例2,3,4中,隔开条如何会这般关键。
例2,3当中只是部位的差别,如今无需任何CSS来操纵表象,那末其Html/Xhtml主要表现的差别是不言而喻的,读者能够试试。在例2中,切分条会独立占有4个li,本来5个li变成了9个。打个比如,1个5本人的企业如今变成了9本人的,大伙儿的股权被稀释了1半,每一个股东的关键性自然会被消弱。更要命的是有4股票东竟然是1模1样的。Robot将会会觉得那4股票东(|)更加关键,而减少了别的股东(重要词)的关键性。在例3中,使隔开条变成原先股东的秘书,当然不容易危害重要词的关键性。
从表象考虑到,也是例3优于例2的主要表现,例2中分刘海隔条独立占有1行,令人难以相信。
那末例4中,沒有应用隔开条,其在词义学上更优。隔开条的主要表现,能够在CSS选用照片情况轻轻松松完成,并且像这类种类的纯色隔开条,用gif文件格式的话,仅有几个字节,不危害免费下载速率。
以上是Jorux在跟西方人沟通交流中,融合客户意见反馈,获得的1些心得感受。大伙儿如有不一样见解或是难题,虽然拍砖。
期待以此引发各位大陆盆友的高度重视,高度重视应用h1/h2/p/ul/li/blockquote/table等词义元素的应用和标准,不必乱用div等构造元素,Robot是不太亲密接触此类元素的。比如说,严苛实际意义上说单独网页页面,只容许出現1次h1,便是你的网页页面title,h1在Robot中的影响力仅次于<title></title>。
注:早已忘了之前升级是何时了,这般升级速率,早已让我基本上想舍弃。原认为,这类半死情况的网站,会慢慢被忘却,可是Feed的定阅量却在爬升,这让我怀疑Feedburner的计数器是否出了常见故障。
能让我聊以抚慰的便是这篇 Write Articles, Not Blog Postings ,Jakob Nielsen 这位科学研究互动页面的权威性明显寻找了其蜗牛式速率的有效性。大伙儿能够定阅1下这人的Alertbox。