html5结构标签构建语义化页面骨架：header、main、footer为不可替代基础容器，main必须唯一；section按主题分组，article用于独立可复用内容；aside和nav明确辅助与导航边界；div仅用于无更贴切语义标签的场景。

用对 HTML5 结构标签，页面区域划分就不是靠一堆 <div> 硬堆出来的视觉盒子，而是有逻辑、可读、能被机器理解的内容骨架。 <h3>核心主干：用 <code><header></header>、<main></main>、<footer></footer> 搭起页面骨架

这三个标签是 body 内不可替代的基础容器。它们自带隐式 ARIA 角色（比如 <main></main> 对应 role="main"），屏幕阅读器会直接识别并跳转到主内容区。

• <header></header> 放网站标识、全局导航或某区块的标题信息；它可多次出现，既能在页面顶层，也能嵌套在 <article></article> 或 <section></section> 里
• <main></main> 必须唯一，只包裹真正核心、不可省略的内容，不包含导航栏、侧边栏或页脚这类重复性区块
• <footer></footer> 同样可多处使用：整页底部放版权信息，单篇文章末尾放作者、发布时间等元数据

内容分组：按主题用 <section></section>，按独立性用 <article></article>

<section></section> 是页面内的逻辑区块，比如“产品特性”“用户评价”“常见问题”，每个都该有明确标题（<h2></h2>–<h6></h6>）；而 <article></article> 是能脱离当前页面单独存在、分发或复用的内容单元，比如一篇博文、一条新闻、一个评论卡片。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 首页上的“最新动态”列表，每条新闻用 <article></article> 包裹，内部可用 <header></header> 放标题和时间，<footer></footer> 放来源或标签
• “关于我们”页面中，“团队介绍”“发展历程”“企业文化”三个模块，适合用 <section></section> 划分，各自配一个 <h2></h2>
• 避免把整个首页套进一个 <article></article> —— 它不是容器，而是内容实体

辅助与导航：用 <aside></aside> 和 <nav></nav> 明确功能边界

<aside></aside> 不是“右边那个小栏”，而是语义上可分离的附属内容，比如文章旁的术语解释、延伸阅读、作者简介；<nav></nav> 专指主要导航链接集合，不是所有链接都算导航。

• <aside></aside> 可放在 <main></main> 内部（关联当前文章），也可放在 级别（作为全站侧边栏）
• <nav></nav> 推荐用 <ul></ul> + <li> + <a></a> 组织链接，便于辅助技术解析导航结构
• 页内锚点菜单、面包屑导航、跳过链接这些次要导航，一般不用 <nav></nav>，避免语义过载

灵活补充：什么时候还用 <div>？ <p><code><div> 没有过时，它仍是合法且必要的通用容器——前提是确实没有更贴切的语义标签可用。 <ul> <li>纯样式分组：比如为一组按钮加统一动画类名，或为 JS 动态插入内容预留挂载点</li> <li>布局微调：Grid 或 Flex 的子项需要额外包裹层来控制对齐或间距时</li> <li>避免情况：给“头部导航”写 <code><div class="header">，或给“主要内容”写 <code><div id="content"> —— 这些本该用语义化标签替代 </div>