HTML知识点总结之div、section标签

• div元素

div是块级元素，相当于一个容器，在语义上不代表任何特定类型的内容。主要用作大的框架布局，也就是说网页的骨架主要通过div来架设的，而网页的血肉则是有span、p或者ul等元素完成。

• section元素

<section>标签是HTML5新增的语义化标签，代表文档中的“节”或“段”。“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。主要作用为对页面的内容进行分块或者对文章的内容进行分段。

section是块级元素，section标签通常带有一个标题和一个内容块。​

• article元素​

<article>标签也是HTML5新增的语义化标签，代表一个页面中自成一体的内容，目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论等。除了内容，article会有一个标题（通常会在header里）和一个footer页脚。article也是块级元素

如果在article内部再嵌套article，代表内嵌的article与它外部的内容有关联。

• section与article的区别：

section和article可以互相嵌套，也就是说他们没有上下级关系，section可以包含article，article也可以包含section。

拿报纸举个例子：

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

然后在各个版块下面，又有很多文章、报道，每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长，分好多段，每段都有自己的小标题，这时候又可以用section把段落包起来。（以上内容来自知乎https://www.zhihu.com/question/20227599 ）

• section和div的区别

1、section和div都可以对内容进行分块，但是section是进行有意义的分块，无意义的分块应该由div来做，例如用作设置样式的页面容器。
2、section内部必须有标题，标题也代表了section的意义所在。

• 注意：

​1、不要将<section>作为用来设置样式或行为的“钩子”容器，那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况，不要使用<section>。
3、不要为没有标题的内容区块使用<section>。

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