新手学语义化标签是为了避免套娃导致结构混乱、seo差、屏幕阅读器失效，应从、、、、5个核心标签起步。

直接说结论：新手学语义化标签，不是为了“写得更高级”，而是避免一上来就用一堆 <div> 套娃，导致结构混乱、SEO差、屏幕阅读器读不出重点——从 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<footer></footer> 这5个标签开始，就够你搭出清晰、可维护的页面骨架了。

为什么不能只用 <div>？ <p>浏览器和搜索引擎看到一堆 <code><div class="header">、<code><div class="content">，根本不知道哪个是导航、哪个是正文。它只能靠猜类名，而类名可以随便起（比如 <code>class="top-box"），毫无约束力。

真实问题包括：

• SEO 抓取时无法识别主内容，<main></main> 里的文字权重远高于 <div> 里的 <li>盲人用户用屏幕阅读器按“跳到主内容”快捷键，会直接跳过所有 <code><div>，但能准确停在 <code><main></main>
• 团队协作时，别人打开你的 HTML，第一眼就知道 <nav></nav> 是导航区，不用点开 class 查 CSS 文件

<main></main> 必须且只能出现一次

<main></main> 不是“主要内容容器”的泛称，它是有严格语义的：代表当前页面独一无二的核心内容区域。比如博客页的正文、商品列表页的产品卡片区、新闻页的报道全文。

常见误用：

• 在 <article></article> 内部再套一个 <main></main> —— 错，<article></article> 本身已是独立内容单元，不需要再标“主”
• 一个页面里写了两个 <main></main> —— 浏览器不会报错，但会违反 W3C 规范，部分辅助技术可能忽略第二个
• 把侧边栏广告或登录框塞进 <main></main> —— 它只该放用户点进来真正想看的东西

正确姿势：<main></main> 包住整页核心，外面是 <header></header> 和 <footer></footer>，旁边是 <aside></aside>。

<article></article> 和 <section></section> 到底怎么分？

两者都是区块标签，但语义完全不同：


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• <article></article>：内容必须能独立存在、可被单独分发。比如一篇博客、一条论坛帖子、一个微博卡片、一个商品详情页。复制出来发到 RSS 或邮件里，别人也能看懂
• <section></section>：只是逻辑分组，不强调独立性。比如“关于我们”板块下的“创始团队”“发展历程”“企业文化”三个小节，各自用 <section></section> 包裹更合适

容易踩的坑：

• 把整个首页用一个 <section></section> 包起来 —— 没意义，不如直接用 <main></main>
• 在 <article></article> 里再嵌套 <article></article> —— 可以，但仅限于“评论”这种可独立分发的子内容；普通段落、标题用 <h2></h2>、<p></p> 就行
• 用 <section></section> 替代 <div> 却不加标题 —— <code><section></section> 要求有明确主题，最好带一个 <h2></h2> 或 <h3></h3>

  新手最容易忽略的细节：嵌套规则和可访问性影响

  语义标签不是贴标签，它们有隐含的 DOM 层级和语义权重。比如：

  • <header></header> 可以出现在 顶层（全站页眉），也可以出现在 <article></article> 或 <section></section> 内部（该区块自己的标题区）
  • <nav></nav> 必须包含至少一个链接（<a></a>），否则屏幕阅读器可能跳过它
  • <aside></aside> 里的内容必须和相邻 <article></article> 或 <section></section> 相关，比如“本文相关推荐”，而不是“全站最新活动”

  最后提醒一句：别为了语义化强行拆分。如果一个简单单页只有标题+三段文字+底部版权，用 <header></header> + <main></main> + <footer></footer> 就够了，<article></article> 和 <section></section> 留给内容变多、结构变复杂时再加。