关键在于正确使用语义化标签而非堆砌。浏览器依据语义标签构建可访问性树与文档大纲，并自动映射对应aria role；每个标签有明确功能边界与约束，如必须唯一且不可嵌套，支持独立分发；标题层级需与语义结构配合生成可靠大纲；增强型元素（如、）提供机器可读信息；应避免用替代原生标签或滥用等破坏语义。

关键在于用对标签，而不是堆砌标签。浏览器解析内容时，会根据语义化元素自动构建可访问性树（Accessibility Tree）和文档大纲（Outline），并赋予对应 ARIA role。真正起作用的不是视觉样式，而是标签背后的语义含义。

明确角色边界：每个语义标签都对应一个功能定位

浏览器内部有一套语义映射表，比如 <nav></nav> 会被识别为 role="navigation"，<main></main> 对应 role="main" 且具有唯一性约束，<article></article> 触发 role="article" 并支持独立分发。这些 role 是屏幕阅读器跳转、搜索引擎加权的基础。

• <header></header> 和 <footer></footer> 不限数量，但只在 或 <section></section> 等节元素内才形成局部上下文；脱离节容器的 <header></header> 默认属于整个页面
• <main></main> 必须唯一，且不能嵌套在 <article></article>、<aside></aside>、<nav></nav> 或 <footer></footer> 中，否则会被忽略或降级处理
• <article></article> 是“可离线存在”的内容单元，RSS 订阅、打印预览、分享卡片等场景下，它能被单独提取并保持语义完整

配合标题层级，生成可靠的内容大纲

浏览器和辅助技术依赖 <h1></h1>–<h6></h6> 的嵌套关系构建文档结构。语义标签本身不定义层级，但与标题组合后会强化逻辑分组。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 每个 <section></section> 或 <article></article> 应包含至少一个标题（<h2></h2> 及以上），否则可能被忽略为普通段落
• <main></main> 内部的首个标题通常作为整页主标题，建议用 <h1></h1>；其子 <section></section> 则用 <h2></h2>，依此类推，避免跳跃（如 <h1></h1> 后直接 <h3></h3>）
• <nav></nav> 中的链接无需标题，但若含面包屑导航，可用 <ol></ol> + <li> 结构，并通过 aria-label="Breadcrumb" 明确用途

补充机器可读信息，让时间、媒体、联系人更易解析

基础语义标签解决结构问题，而增强型语义元素则提供细粒度数据，帮助浏览器和搜索引擎提取关键事实。

• <time datetime="2026-06-14">今天</time> 让发布时间可被爬虫准确抓取，比纯文本“2026年6月14日”更可靠
• <figure><img><figcaption>前端架构演进图</figcaption></figure> 将图像与其说明绑定，既提升 SEO 图片描述权重，也方便屏幕阅读器朗读上下文
• <address></address> 仅用于最近的 <article></article> 或 的联系信息，不是所有地址都适用——例如电商商品页的发货地就不该用它

避开常见干扰项，确保语义不被覆盖

有些写法看似合理，实则会削弱甚至破坏语义效果。

• 不要用 <div role="main"> 替代 <code><main></main>，前者绕过原生校验，可能在旧版浏览器或某些读屏器中失效
• 避免在 <nav></nav> 里塞大量非导航内容（如广告、搜索框），这会让辅助工具误判导航意图
• <aside></aside> 不等于“右侧栏”，它强调的是内容相关性弱于主文——一篇技术文章旁的“作者 GitHub 主页链接”适合，但“同类文章推荐”更适合放在 <section></section> 中