语义化HTML - html/css语言栏目：html.css

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 一怎样语义化html结构语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。正确语义化----结构(html)才是重点，样式(css)是用来修饰结构的。所以要先确定html，确定标签，再来...

一.怎样语义化html结构

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

正确语义化----结构(html)才是重点，样式(css)是用来修饰结构的。所以要先确定html，确定标签，再来选用合适的css。

一般来说，所有的标签都会有一个默认的样式，所以一个简单的判断网页标签语义是否良好的方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

正确语义化最实用的几条：

1.头部的页面声明，如定义meta, 页面title

2.提高关键词密度，如图片替换alt，链接说明title

3.正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd

4.慎用内容突出，如标题h，强调em，重点strong

注意：h标签的语意是标题，搜索引擎对这个标签比较敏感，特别是h1,和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要h1,h2,h3,h4这样推下来，不要h1,h3,h4，漏掉h2。一个结构良好的网页，h标签可以组织起一个网页的大纲。

5.尽可能少的使用无语义的标签div和span；

6.在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

7.不要使用纯样式标签，如：b、font、u等，改用css设置。

8.需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

9.使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

10.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

11.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

二.语义化的HTML结构的优点

1.去掉或样式丢失的时候能让页面呈现清晰的结构：HTML本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要误会这是HTML的表现，这些其实是HTML默认的CSS样式在起作用。所以去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（因为这些设备对CSS的支持较弱）。

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

搜索引擎的爬虫也是网站的“访客”,现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

5.便于团队开发和维护

在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

更多文章推荐