语义化-HTML5标签的理解

一.为何要用h5标签

html5增加了新标签,为了跟上时代的脚步,最近尝试在项目中用到,想到没看官方文档理解一下很难用的好,于是找到官方地址理解了一下。这里主要看了一些结构性(Sections)元素(官方地址):header,footer,nav,section,article,aside,这些用来替代千篇一律的div布局,非常语义化。下面列举简单说一下,当作自己的备忘。

article标签从字面来看就是一篇文章,是一个独立的,不需要上下文,单独拿出来就是完整的一部分。
(比如一篇博文,一封邮件,一条评论)。如果是article嵌套article(比如一篇博文,嵌套评论),说明内嵌的article跟父article是有关联的。

section标签相比起div更有意义,是一个主题,一个分类的聚合,通常有一个标题。比如一个网站的主页可以分为介绍,最新内容和联系信息等section。比如一份报纸分为多版,一本小说分为多个章节。一般来说,文档内容 明确列出了大纲再用section比较合适。如果只是想加style或者script,更适合用div标签。

nav标签从字面就能知道是导航的意思,详细一点就是网站地图的导航或者文档内部的快速跳转。但是一般网站footer处友情链接等就不适合用这个标签,用p标签包一下然后把超链接列举一下就可以了。

aside标签包含的内容更上下文是无关的,在排版上可能表现为引用或者边栏,广告,nav标签组等(但不一定是,要根据内容判断),其内容与页面的主题内容是无关的。

hgroup标签是不同级标题的集合。比如文章的主标题用h1,副标题用h2。

header标签表示一组引导性的内容,通常会包含h1-h6标签,hgroup标签,但不是必须。同时也可以包含一个部分内容的目录,搜索表单等。

footer标签通常包含作者信息,相关文档的链接,版权信息,长附录,许可证协议等
署名和类似信息可以放在footer或者header里面。
可以是整个网页的footer,也可以是某个section里面的footer。

address标签表示联系信息,但不可以用来包裹任意的地址。

PS:看到一篇文章,对h5标签的分析挺详细的,学习了一下。

二.如何兼容ie

这个现在的解决办法是通过在head处引用一个js文件来兼容ie,要点就是调用
document.createElement方法来生成HTML5标签元素,在后面用到这些标签的时候浏览器就会认得新标签了。因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

三.总结与思考

语义化的意思根据内容使用适合的标签,而不是看设计效果来使用标签。所以,我们是要看这一块的内容跟整个文档的关系,如果这一块内容长得像侧边栏,就轻率地使用aside标签,而不考虑其实它是这个文档的导航,只是它刚好长得有点像边栏,我们应该使用nav标签才能正确表达它是导航的意思。

所以在看设计稿的时候,我们需要用心去读懂一个文档,这个文档哪一部分起到引导的作用,哪一部分是主题内容,主题内容又是怎样划分模块的,有没有作者版权联系信息等。我们应该从文字去理解它是什么含义,而不是它看起来像什么。

我们做的这些,对普通用户可能没有什么意义,但是对于无障碍,以及爬虫是很重要的。良好的结构能让机器更好地理解我们网页想要表达的重点。做到人和机器都能容易地理解前端工程师的意图,是我们的终级追求。

你可能感兴趣的:(html5,语义化)