HTML5 里 section article 什么区别？header footer nav 该怎么理解？
程序员文章站
2022-04-14 14:50:53
...
继 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 @顾轶灵. 要跳脱开布局来理解这些东西。 其实就是语义化标签，没那么复杂，我的理解：
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 表格