HTML5语义化标签布局：构建更清晰的内容呈现结构

语义标签应准确表达内容本质与结构作用：main唯一且仅含核心内容；article用于可独立存在的内容，section需配标题；header/footer按逻辑区块多次使用；aside、figure、time等细节标签不可省略。

用对语义标签，页面结构自然清晰——不是靠 class 名猜内容，而是让标签自己“说话”。核心在于每个标签都准确表达它包裹的内容是什么、在整体中起什么作用。

main 必须唯一，且只装真正核心内容

它是整页的“内容锚点”，搜索引擎和读屏工具会优先聚焦这里。导航栏、侧边推荐、页脚版权这些重复性模块，一律不能塞进去。

• 正确做法：文章正文、产品主图、表单主体放里
• 常见错误：把顶部导航或右侧广告也包进
• 嵌套禁忌：不能出现在、或内部

区分 article 和 section：看内容能不能“单飞”

不是按样式分块，而是看信息是否自成一体、能独立存在。

• article：博客正文、用户评论、新闻稿——删掉周围内容，它依然完整可读，还能被 RSS 订阅或单独打印
• section：比如“安装步骤”“FAQ”“技术原理”——它依赖上下文才有意义，必须配一个

  –

  标题

• 组合建议：同一主题下的多篇，外层用包裹并加标题，比如“Vue 教程”下再放几篇具体文章

header 和 footer 可多次出现，但要“各司其职”

它们不是页面顶部/底部专属，而是每个逻辑区块的头尾标识。

立即学习“前端免费学习笔记（深入）”；

• 页面级放 logo 和主导航；每篇也可自带，含标题、作者、发布时间
• 同样灵活：全局页脚写版权声明；末尾的可以放编辑信息或相关链接
• 关键原则：每个或都要匹配其直接父容器的主题，不为空而设

aside、figure、time 这些细节标签，别省略

小标签撑起大语义，直接影响机器识别和辅助访问效果。

• aside：只用于与主内容相关但非必需的信息，如文章旁的“作者简介”或“同类推荐”；纯广告横幅不算
• figure + figcaption：图片、图表、代码块必须用包裹，说明文字必须是且为直接子元素
• time：别只写“昨天”，要用今天，让日历聚合、SEO 时效判断有据可依