网页标签语义化

本文转自 携程UED 原作者：Dailey
HTML的语义化
“用合理HTML标记以及其特有的属性去格式化文档内容”—这是舒克对语义化标签的解释，能不用<div>的地方不用<div>，因为<div>是无语义的标签，原本单词是division，为分隔、区块的意思，一般只用在架构html的地方，在(x)html以前的版本。

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

标签	原单词	说明	语义化
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

css的语义化

CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。

在我的理解，一个语义化的CSS命名至少应遵守如下约定：

1、尽量规避拼音命名，用英文单词去命名
2、单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名
3、单词后不要跟无意义的数字，如logo1234 (团队约定好的除外)
4、对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂

一些约定好的单词可以迅速的帮助大家命名：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
登录条：loginbar
标志：logo
广告：banner
轮转：promo
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权copyright……..

为神马要语义化？
在 森林的聚会 上被allan问到 做语义化到底为了什么？ 我一时无言了,只是为了“祼奔”时好看？有多少用户会看到“祼奔”的页面，并且看下去？的确，我们不可能也不会仅仅为了”裸奔”时的好看而去做语义化，普通用户看不到你的网站“裸奔”时的样子也不想去看，不过从今天看来语义化的好处已逐渐明朗和开放开来：

1、手持移动设备的无障碍阅读
手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱，这时可能就需要更语义的标签来体现一个页面的易读性
2、盲人等一些障碍人士的更好地阅读
屏幕阅读器对不同标签所发出的声音是不同的，使用更语义的标签以能传达不同信息的重要性
3、搜索引擎的友好收录
虽然各大搜索引擎的排名规则不断的再变化，但规则里的正则始终是要匹配标签的，如果能用更语义的标签，蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。
4、技术趋势所趋
正如html诞生时的初衷那样，各个标签的本义就是希望能在特定的地方使用合适的标签，而不是去用样式来表现一个不语义的标签。html5新增了更多的语义化的标签，原本用<div id=”header”></div>来实现的结构，通过html5的<header>标签我们可以更完美的表现。
5、便于团队项目的可持续运作及维护
语义化的命名能够使我们在多人协作一个项目时更加有序和快捷，而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目，也便于后期其他同事的修改，语义化的命名时一个项目的可读性更高。