语义化标签的实战意义

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

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

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

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

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

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

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

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

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

语义化存在的意义

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

例如

         
<div class= " wrapper ">
       <div class= " main"> …</div>
       <div class= " sidebar">…</div>
</div>

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

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

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

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

大家都不假思索的考虑用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中的元素逐渐增多。



<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,就解决了它。

我们继续看图写代码……

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

<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的,难道不对吗?显示没有问题呀。不做解答,我们先继续看图写代码

看到这个图,我们首先考虑的是程序循环,然后在脑海中构思用什么标签来搭建结构,我继续使用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来的漂亮。

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

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

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

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

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

转自新浪UED

时间: 2024-11-05 01:36:50

语义化标签的实战意义的相关文章

html5语义化标签使用规范

Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏nav. <header> <h1>html5语义化标签</h1> <nav> <h1>导航</h1> <ul> <li>章节标签</li> <li>标

HTML 5的革新——语义化标签(一) (转)

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局 嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标

HTML 5的革新——语义化标签

HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局 嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标

HTML 5的革新之一:语义化标签一节元素标签。

摘至于:<HTML 5的革新——语义化标签(一)> 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分.但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”. 看下图没有用div标签来布局 html5的布局 嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计

HTML5之语义化标签

在HTML5之前采用HTML+CSS文档结构写法: ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域) class选择器说明 class类选择器——可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目. 代码: <body> <div id="header">...</div> <div id="nav">...

特殊字符与语义化标签

在HTML中特殊字符的表示: 空格 < < > > ©? 语义化标签 <header>头</header> <nav>导航条</nav> <hgroup>标题组</hgroup> <acticle>可独立页面</acticle> <section>一个整体的一部分主题</section> <address>地址</address> <

我的启蒙--HTML5 第一章 语义化标签

HTML5 1.HTML5:万维网的核心语言,HTML规范的第五次重大修改.现在大部分网站的主流编译语言.学好HTML5是每一个前端的基础课,当然她也很简单 2.HTML5新增语义化标签(虽然很少用到,但是还是要说一下) (1)<laomaoshi>老猫师:恩,你没看错HTML5可以自己定义标签,而且属于行内标签</laomaoshi> (2)其他的我就不一一列举了比如 导航栏常用的nav  时间常用的time (3)但是新增的表单标签,我们还是要熟悉下 就是这样的新标签,还有很多

HTML5语义化标签

一.什么是语义化标签?1.那么什么叫做语义化呢?说的通俗点就是:就是给div起个外号,比如,网页上的文章的标题就可以叫他标题,网页上的各个文章,就可以叫他文章. 2.为啥使用语义化标签?(1). 更容易被搜索引擎收录.(2). 更容易让屏幕阅读器读出网页内容.(3). 能够更好的体现页面的主题.(4).兼容性更好,支持更多的网络设备.二.常见语义化标签 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏

HTML5语义化标签总结

1.语义化标签总结 基础布局标签 <header></header> <nav></nav> <main></main> <aside></aside> <article></article> <footer></footer> 注意:IE8以后不兼容H5标签,如果需要兼容IE8一下的浏览器,则需要如下操作: 如果在sublime,或者WebStrom使用 可是使