是html5中定义独立、完整、可独立分发或复用的内容单元的语义化标签，用于博客文章、新闻、评论等，强调内容自包含性与可标识性，区别于（主题分区）和（无语义容器）。
HTML语义化标签不是“锦上添花”，而是现代网页标准落地的刚性依赖——没有它，SEO、无障碍访问、构建工具链甚至部分浏览器原生行为都会降级或失效。
为什么搜索引擎会优先索引 <article></article> 而不是 <div class="post">
<p>爬虫不解析 CSS 类名，只信任原生标签语义。<code><article></article> 明确告诉搜索引擎：这是独立、可分发、有完整上下文的内容单元；而 <div class="post"> 在机器眼里只是个无意义的容器。实际抓取中，带 <code><article></article> 的页面在 Google News 或 Bing 知识图谱中更易被识别为“新闻条目”或“博客文章”，发布时间用 <time datetime="2024-01-15"></time> 标注后，也能被结构化提取进富摘要。
- 必须确保每个
<article></article> 有明确的 <header></header> 和至少一个标题（<h1></h1>–<h6></h6>）
- 避免嵌套多个
<article></article> 而无逻辑层级（比如把评论也写成 <article></article>，应改用 <section></section> 或 <aside></aside>）
- 不要用
<article></article> 包裹导航、页脚等非内容区块——这会污染语义信号
<main></main> 必须唯一且不可嵌套，否则屏幕阅读器会跳过
<article></article> 有明确的 <header></header> 和至少一个标题（<h1></h1>–<h6></h6>）<article></article> 而无逻辑层级（比如把评论也写成 <article></article>，应改用 <section></section> 或 <aside></aside>）<article></article> 包裹导航、页脚等非内容区块——这会污染语义信号<main></main> 必须唯一且不可嵌套，否则屏幕阅读器会跳过WCAG 2.1 和主流读屏软件（NVDA、VoiceOver）将 <main></main> 视为页面“核心内容起点”。若出现多个 <main></main>，或把它放在 <article></article> / <section></section> 内部，读屏器可能直接忽略整个区域，用户无法用快捷键 M（VoiceOver）或 Insert+F6（NVDA）定位主内容。
- 每个 HTML 文档只能有一个
<main></main>，且不能是<article></article>、<aside></aside>、<nav></nav>、<footer></footer>的子元素 - 如果页面含多篇文章（如首页列表），
<main></main>应包裹整个列表，每篇用<article></article>，而非给每篇都套一个<main></main> - 动态渲染时（如 React/Vue），需确保服务端或 hydration 后 DOM 中
<main></main>仍满足唯一性——SSR 漏掉或 CSR 多次挂载都可能出问题
<nav></nav> 不等于“所有链接集合”，它只用于主导航意图
语义错误比样式错误更隐蔽：<nav></nav> 的本意是“提供页面主要导航路径”，不是“放链接的地方”。页脚里的“关于我们｜隐私政策｜联系方式”若全塞进 <nav></nav>，反而会让读屏器误判为“主导航”，干扰用户快速跳转。
- 典型适用场景：顶部横栏菜单、左侧垂直菜单、面包屑（
<nav aria-label="Breadcrumb"></nav>） - 页脚链接建议用
<footer></footer>直接包裹，或拆分为<section></section>+<h2></h2>（如“法律条款”“支持资源”） - 评论区的“上一页｜下一页”分页链接，属于内容操作，应放在
<article></article>或<section></section>内，不用<nav></nav>
真正难的不是记住哪些标签可用，而是判断“这个内容在机器眼中该扮演什么角色”。比如一个带搜索框的顶部栏，<header></header> 是必须的，但搜索框本身是否要包进 <form></form> 并设 role="search"，取决于它是否构成独立搜索功能——这已经超出标签选择，进入语义建模层面了。
