html标题标签h1到h6是文档语义骨架，h1必须唯一代表页面核心主题，h2–h6须严格逐级嵌套不可跳级，动态生成需校验level，纯视觉需求应由css实现而非滥用标题标签。
HTML 标签不是装饰用的，它们直接决定浏览器怎么理解内容、屏幕阅读器怎么朗读、搜索引擎怎么索引——结构错了，语义就崩了，后续所有优化都打折扣。
为什么 <h1></h1> 到 <h6></h6> 不能乱用
标题层级不是字体大小开关，而是文档大纲的骨架。搜索引擎和辅助技术靠它生成导航树；用户用键盘 Tab 或阅读器快捷键跳转时，也依赖这个层级。
-
<h1></h1>应该全页唯一，代表页面核心主题（比如文章标题、产品主名），不是“为了加粗”随便塞一个 -
<h2></h2>是<h1></h1>的直接子级，比如章节名；<h3></h3>是<h2></h2>的子级，不是“看起来小一点就用它” - 跳级使用（比如
<h1></h1>后直接<h4></h4>）会让大纲断裂，部分阅读器会忽略或报错 - 纯视觉需求（比如想让某段文字大且粗）该用 CSS 控制，而不是硬套
<h2></h2>
<header></header>、<main></main>、<footer></footer> 不是 <div> 换个名字
<p>这些语义化标签告诉浏览器：“这块内容在整页中的角色是什么”。不用它们，<code><div class="header"> 对机器来说只是个无意义盒子。
<ul>
<li>
<code><header></header> 必须包裹页面或区块的引导性内容（如 logo、<h1></h1>、主导航），不能塞广告位或次要操作按钮
<main></main> 全页只能有一个，且不能嵌套在 <article></article> 或 <aside></aside> 内——它是页面主体内容的容器，不是“主要内容区域”的视觉划分<footer></footer> 属于它最近的祖先节（sectioning content），不一定是页面最底下；比如一个 <article></article> 自带 <footer></footer> 放作者信息，和页面底部的版权 <footer></footer> 是两回事嵌套错误比标签没用更危险
浏览器会尝试修复错误嵌套，但修复逻辑因引擎而异，结果不可控。DOM 树一旦歪了，JS 获取元素、CSS 选择器匹配、无障碍 API 解析都会出偏差。
- 禁止把块级元素（如
<p></p>、<div>）塞进行内元素（如 <code><span></span>、<a></a>）里——<a><p>文本</p></a>是非法结构 -
<section></section>必须有明确的主题，不能只为了加边框或背景就套一层；空的<section></section>或仅含<div> 的 <code><section></section>会稀释语义 -
<article></article>要能独立分发（比如 RSS 订阅、社交分享），新闻条目、博客正文适合，但侧边栏推荐列表、页脚链接组不适合
真正难的不是记住标签名，而是每次写标签前问一句：这个元素在文档中承担什么角色？机器和人会怎么理解它？——答案不对，再漂亮的样式也救不回结构缺陷。
