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