语义化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.尽可能少的使用无语义的标签divspan

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

7.不要使用纯样式标签,如:bfontu等,改用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