真正语义化的标签是浏览器、搜索引擎和辅助技术能据此推断内容角色的标签，如<header><nav><main><article><section><aside><footer>这7个核心结构标签，以及<figure><time><cite><dfn>等关键辅助标签。
哪些标签才算真正“语义化”？
不是所有 HTML5 新增标签都算语义化标签——只有那些**浏览器、搜索引擎和辅助技术能据此推断内容角色**的标签才算。比如 <div> 和 <span> 永远不算，哪怕你加了 class="header"；而 <header>、<nav>、<main> 这类，一写出来，机器就知道“这是页眉”“这是导航”“这是主体内容”。
核心语义结构标签就 7 个，必须记牢：
-
<header>：页面或区块的顶部区域（可嵌套在<article>内） -
<nav>：仅用于**主导航链接组**，不是所有链接都该放这儿 -
<main>：全页**唯一且不可嵌套**在<article>、<aside>、<footer>中 -
<article>：独立可分发的内容单元（博客、新闻、评论），支持嵌套（如评论里的回复） -
<section>：有标题的逻辑分块（如“产品特性”“用户反馈”），没有标题的 section 是可疑的 -
<aside>：与主内容相关但可分离的侧边信息（作者简介、广告、延伸阅读） -
<footer>：页面或区块的底部，可多次出现（<article>里也能有<footer>）
为什么 <section> 和 <article> 总用错？
它们的区别不在“大小”或“位置”，而在**内容是否自包含、可独立复用**。
常见误用现象：
立即学习“前端免费学习笔记（深入）”；
- 把整个“关于我们”页面包进
<section>—— 错，它没标题，也没明确语义边界；应改用<article>或拆成带<h2>的多个<section> - 用
<section>包裹无关联的导航+搜索+logo —— 错，这该是<header> - 把评论列表整个塞进一个
<article>—— 错，每条评论才是独立<article>，列表本身用<section>或<ol>
判断口诀：能单独 RSS 订阅？能被转发到另一个网站还完整？能出现在搜索结果摘要里？—— 是，就用 <article>；否则优先考虑 <section> 或更具体的标签。
怎么一眼看出语义结构是否合法？
别靠肉眼猜。三个实操方法，5 秒内验证：
- 打开 Chrome / Edge → 右键「检查」→ 三点菜单 → More tools → Rendering → 勾选 Show HTML5 semantic indicators，页面立刻高亮所有语义区块（
<nav>是蓝边，<main>是绿底等） - 粘贴这段脚本到控制台，快速查嵌套违规：
const tags = ['header','nav','main','article','section','aside','footer']; tags.forEach(t => document.querySelectorAll(t).forEach(el => { if (el.parentElement && !tags.includes(el.parentElement.tagName.toLowerCase()) && el.parentElement.tagName !== 'BODY') { console.warn(`${t} inside ${el.parentElement.tagName.toLowerCase()} — likely invalid`); } })); - 用 HTML5 Outliner 粘贴源码，看生成的大纲是否符合直觉（比如
<main>下不该直接跟<footer>，中间得有内容层）
<figure> 和 <time> 这类“小众但关键”的标签怎么用？
它们不参与主结构，但对 SEO 和无障碍至关重要，常被忽略：
-
<figure>+<figcaption>：不只是给图片加标题。图表、代码块、引用块、甚至一段 SVG 都适用。注意：<figcaption>必须是<figure>的**第一个或最后一个子元素** -
<time datetime="2025-12-16">去年十二月十六日</time>：让机器精准识别日期。搜索引擎会抓取datetime值而非文本，所以中文写法不影响解析 -
<cite>：只用于作品名（书名、电影名、文章标题），不是作者名；作者名该用<span>或<small> -
<dfn>：包裹首次出现的专业术语，如<dfn>语义化标签</dfn>，屏幕阅读器会提示“定义”
最易被忽视的一点：<main> 标签在旧版 Safari（≤15.6）中需配合 role="main" 才能被正确识别；若目标用户含大量 iOS 15 及以下设备，建议补上。
