在html5中语义元素应用分析

在H5新增加的语义元素，本来是帮助人们更好的理解代码的，但是部分元素却又引起了选择困难，，，

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

 

在这里让人容易产生困惑的是

这个标签元素

---

标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

注意：

section 不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理，专用的是 div

section 里应该有 标题（h1~6），但文章中推荐用 article 来代替

一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素。

section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。

一个section通常由内容和标题组成，通常不推荐那些没有标题的内容用section，在HTML 5 Outliner这个网站可以检测没有标题的section，section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。

---

可以相互嵌套，在页面中定义了一个特殊的顶级区块，于是可以从

开始列提纲而不用担心会破坏网页的纲要。尽管没找到明确说明，但我个人认为在每一层

里还是仅使用一个

为佳。

以Wordpress主题为例，我认为与#sidebar相对的#content部分，使用

包裹一堆

作为页面的主要内容并不太合适。而使用

用在整体布局是明显错误的了。而适合使用

标签的地方有：

文章的评论列表，有着整齐的结构；

文章内容的目录，有着文章内部结构纲要；

侧栏widget，在WebDesignWall中我看到了这样的设计，因为widget内容大都是评论列表、文章列表，有着清晰的结构且是独立完整的一部分；

包裹文章中各个章节的段落，但要在编辑器完成，目前来看并不易用。

---

拿报纸举个例子：

一份或一张报纸有很多个版块，有头版、国际时事版块、体育版块、娱乐版块、文学版块等等，像这种有版块标题的、内容属于一类的版块就可以用section包起来。

然后在各个版块下面，又有很多文章、报道，每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长，分好多段，每段都有自己的小标题，这时候又可以用section把段落包起来。

虽然这些标签有这个有那个的限制，官方规范建议也是模模糊糊的，但是不要忘记了html5语义化标签的意义，其中一个就是更方便开发人员阅读代码文档，理清代码结构。个人觉得，如果能方便自己和他人阅读理解的标签，那就大胆用吧。

最后，觉得造成大家标签选择困难症的原因其实也跟html5语义化结构标签太少有关，如果添加更多，更加细分、网页常用、功能专用的标签，像评论部分增加comment标签，友情链接增加link标签，分页增加paging标签，作者信息增加author标签等等，就不会纠结遇到相似功能的标签到底用那个好了，div就不用思考这个，一棍子打下去全中。

---

有了语义化，有section、article、dl看这多舒服，人也好理解，计算机也好理解，比满眼的div好多了。

例如：

        

WWF

        

The World Wide Fund for Nature (WWF) is....

---

div\section\article各自适用场景：

div充当容器的角色，用来设置某一块的总体属性（一个div里面可能包含多个section）；

section用于强调某一个模块，强调模块本身是作为一个整体的；

article用于强调某一段独立的内容，强调内容的独立性。