关键在于正确使用语义化标签而非堆砌。浏览器依据语义标签构建可访问性树与文档大纲，并自动映射对应ARIA role；每个标签有明确功能边界与约束，如<main>必须唯一且不可嵌套，<article>支持独立分发；标题层级需与语义结构配合生成可靠大纲；增强型元素（如<time>、<figure>）提供机器可读信息；应避免用<div role>替代原生标签或滥用<aside><nav>等破坏语义。
关键在于用对标签，而不是堆砌标签。浏览器解析内容时，会根据语义化元素自动构建可访问性树（Accessibility Tree）和文档大纲（Outline），并赋予对应 ARIA role。真正起作用的不是视觉样式，而是标签背后的语义含义。
明确角色边界：每个语义标签都对应一个功能定位
浏览器内部有一套语义映射表，比如 <nav> 会被识别为 role="navigation"，<main> 对应 role="main" 且具有唯一性约束，<article> 触发 role="article" 并支持独立分发。这些 role 是屏幕阅读器跳转、搜索引擎加权的基础。
-
<header>和<footer>不限数量，但只在<body>或<section>等节元素内才形成局部上下文；脱离节容器的<header>默认属于整个页面 -
<main>必须唯一，且不能嵌套在<article>、<aside>、<nav>或<footer>中，否则会被忽略或降级处理 -
<article>是“可离线存在”的内容单元，RSS 订阅、打印预览、分享卡片等场景下，它能被单独提取并保持语义完整
配合标题层级，生成可靠的内容大纲
浏览器和辅助技术依赖 <h1>–<h6> 的嵌套关系构建文档结构。语义标签本身不定义层级，但与标题组合后会强化逻辑分组。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每个
<section>或<article>应包含至少一个标题（<h2>及以上），否则可能被忽略为普通段落 -
<main>内部的首个标题通常作为整页主标题，建议用<h1>；其子<section>则用<h2>，依此类推，避免跳跃（如<h1>后直接<h3>） -
<nav>中的链接无需标题，但若含面包屑导航，可用<ol>+<li>结构，并通过aria-label="Breadcrumb"明确用途
补充机器可读信息，让时间、媒体、联系人更易解析
基础语义标签解决结构问题，而增强型语义元素则提供细粒度数据，帮助浏览器和搜索引擎提取关键事实。
立即学习“前端免费学习笔记（深入）”；
-
<time datetime="2026-06-14">今天</time>让发布时间可被爬虫准确抓取，比纯文本“2026年6月14日”更可靠 -
<figure><img><figcaption>前端架构演进图</figcaption></figure>将图像与其说明绑定，既提升 SEO 图片描述权重，也方便屏幕阅读器朗读上下文 -
<address>仅用于最近的<article>或<body>的联系信息，不是所有地址都适用——例如电商商品页的发货地就不该用它
避开常见干扰项，确保语义不被覆盖
有些写法看似合理，实则会削弱甚至破坏语义效果。
- 不要用
<div role="main">替代<main>，前者绕过原生校验，可能在旧版浏览器或某些读屏器中失效 - 避免在
<nav>里塞大量非导航内容（如广告、搜索框），这会让辅助工具误判导航意图 -
<aside>不等于“右侧栏”，它强调的是内容相关性弱于主文——一篇技术文章旁的“作者 GitHub 主页链接”适合，但“同类文章推荐”更适合放在<section>中
