<main>必须且只能出现一次，是页面唯一主干道，须为<body>直接子元素；重复或嵌套会破坏屏幕阅读器跳转、触发Lighthouse报错并稀释SEO权重。

新手写 HTML 语义化标签，最容易踩的坑不是“不会用”，而是“以为用了就对了”——比如把 <section></section> 当成高级 <div> 套进去，结果文档大纲乱套、屏幕阅读器跳错位置、SEO 权重被稀释。 <h3>什么时候该用 <code><article></article> 而不是 <section></section>

关键看内容能否脱离当前页面独立存在、被 RSS 抓取或单独分享。

• <article></article>：适合博客正文、新闻稿、微博卡片、商品详情页——复制整段 HTML 到新文件里，它自己就能讲清楚一件事
• <section></section>：适合“安装步骤”“评论区”“相关推荐”这类依附于当前页面逻辑才成立的区块；单独拎出来会让人摸不着头脑
• 常见错误：<section></section> 套导航栏、<article></article> 包整个首页——前者没独立性，后者语义过载，浏览器会把它当“一篇内容”而非“一个页面”

<header></header> 和 <nav></nav> 能不能嵌套？怎么嵌才合理？

能嵌，但必须符合层级逻辑：一个 <header></header> 里可以有多个 <nav></nav>（比如网站顶部主导航 + 文章顶部操作栏），但 <nav></nav> 不能包 <header></header>。

• 正确结构：<header><h1>标题</h1> <nav>菜单</nav></header>
• 错误结构：<nav><header>……</header></nav> —— 导航是功能区域，不是“某个头部的内容”
• 注意：<header></header> 不限于页面顶部；每篇 <article></article> 或 <section></section> 都可自带 <header></header>（含小标题、作者、时间）

为什么 <main></main> 必须且只能出现一次？

因为它是给辅助技术（如屏幕阅读器）和搜索引擎指路的“唯一主干道”。重复或遗漏都会直接破坏可访问性。

Article To Html

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

下载

立即学习“前端免费学习笔记（深入）”；

• 浏览器控制台执行 document.querySelector('main') 应该稳定返回一个元素；如果返回 null，读屏用户可能直接跳过全文
• 不要用 <main></main> 包侧边栏、广告、页脚链接——这些属于 <aside></aside> 或 <footer></footer>
• 兼容旧浏览器时，仅靠 CSS 添加 display: block 不够；需配合 role="main" 属性兜底

裸奔时（CSS 失效）还能看出结构吗？

这是检验语义是否落地的终极测试。打开浏览器开发者工具，禁用所有样式，观察是否仍能清晰分辨：哪是标题、哪是导航、哪是正文、哪是页脚。

• 如果只剩一堆无缩进、无分隔的纯文本，说明语义标签没起作用——可能全用了 <div>，或 <code><h2></h2> 全塞在 <section></section> 外面导致大纲断裂
• <strong></strong> 和 <em></em> 要比 <b></b> 和 <i></i> 优先；前者传达“重要性”和“语气”，后者只是样式残留
• 别依赖类名猜结构：<div class="footer"></div> 在裸奔时就是个普通段落；而 <footer></footer> 即使没样式，也会被解析为页脚语义

真正难的不是记住标签名，而是每次敲下 <section></section> 前，多问一句：“这个区块，离开当前页面还能讲得清自己是谁吗？”