标签语义化——如何写出更语义化的页面
WHAT(何为语义化)
很多时候我们写HTML,为了方便都会直接使用div和span标签,再通过class来确定具体样式。网站哪一部分为标题,哪一部分为导航,哪一部分为头部和底部,都只能通过class进行确定,但class命名规范却又没有一套统一的标准,因此导致很多时候无法确定整体网站的结构。
因此,在HTML5出现后,添加了关于页面布局结构的新标签。而在HTML书写过程中,根据不同的内容使用合适的标签进行开发,即为语义化。
WHY(为什么要语义化)
语义化的优势主要在于下面几点:
1.其他开发者便于阅读代码,通过不同标签明白每个模块的作用何区别;
2.结构明确、语义清晰的页面能有更好的用户体验,在样式(css)没有加载前也有较为明确的结构,更如img这一类的,在图片无法加载的情况下有alt标签告知用户此处图片的具体内容;
3.利于SEO,语义化便于搜索引擎爬虫理解,和搜索引擎建立良好的沟通,能让爬虫爬去更多关键有效的信息;
4.方便其他设别阅读(如屏幕阅读器,盲人设备和移动设备等)。
HOW(如何语义化)
语义化大致如下图所示
![](https://images2015.cnblogs.com/blog/819688/201703/819688-20170315184456151-981715975.png)
一般的网站分为头部、导航、文章(或其他模块)、侧栏、底部,根据不同的部位,使用不同的标签进行书写。
表示页面不同位置的标签:header、nav、article、section、footer、aside
表示具体元素的作用或者意义的标签:a、abbr、address、audio、blockquote、caption、code、datalist、del、detail、ol、ul、figure、figuration、img、input、mark、p......
具体太多不详细列了,可以去http://www.w3school.com.cn/ 查一下
除了页面具体结构不再只使用div进行布局,还有在一些标签的使用上也需要注意,如关于b标签和strong标签的例子。
在w3c中有这么一段话
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。
我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。(页面地址:http://www.w3school.com.cn/tags/tag_phrase_elements.asp)
b标签这是纯粹的样式标签,表明这段文字需要加粗,但strong标签则是语气标签,除了加粗外,在html结构中表示这个是强调的内容。同样道理的还有i标签与em标签。