HTML5语义化布局应优先掌握header、nav、main、aside、footer五标签；section需配标题，main仅限1次且不可嵌套，aside适用独立相关内容，nav专用于导航链接集合，语义化核心是准确表达内容角色。

HTML5 页面布局不需要从“完整页面结构”开始学，先搞懂 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这五个语义化标签怎么用，比死记 DOCTYPE 和 meta 标签管用得多。

为什么 <div> 不再是唯一选择？ <p>过去靠一堆 <code><div class="header"> 模拟结构，浏览器和屏幕阅读器完全不知道它真是页头；HTML5 引入的语义化标签让机器能“读懂”页面逻辑。但注意：<code><section></section> 不等于“一个区块”，它必须有标题（<h1></h1>–<h6></h6>），否则不如用 <div>。 <ul> <li> <code><main></main> 在整个页面中只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内

<aside></aside> 不只是“侧边栏”，也适用于推文、引用、广告等与主内容相关但可独立存在的内容

所有语义标签默认是块级元素，无需额外设 display: block

<nav></nav> 的使用边界在哪？

<nav></nav> 专指“导航链接集合”，不是所有链接都该包进去。页脚里的“关于我们”“隐私政策”链接通常不放 <nav></nav>，而顶部主导航、面包屑、站内搜索入口可以。

• 多个导航区可以有多个 <nav></nav>，比如 <nav aria-label="主导航"></nav> 和 <nav aria-label="快捷工具"></nav>
• 如果导航只有 1–2 个链接（如“登录/注册”），用 <div> 更轻量 <li>不要把 <code><nav></nav> 当样式容器：它不自带 margin/padding，也不影响布局流，纯语义用途

常见错误：嵌套混乱导致无障碍失效

屏幕阅读器依赖 DOM 结构播报内容顺序。<header></header> 放在 <main></main> 外面是常规操作，但如果把 <header></header> 塞进 <article></article> 里又没配 <h2></h2>，就会让辅助技术误判层级。

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


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• 错误写法：

  <article>
    <header>文章标题</header>
    <p>正文…</p>
  </article>

  （缺少标题元素，<header></header> 在 <article></article> 内应配合 <h2></h2> 或更高阶标题）
• 正确写法：

  <article>
    <header>
      <h2>文章标题</h2>
    </header>
    <p>正文…</p>
  </article>

• 避免 <main></main> 包 <header></header> + <footer></footer>：页头页脚属于整页，不是主内容的一部分

真正卡住新手的往往不是标签写不对，而是没想清楚“这段内容对用户意味着什么”。语义化不是加标签凑数，是告诉浏览器：“这里是一段独立的、可被跳过的、有明确角色的内容”。<main></main> 里塞了页脚版权信息，或者用 <section></section> 包单个按钮，问题就出在这里。