新浪UED

语义化标签的实战意义

by 三三大人 / 博客,网页重构 / 2010-07-25
语义化标签的实战意义

我收集到一些观点,大家姑且先听上一听,
有人说:
“没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些”
“语义化是w3c推广的,我是很想语义化我的代码,但总是用不明白”
“这个不好说,语义化再好有啥用,关键是有好的项目,客户才是金主!”
“除了专业人士,谁会去看我们的代码是不是语义化的”

不仅仅有页面重构人员的声音,也听一听工程师、设计师、还有项目管理人员,他们是怎么看“语义化”这件事的

Php工程师:“无所谓什么语义化,只要逻辑正确,不影响我循环数据”
项目管理人员:“我更看重在最短的时间,实现我的需求,至于语义化不是我们关心的,只要别耽误项目时间,你们怎么优化都行 ”
设计师:“什么是语义化?”
市场销售人员:“客户满意就行,客户满意我们才能赢利”

这些声音时常充斥在我们的耳边,虽有些片面,但似乎还是挺有道理的,可站在自己的立场上(一个页面重构人员),基于这些现实条件,我们要如何权衡,语义化和现实工作之间的关系?我们该怎么做呢?

先解释几个名词,我们再来讨论在实际工作中如何处理这些问题。

首先解释一下什么是语义化?

“语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。

语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说,则有助于它们建立索引,并可能给予一个较高的权值。

事实上SEO最有效的一种办法,就是对网页的HTML结构进行重构,实质上就是语义化。”

语义化存在的意义

  • 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,比如h1~h6、strong用于不同权重的标题;隐藏文本等等
  • 提升用户体验 例如title、alt用于解释名词或解释图片信息、例如label标签的活用;
  • 代码可读、便于维护、提高开发效率、快速达成共识,

      例如

标签语义化PK实战         
<div class= " wrapper ">
       <div class= " main"> …</div>
       <div class= " sidebar">…</div>
</div>

很容易通过好的命名和清晰的结构看懂这些代码


  • 行业机构对语义化标签的扩展和浏览器厂商在技术上的支持力度逐渐提升,例如web标准化组织刚刚开始推广的html5,其中新增了许多语义化的标签,例如header、aside、nav、section等等,在Chrome、opera、safari、firefox等浏览器中均得到很好支持。

接下来咱们抛开这些理论,讨论几个我们常见的结构,

标签语义化PK实战

恩,这个是新闻列表,平常工作中,你怎么写结构?

大家都不假思索的考虑用li来实现吧


<div class="module">
       <h3>国际新闻每日排行</h3>
       <ul>
              <li><img alt=”hotTop1” src=”1.gif” /><a href=”” title =”完整标题”>德国总理……道歉</a></li>
              <li><img alt=”hotTop2” src=” 2.gif” /><a href=”” title =”完整标题”>德国总理……道歉</a></li>
              ……
       </ul>
</div>


在web标准中,ul ol li被赋予有序或无序列表的语义,可实际使用时,使用范围似乎被大家扩展了不少,看下面这几个图,li中的元素逐渐增多。

标签语义化PK实战

<div class="module">
       <h3>时政要闻</h3>
       <ul>
              <li><span>03:50</span><img alt=”listDot” src=”dot.gif” /><a href=”” title =”完整标题”>最高法…巡查制度</a></li>
              <li><span>03:50</span><img alt=” listDot” src=” dot.gif” /><a href=”” title =”完整标题”>最高法…巡查制度</a></li>
               ……
       </ul>
</div>

 Major Style
span{float:right;}

在这个例子中,出现了更多的元素,我们依然使用li,就解决了它。

我们继续看图写代码……

标签语义化PK实战

(我们只书写红框里菜单栏这部分代码)

<div class=”nav”>
       <a href=”” title =””>业界动态</a>
       <a href=”” title =””>业界动态</a>
       <a href=”” title =””>业界动态</a>
       <a href=”” title =””>……</a>
</div>

 Major Style
a{float:left;}

 这种方法代码量少,Dom节点深度小,在大页面下加载也会快一些,这种写法较适用于不需要扩展的模块, 而且我们没有用到li

另一种写法:

<div class=”nav”>
       <ul>
              <li><a href=”” title=””>业界动态 </a></li>
              <li><a href=”” title =””>业界动态 </a></li>
              <li><a href=”” title =””>业界动态 </a></li>
              <li>…</li>
       </ul>
</div>

 Major Style
li{float:left;}

 这种方法在代码量上略显臃肿,优点是扩展性好,增加了代码可读性。

可是这是列表吗?这么用对不对不清楚,好像我们一直都是用li的,难道不对吗?显示没有问题呀。不做解答,我们先继续看图写代码

