五个核心语义标签是header、nav、main、article、footer，按页面物理位置对应顶部、导航栏、主体内容、独立文章块和底部；article须有标题，aside为附属信息，main全局唯一且不可嵌套。
<header></header>、<nav></nav>、<main></main>、<article></article>、<footer></footer> 这五个标签覆盖了 90% 的日常页面结构需求，记牢它们比死背全部语义标签更实用。
按「页面物理位置」分组记忆最省力
人对空间位置的直觉比抽象概念强得多。把标签和你每天打开网页时眼睛最先扫过的区域对应起来：
-
<header></header>→ 顶部横条（Logo、标题、搜索框） -
<nav></nav>→ 通常就在<header></header>里面或紧挨着它，是一排链接 -
<main></main>→ 中间大块内容区，鼠标滚轮主要停留的地方 -
<article></article>→<main></main>里每一篇独立可转发/订阅的内容（博客、新闻、评论） -
<footer></footer>→ 滚到底看到的版权、备案、联系方式
不用记“语义”，就记“我平时在哪儿看到它”。浏览器右键“查看页面源代码”，随便打开一个新闻站，基本都能立刻定位这五个标签的实际落点。
<section></section> 和 <aside></aside> 容易混淆？看它有没有标题
<section></section> 不是“随便分一块”，它必须有主题，且通常自带标题（<h2></h2> 或更高）。比如“热门产品”“用户评价”“技术参数”这种带明确小标题的区块才用 <section></section>。
<aside></aside> 是“附带信息”，不参与主线逻辑：右侧推荐栏、作者简介、相关链接、广告位。它和 <main></main> 是并列关系，不是子容器。
常见错误：
- 把整个侧边栏用
<section></section>包裹 —— 错，该用<aside></aside> - 把轮播图区域叫“banner section”就硬套
<section></section>—— 错，没标题、无主题，用<div> 更诚实 <li>在 <code><article></article>里再嵌套<main></main>—— 错，<main></main>全局唯一，不能嵌套 - CSS 重置问题：
<header></header>等标签默认没有 margin/padding，但某些旧版 reset.css 会把它们当<div> 处理，导致样式错位 <li>屏幕阅读器支持没问题，但如果你给 <code><nav></nav>加了role="navigation"，反而可能干扰自动识别 —— 不加更稳妥 -
<main></main>必须且只能出现一次，否则 Lighthouse 无障碍检测直接标红，部分读屏软件会跳过第二个<main></main>
别为兼容性过度纠结，但得知道底线在哪
IE8 及更早版本完全不认识这些标签，但现代项目基本不用考虑。真正要留意的是：
实际开发中，<main></main> 放错位置、<article></article> 套太多层、<footer></footer> 被当成通用底部容器——这三个是最常被忽略的结构性硬伤。
