<main>必须唯一且为<body>直接子元素，因其是页面唯一语义锚点；嵌套或重复会导致辅助技术误判、SEO降权及Lighthouse报错。
HTML语义化标签本身没有“绝对优劣”，只有“用对”或“用错”——误用比不用更伤 SEO、可访问性和团队协作。
为什么只能出现一次，且不能嵌套在里
浏览器和屏幕阅读器把 <main> 当作全页唯一内容焦点。嵌套在 <header> 或 <nav> 中，等于告诉辅助工具“导航栏里藏着主内容”，逻辑冲突；重复出现会让解析器无法判断哪块是真正核心。
-
<main>必须是<body>的直接子元素（或仅嵌套在<article>内） - 服务端模板或 CMS 渲染时容易因条件分支漏判，导致多个
<main>同时输出 - DevTools 的 Accessibility 面板会直接标红提示 “Multiple main landmarks”
<section> 和 <article> 的核心区别不是内容长短
区分关键在“独立分发能力”：是否能脱离当前页面单独存在、被 RSS 抓取、被搜索引擎作为独立条目索引。
-
<article>：博客正文、新闻稿、用户评论——带完整元信息（作者、时间、标题），可复用 -
<section>：文章里的“背景介绍”“技术原理”“总结”——主题明确但依赖上下文，无独立语义 - 常见错误：把整页产品列表包进一个
<section>，其实每条商品都该是独立的<article>
标题跳级（<h1> → <h4>）不是样式问题，是结构断裂
辅助技术和 SEO 爬虫靠 heading 层级建立内容树。跳级会让 <h4> 被识别为新章节起点，上层内容被跳过或归类错误。
立即学习“前端免费学习笔记（深入）”；
- 动态渲染场景最危险：JS 插入的标题没校验已有层级，比如从 CMS 拿到的
<h3>直接塞进<main>，而页面已有<h1> - 用
remark-lint-heading-increment在构建时拦截 Markdown 渲染出的跳级 HTML - 别用 CSS 把
<h2>改成小字号假装是<h4>——语义和视觉必须一致
alt 和 <label> 缺失不是“体验不好”，是功能不可用
当图片不加载、屏幕阅读器启用、或 JS 失效时，<img alt=""> 没 alt 就等于空白，<input> 没 <label for="id"> 就等于无法聚焦——这不是降级，是缺失。
-
alt=""仅适用于纯装饰图（如分隔线），功能性图片必须描述作用或内容 - 表单控件优先用显式
<label for="id">，避免隐式包裹（<label><input></label>在部分旧浏览器中不兼容） - CI 流程里加 HTML validator 检查，比如使用
html-validate或 Lighthouse 的 Accessibility audit
最容易被忽略的是：语义化不是写完再补的“加分项”，而是从第一行 <html> 开始就要决策的结构前提。一旦 DOM 树生成，错误的语义就已固化在可访问性树和爬虫索引路径里，后期修复成本远高于初始设计投入。
