本文转自 携程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命名是什么意思。如果是个人项目,也便于后期其他同事的修改,语义化的命名时一个项目的可读性更高。