HTML5 里 section article 什么区别？header footer nav 该怎么理解？-H5教程-PHP中文网

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

php中文网

发布： 2016-06-07 08:44:50

原创

2846人浏览过

继 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

LobeHub

LobeChat brings you the best user experience of ChatGPT, OLLaMA, Gemini, Claude

201

查看详情

回复内容：

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

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