在HTML5中新增了很多语义标签概念,使HTMl文档根据页面内容结构选择语义标签,是页面结构内容格式化。它有利于清楚的描述HTML文档的意义给浏览器和开发者。下面列举了一些我们常用到的语义标签:
section元素 表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中<section>……</section>;HTML4 中<div>……</div>。
article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素 表示article元素内容之外的、与article元素内容相关的辅助信息。
header元素 表示页面中一个内容区块或真个页面的标题。
hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。
footer元素 表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。
nav元素 表示页面中导航链接的部分。
figure元素 表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用
figcaption元素为figure元素组添加标题。
到这里你可以能对如何对HTML页面语义化还是一直半解。下面我们就来通过一个具体的页面结构进行说明。
今天你的leader兴致冲冲地找到你,希望你可以帮他一个小忙,他现在急着要去开会。要帮什么忙呢?你很好奇。
他对你说,公司打算做一个公司主页,让你设计下这个页面的基本结构。
这个任务很简单嘛!你爽快的答应了,然后你就自己设计出来如下图所示的页面基本结构布局。
好了,完工!你自信满满。
你的leader过来看了下你的成果。总体来说,他还挺满意。但是他说从你设计的网页布局中我们视觉正常的人可以直观的看到页面的布局,并获取页面的内容信息。
但是屏幕阅读器或者搜索引擎无法获取准确获取页面的内容信息和内容相互之间的关系。
这样的设计是正确的但是还可以进行改进。
于是他百忙之中抽出一点时间对你的网页布局做了改进
• 在你的设计的布局中加入了一些HTML5中的语义元素,这样无论是人还是机器都可以很轻松的从设计布局中读取到相关信息了。这样的设计是不是更合理呢?这样做的好处有:
1、将构造HTML页面内容语义元素一起使用,可以将HTML内容分成明确的几个区域。
2、建立区域关系后的页面,对于人或者机器,都更具有可读性。而且,这也有利于搜索引擎访问页面。
3、建立区域关系后的页面,也有利于网页风格的一致性。
这些都是HTML5的基础知识,在教程网站秒秒学中有很多关于这些知识的讲解,推荐你可以去看看。
本题地址: https://github.com/YvetteLau/Step-By-Step/issues/8语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div。
例如使用可视化标签,构建下面的页面结构:
对于早期不支持HTML5的浏览器,如IE8及更早之前的版本,我们可以引入 html5shiv 来支持。