HTML5语义化布局强调标签的逻辑角色而非样式，main必须唯一且不嵌套，header/footer可多级复用但需匹配父容器，nav专指主导航，aside须与上下文相关，section用于有标题的主题区块，article用于独立成篇的内容。

HTML5布局不是把标签堆出来，而是让每个标签准确表达它包裹内容的逻辑角色。语义标签的价值不在样式，而在告诉浏览器、搜索引擎和屏幕阅读器“这部分内容到底是什么”。

main必须唯一且顶层

一个页面只能有一个

，它是整个文档的核心内容容器，不能嵌套在

、

、

、

或另一个

里。哪怕文章内部有小标题、发布时间、编辑信息，也该放在

内部的

里，而不是把

塞进

中。

• 正确：
  直接放在下，里面放

  或多个
• 错误：
  …
  或
  …
• 例外：
  内部可以有自己的

  和

  ，比如文章标题和“编辑于2026-06-12”

header和footer可多级复用，但要匹配父容器

页面顶部有个

，某篇

开头也有个

，这完全合理——前者描述整站主题，后者描述这篇文章的主题。关键在于：每个

都得是它直接父容器的内容摘要。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 页面级
  里放Logo、主导航、搜索框
• article级
  里放文章标题、作者、发布日期
• section级
  可以放该小节的参考资料或更新说明，不等于全站版权信息

nav只管主导航，aside只管附属信息

不是“所有链接集合”的通用筐。它专指用户用来跳转到不同板块的主路径，比如顶部菜单、左侧栏目导航。页脚的“关于我们”“隐私政策”属于辅助链接，用普通

更合适。

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

• aside必须与当前上下文相关：文章页右侧的“作者简介”“延伸阅读”可用
  ；全站广告横幅或无关推荐应降级为

  或加role="complementary"

  多个

  并列时，需明确归属，比如

  旁一个

  ，

  旁另一个

  ，避免孤立存在

  section和article分工明确：分组 vs 独立

  是“有标题的主题区块”，必须自带

  –

  ，比如“产品特性”“用户反馈”；

  是“能单独拎出来仍有意义的内容单元”，比如一篇博文、一条评论、一则新闻。

  • 不要用
    包整页三栏布局——没标题、无主题，纯属视觉需要，该用CSS Grid/Flex控制
  • 新闻列表外层用
    不合适，每条新闻才该用

    ，列表本身可用

    或语义更弱的容器

    在

    里分章节，可用

    ，但每个

    都得有对应层级的标题