语义化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.兼容性更好，支持更多的网络设备。

　　屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（因为这些设备对CSS的支持较弱）。使用语义标记可以确保这些设备以一种有意义的方式来渲染网页。理想情况下,观看设备的任务是符合设备本身的条件来渲染网页。

3.对搜索引擎更加友好。

　　搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。搜索引擎的爬虫也是网站的“访客”，现在它们是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

4.代码简洁，便于团队开发和维护。

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

 

 

转载于:https://www.cnblogs.com/wqhwe/p/3929597.html