新手学语义化标签是为了避免<div>套娃导致结构混乱、SEO差、屏幕阅读器失效，应从<header>、<nav>、<main>、<article>、<footer>5个核心标签起步。
直接说结论：新手学语义化标签，不是为了“写得更高级”，而是避免一上来就用一堆 <div> 套娃，导致结构混乱、SEO差、屏幕阅读器读不出重点——从 <header>、<nav>、<main>、<article>、<footer> 这5个标签开始，就够你搭出清晰、可维护的页面骨架了。
为什么不能只用 <div>？
浏览器和搜索引擎看到一堆 <div class="header">、<div class="content">，根本不知道哪个是导航、哪个是正文。它只能靠猜类名，而类名可以随便起（比如 class="top-box"），毫无约束力。
真实问题包括：
- SEO 抓取时无法识别主内容，
<main>里的文字权重远高于<div>里的 - 盲人用户用屏幕阅读器按“跳到主内容”快捷键，会直接跳过所有
<div>，但能准确停在<main> - 团队协作时，别人打开你的 HTML，第一眼就知道
<nav>是导航区，不用点开 class 查 CSS 文件
<main> 必须且只能出现一次
<main> 不是“主要内容容器”的泛称，它是有严格语义的：代表当前页面独一无二的核心内容区域。比如博客页的正文、商品列表页的产品卡片区、新闻页的报道全文。
立即学习“前端免费学习笔记（深入）”；
常见误用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在
<article>内部再套一个<main>—— 错，<article>本身已是独立内容单元，不需要再标“主” - 一个页面里写了两个
<main>—— 浏览器不会报错，但会违反 W3C 规范，部分辅助技术可能忽略第二个 - 把侧边栏广告或登录框塞进
<main>—— 它只该放用户点进来真正想看的东西
正确姿势：<main> 包住整页核心，外面是 <header> 和 <footer>，旁边是 <aside>。
<article> 和 <section> 到底怎么分？
两者都是区块标签，但语义完全不同：
-
<article>：内容必须能独立存在、可被单独分发。比如一篇博客、一条论坛帖子、一个微博卡片、一个商品详情页。复制出来发到 RSS 或邮件里，别人也能看懂 -
<section>：只是逻辑分组，不强调独立性。比如“关于我们”板块下的“创始团队”“发展历程”“企业文化”三个小节，各自用<section>包裹更合适
容易踩的坑：
- 把整个首页用一个
<section>包起来 —— 没意义，不如直接用<main> - 在
<article>里再嵌套<article>—— 可以，但仅限于“评论”这种可独立分发的子内容；普通段落、标题用<h2>、<p>就行 - 用
<section>替代<div>却不加标题 ——<section>要求有明确主题，最好带一个<h2>或<h3>
新手最容易忽略的细节：嵌套规则和可访问性影响
语义标签不是贴标签，它们有隐含的 DOM 层级和语义权重。比如：
-
<header>可以出现在<body>顶层（全站页眉），也可以出现在<article>或<section>内部（该区块自己的标题区） -
<nav>必须包含至少一个链接（<a>），否则屏幕阅读器可能跳过它 -
<aside>里的内容必须和相邻<article>或<section>相关，比如“本文相关推荐”，而不是“全站最新活动”
最后提醒一句：别为了语义化强行拆分。如果一个简单单页只有标题+三段文字+底部版权，用 <header> + <main> + <footer> 就够了，<article> 和 <section> 留给内容变多、结构变复杂时再加。