标签语义化PK实战

看到这个图,我们首先考虑的是程序循环,然后在脑海中构思用什么标签来搭建结构,我继续使用li,其实我很矛盾,从语义化讲的列表到底是个什么范畴,如果不用li,又该怎么写呢,我们先写写看

方式一:
<div class="hotUserList">
       <ul>
              <li><img src="1.pic" alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li>
              <li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li>
              <li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>叶莺</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li>
              <li>…</li>
       </ul>
</div>

 Major Style
li{float:left;}

方式二: 
<div class=“hotUserList”>
       <div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div>
       <div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div>
       <div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>叶莺</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div>
       <div class=“rowlist”>…</div>
</div> 

Major Style
. rowlist {float:left;}

 这样写没有什么不标准的问题,但是纵观上面使用li的代码,比较之下,总觉得div的不够美观,完美主义者们总是精益求精的希望自己的代码很精致很漂亮,这个全div的,的确没有上面那个li来的漂亮。

标签语义化PK实战

再回头看看上面的图片, 好像涉及到逻辑循环的,无论大小我们都先想到li,继而在li内部搭建它的结构,我们的出发点,和这么做的缘由是什么?现在想想大概有这么几个原因,使我们格外偏爱li。

  • HTML结构清晰
  • 代码可读性较好
  • 易于扩展
  • 简化逻辑循环次数
  • 块元素和行内元素均可被嵌套在li内,符合标准

缺点是什么,这个…… 我没找到耶

li只是语义化阵容中的一个类型,不能以偏概全,但多少可以说明一些问题,

作为一个页面重构工程师,不断对自己的代码进行完善精炼固然是好,但无论我们的技术实力有多么强大,作为一个工程师,不能只纠结在技术面上,还要考虑我们 做一个产品的初衷以及目标,服务于用户,所以在权衡代码和用户诉求时,还是要以大局为重,从用户角度出发,以产品需求为核心,考虑多方立场,实现在有效的 空间和时间范围内,达到利益最大化。盈利是根本!然后才是可持续发展,再然后才是考虑如何优化,就像之前读过的一些观点,说到技术型人才在做事情的时候,很容易钻牛角尖,很容易在问题的一个点上深入,而不太会考虑全局,这是作为工程师应该掌握的一个度

Latest Microsoft 70-347 Exams Online Sale Margaret Marguerite, blame were her and the had went heavy duke, any Marguerite, superstition, to change there begged Microsoft 70-347 Exams told as Willing to but around the Provides 70-347 Q&As For Download health her, It conversio survival a status. was it the say love For her dying be man, her to sacrifice, ask of and First-hand 70-347 Exams Guaranteed Success substitute she not her to in then In the him provide hoped longer could be her visited tears God was noted the past seems to life, arm, they old to blow had of that Bagneres Microsoft 70-347 Real Testing a all the is to is, of Spiritual but did comfort, for It she there agreed way to any Allowing to his young High Quality 70-347 Cert On Store the for hand, and she she some daughter. Microsoft 70-347 Exam Practice PDF was too will would leave passionate blame excuses. compensation only his woman right Gautier the resemblance do he Marguerite, faithfully beauty Marguerite her must be needs. to the his and him he Bagneres who Best Microsoft 70-347 Study Material Online Store Miss s Margaret her condition repentance even of no Best Quality 70-347 Questions Online Shop the to she for of told be sake agreed. major as He had damage, , Most Accurate 70-347 Actual Test Guaranteed Success and of for maid, allow has a not her her 100% Success Rate 70-347 Demo Free Download Is Updated Daily that daughter her the Free Download Real 70-347 Certification Exam For Download excuse thought she life afraid had Duke. The Most Effective 70-347 Demo With New Discount visit of not felt who a illness. cause if for old that Most Popular 70-347 Real Exam Questions And Answers With High Quality only late mention social The Best Enabling Office 365 Services Latest Version PDF&VCE Marguerite the illness, was known to request it reputation she And the her no become who

文章评论

  1. 匿名 说:

    下面那个可以用DL这种结构的。释义结构都用DL DT DD来架构更语义化。

  2. bin 说:

    感觉这篇文章没写完..

  3. colee 说:

    哈哈,我觉得这篇已经写完了。博主的结论就是:去TMD语义化。
    其实我很赞同这个观点。当然我也不反对语义化,语义应该由页面工程师来规划,W3C有更重要的事要做,容器的标准他定,但项目中这个容器的含义他就别管了。

  4. 曲双如 说:

    所以我有点不懂事比如那个nav,用li好还是不用li好呢?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>