首页 > > 网站运营 > 建站经验 >

再谈语义化

2019-03-24 13:24:14来源：站长之家阅读 ()

开篇前的一些YY

曾几何时，一个人出设计稿，出完设计稿打开DW用拖出一个页面，再苦逼一点拖完页面后自己还要写后台，武林人称：美工。更苦逼的是当每一次需求变更后，去修改一大堆发麻的

，于是"div+css"被搬上了互联网时代的舞台，一夜间N多的《DIV+CSS》葵花宝典横空出世，那时，我们活在了div+css的年代，那时，我们用上了

之后，腰不酸，腿不痛，加班也带劲了。

YY结束，切入正题

Ghost曾在2年前就以《页面重构中的语义化》一文对语义化做过讲解，还有码头的《语义化的HTML结构到底有什么好处？》

重构历经7年，也许时至今日，我们可以熟练地写出一个页面，但对于写好一个页面又谈何容易？让我们梳理一下思路，重温下基础，并结合现在的趋势，再来谈一下语义化这个话题，神马是语义化？为何要语义化？

重构中的语义化基本可以分为2块：(x)html标签的语义化和css命名的语义化。

(x)html标签的语义化

不废话上案例：

(图1)

图1非语义化的实现方式：no_emantic_html 语义化的实现方式：emantic_html

你对

情有独钟吗？拿到一个设计稿之后，不经意间无数的

已经在你的弹指神功下落在屏幕？如果是no_emantic_html那样，恭喜你得了恋

癖。

"用合理HTML标记以及其特有的属性去格式化文档内容"—这是舒克对语义化标签的解释，能不用

的地方不用

，因为

是无语义的标签，原本单词是division，为分隔、区块的意思，一般只用在架构html的地方，在(x)html以前的版本。

不过怎样才能写出语义化的标签？从基础入手吧，每天跟我们打交道的最多的就是div h1-h6 ul-li p之类的标签了，不知大家有没有对这些标签做过深入的理解，来看下面这张表

标签	原单词	说明	语义化(Y/N)
h1-h6	head	定义 HTML 标题	Y
p	paragraph	定义段落	Y
ul	unordered list	定义无序列表	Y
ol	ordered list	定义有序列表	Y
li	list item	定义列表的项目	Y
dl	definition list	定义定义列表	Y
dt	definition term	定义定义列表中的项目	Y
dd	definition description	定义定义列表中项目的描述	Y
table	table	定义表格	Y
thead	table head	定义表格中的表头内容	Y
tbody	table body	定义表格中的主体内容	Y
th	table head cell	定义表格中的表头单元格	Y
tr	table row	定义表格中的行	Y
td	table data cell	定义表格中的单元	Y
a	anchor	定义锚	Y
img	image	定义图像	Y
div	division	定义文档中的节	N
span	span	定义文档中的节	N

以上只是列出了我们常用的一些标签，更多的标签请查阅w3c ，基本所有的html标签都是一个单词或者词组的缩写，这样其实本意是更便于我们对语义化的理解。其实所有的(x)html标签中，除了

和2个无语义的标签，其他标签都有它存在的意义，只有知道有哪些标签，以及对各个标签的本义做一个了解才能知道去用它。你不知道何时用

定义列表标签？又如果你不知道有^{标签？

如果在一个页面中看到的基本全是div，那么说明你对语义化标签的使用还不是很明白：明明是一个标题，可以用标签来实现，却非要用无语义的
标签来实现，又或者一个段落，用
标签是否更语义？
大家都知道每年的CSS裸奔节吧？如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性；各个浏览器有自己的默认样式，默认的样式给予了各个标签不同的显示，标签使用的正确与否能体现网站的可用性，这也是检验一个网站可用性的最简单的方法之一。
这个推荐大家去看W3C官网的标签的使用，用web developer禁掉它的CSS看看如何？
CSS命名的语义化
CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。
在我的理解，一个语义化的CSS命名至少应遵守如下约定：
尽量规避拼音命名，用英文单词去命名
单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名
单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)
对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂
一些约定好的单词可以迅速的帮助大家命名：
头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

登录条：loginbar

标志：logo

广告：banner

轮转：promo

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

版权copyright
这个太多了，这里就不一一列出了，遇到不会的单词大家再去补一下英文哈！

下面鄙人做的一个招聘页面大体架构命名，仅供各位拍砖

为神马要语义化？
在森林的聚会上被allan问到做语义化到底为了什么？我一时无言了，只是为了"祼奔"时好看？有多少用户会
看到"祼奔"的页面，并且看下去？
的确，我们不可能也不会仅仅为了"裸奔"时的好看而去做语义化，普通用户看不到你的网站"裸奔"时的样子也不想去看，不过从今天看来语义化的好处已逐渐明朗和开放开来：
手持移动设备的无障碍阅读
手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱，这时可能就需要更语义的标签来体现一个页面的易读性
盲人等一些障碍人士的更好地阅读
屏幕阅读器对不同标签所发出的声音是不同的，使用更语义的标签以能传达不同信息的重要性
搜索引擎的友好收录
虽然各大搜索引擎的排名规则不断的再变化，但规则里的正则始终是要匹配标签的，如果能用更语义的标签，蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。
技术趋势所趋
正如html诞生时的初衷那样，各个标签的本义就是希望能在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。html5新增了更多的语义化的标签，原本用
来实现的结构，通过html5的标签我们可以更完美的表现。

便于团队项目的可持续运作及维护
语义化的命名能够使我们在多人协作一个项目时更加有序和快捷，而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目，也便于后期其他同事的修改，语义化的命名时一个项目的可读性更高。
以上总结的前4点只要针对的是(x)html的标签语义化使用，最后一点针对的是CSS样式的命名。
必须讲一下的其他东西
合理使用
进入
时代，大家觉得就应该摒弃

，这是大错特错，不是不可以用，而是应该在合适的地方用。传统网络WEB1.0时代时，网页的信息以一种"推"的方式呈现到用户面前，多数以文字或者图片的形式进行展示，而没有太多的复杂的展示效果，当时
就是在这样的环境下被以一种hack的方式来实现网页技术，只需要在DW拖一个
就可以很简单地实现网页，以后的几年，大家都懒得去改变这一格局，所以
也经历较长的一段时间。如今，
的本义应当用作数据列表的地方，对于一些数据处理用
显得更加有序和语义。

html5–为语义和体验而生
HTML5提供了一些新的元素和属性，例如
（网站导航块）和。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。html5也弥补了(x)html1.1以前版本在语义标签的缺陷，这样就可以更少的去使用
等无语义标签，而去使用等这类型语义标签。

微格式—将智能数据添加到网页上
(x)HTML标签本身并不具备对它们的含义进行描述的功能。如果一个网站链接到另一个网站，那么该链接并不承载任何为什么有关这些网站互相链接的原因方面的信息。但是，如果这些都能被实现将会怎么样呢？微格式就是标签进行简单的扩展，将智能数据添加到网页上。如Smallni's Blog。上面的链接标记包括rel="home"属性，该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性，就为这个链接添加了具体的结构和意义。
作者：Dailey
文章来源：携程UED}