HTML5 里 section article 什么区别？header footer nav 该怎么理解？

继 js 分号要不要写之后，蛋疼问题第二发。

HTML5 里为了更好的语义化，提供了很多标签，section、article、header、footer、nav、aside、figure 神马的。现在问题来了，原先都是 div 随便写，现在想用上这几个标签，但立马就苦恼了。

section、article 什么区别？
nav 是全站的 nav 头才能用，还是所有的菜单栏都用？
aside 是指侧边栏，还是内容排版时放在旁边的附图、代码之类的容器？

这篇文章说得挺好，给了许多观点，我是赞成它的
http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

回复内容：

给你举个形象的例子。
你在 word里打一篇长文章，这篇文章其实就是一篇article。word每一页都有页眉和页脚，这就是header和footer。所以你发现一个文章被word分了好多页，所以他可以有若干个header和footer。再说说nav，你写文章很长划分了好多小标题，左侧出现的那个文章菜单导航路径就可以理解为nav；

最后说下p和section，你写了这么一篇文章肯定分了好多自然段，这些自然段就是p，而整篇文章可能按照其大义分了段（又叫章节，一个章节可能有多个自然段组成）这时候这个分出来的大的段落就叫section。 我觉得HTML 5里面很多标签实际上不是为了布局而设，而是为了表明其中内容的含义。这么做，我个人揣测，是为了将来更便于使用程序从页面中抓取和分析内容 在这里 article ≠ 文章，article = 物件，就好理解了 article@dict.cn 传送门: Semantic HTML by @顾轶灵. 要跳脱开布局来理解这些东西。 其实就是语义化标签，没那么复杂，我的理解：

• section 比article小一级，可以嵌套
• article 正文
• header 页眉
• footer 页脚
• nav 导航栏（横的竖的都行）
• aside 正文里的图片、注解
• figure 表格

语义化的好处是方便工具（爬虫等）分析，比如readability这种就比较happy。 我还处于随便命名的阶段。。。感觉这些命名都是为了自己好记而已 这些有着明确意义的标签，其主要目的是为了网页的SEO，容易被搜索引擎正确的收录，更加使得别人更容易的搜索到！！！！