html5页面结构标准的核心是用语义化标签替代无意义的div堆砌,header/footer定义区块头尾、nav/main区分主导航与唯一主内容、article/aside划分独立内容与附属信息、section/figure强化主题分组与图文语义。

HTML5页面结构标准的核心,是用有明确含义的标签替代无意义的
header 和 footer:定义页面边界
header不只用于整个页面顶部,也适用于文章、侧边栏等区块的头部。里面可放网站Logo、主标题、搜索框或文章标题。但广告横幅、次要链接不宜塞进去,除非它属于该区域的核心标识功能。footer同理,应承载版权、联系方式、返回顶部等收尾信息,而不是重复导航或正文内容。
- 每个页面建议只有一个顶层
和一个顶层 - article或aside内部也可有自己的
和 - 避免把主导航以外的链接(如页脚友情链接)放进
nav 和 main:区分导航与核心
nav专指主要导航集合,比如顶部菜单、左侧栏目列表。一个页面可以有多个
- main直接子元素应为article、section或其它内容块,而非又一层div
- 如果页面含多个主题区(如多语言切换),用hidden属性控制显示,而非共用一个main
- nav可放在header内,也可独立存在;但不应出现在main内部
article 和 aside:划分主次内容
article代表可独立存在、可被RSS抓取或单独分享的内容单元,比如一篇博客、一条新闻、一个用户评论。它必须自带h1–h6标题,且内部可完整包含时间(
- 评论区每条评论都该用
包裹,而非仅用div - aside不等于“右边那栏”,而取决于内容关系——若某段文字脱离上下文仍成立,就适合aside
- 不要用aside放全局导航或页脚链接,那是
section 和 figure:强化内容逻辑与图文表达
section用于按主题划分内容区块,每个section最好有明确标题(h1–h6)。它比div更具体,但比article更宽泛——article强调“可独立分发”,section强调“同一主题下的若干相关内容”。figure和
- 不要只为布局套section,先问:这部分有没有统一的主题?
- figure不只限于图片,也可包裹代码块、图表、音视频,并用figcaption标注用途
- 避免在section里塞无关内容,比如把导航或页脚硬塞进去
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











