首页 > 代码库 > 了解HTML5大纲算法

了解HTML5大纲算法

实战前的准备工作:了解HTML5大纲算法

在html5中有一个很重要的概念,叫做html5大纲算法(HTML5 Outliner),它的用途为用户提供一份页面的信息结构目录。合理的使用HTML5元素标签,可以生成一个非常清晰的文档大纲。

 

HTML5大纲算法

我们可以通过各种工具去查看当前页面,这里推荐使用一个测试工具:HTML5 Outliner,网址如下:https://gsnedders.html5.org/outliner/

 

1. 了解一个 section 和 div 的区别

①div元素在html5之前是最常用的最流行的标签,但他本身是没有任何语义的,它只不过是用来布局页面和css样式以及js样式。

②在html5中 section 标签并不是用来取代 div 的。他是具有语义的文档标签,在大纲规范中规定 session 至少要包含一个标题。也就是 section 标签内至少包含一个h1~h6。

③如果是页面布局,且不是 header、footer之类的专属区域都应该使用div。

 

2. body\nav\section 都是需要有标题才规范,header和div则是不需要标题的。

 

3. section 和 nav 元素大纲要求有标题h1~h6,暗示 section 必须有才规范,而 nav 如果没有标题,也是合理的。给他添加了标题会让大纲更好看,所以我们可以添加完了再隐藏,就不会破坏布局了。(通过display:none;将其隐藏)

了解HTML5大纲算法