HTML5 语义化标签(移动端必备)

最近移动端网页要重写代码,移动端都是html5+css3了,想让网页显得有逼格也与时代接轨,语义化不能缺少,更少的代码,更好的体验

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。

但是就我个人而言,因选取一些标签时会比较纠结,所以仍使用了div。(PS:正是因为这样,才有了这篇文章的,没错,以后要注意语义化了)

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

语义化优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,如盲人阅读器根据语义渲染网页
有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

今天先介绍主体结构标签,如图所示:

1、

定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个

元素,但需要注意的是
元素不能作为
元素的子元素。

2、

推荐阅读