标题标签是语义骨架而非字号放大器，应按逻辑层级使用h1–h6构建内容结构，h1唯一且代表主主题，不可跳级或滥用；title与h1功能不同，需分别合理设置。
标题标签不是“字号放大器”，而是语义骨架
HTML 的 <h1> 到 <h6> 不是拿来调大小的，浏览器默认样式只是辅助呈现；它的核心作用是构建页面内容的逻辑层级——就像论文里的章、节、小节。搜索引擎、屏幕阅读器、甚至开发者工具都依赖这个结构做判断。
- 一个页面只能有一个
<h1>（通常是主标题），它代表整个文档的主题，不是“最大的字” -
<h2>应该是<h1>的直接子级，比如章节标题；<h3>是<h2>下的子主题，不能跳级（例如<h1>后直接写<h3>） - 用 CSS 改变字号不会破坏语义，但用
<h6>写“看起来很大”的副标题，等于告诉机器“这是最不重要的一行字”
别把 <title> 和 <h1> 搞混
<title> 在 <head> 里，只出现在浏览器标签页和书签中，用户看不到它在页面上；<h1> 在 <body> 里，是用户真正读到的第一个视觉标题。
- SEO 中两者都关键：
<title>影响搜索结果展示，<h1>帮助理解页面正文结构 - 常见错误：把
<title>当成页面头部写进<body>，或者干脆漏掉<h1>，只靠 CSS 样式“模拟”标题 - 二者内容可以相似，但不必完全一致；
<title>可含品牌词（如“登录页 | MySite”），<h1>应聚焦当前页核心内容（如“欢迎登录”）
<h1> 放哪儿？别塞进导航或页脚
标题标签必须放在有意义的内容上下文中，不能为了“有”而硬加。如果某个 <h1> 出现在侧边栏、页脚、或重复出现在每个卡片里，它就失去了语义价值，还可能干扰辅助技术。
- 动态页面（如 React/Vue）容易在组件中各自定义
<h1>，结果整页出现多个——应由最外层路由组件统一控制 - CMS 或模板系统里，常有人把网站 logo 链接包上
<h1>，这不对；logo 不是当前页面主题，首页可设<h1>，内页必须换 - 没有标题？宁可不用
<h1>，也别用空标签或隐藏文本凑数；可用<header>+ 普通<p>或<div>配合 ARIA 属性替代
兼容性与现代实践：别怕用 <h2> 开头
老教程常说“必须从 <h1> 开始”，但 W3C 规范明确允许跳过中间层级（如 <h1> 后接 <h3>），只要结构合理。更现实的问题是：很多 CMS 输出的 HTML 本身就不规范，前端需谨慎处理。
立即学习“前端免费学习笔记（深入）”；
- 不要为“修复”语义而强行插入不可见的
<h1>（比如display: none或aria-hidden="true"），这反而会让屏幕阅读器困惑 - SSR/静态站点中，确保服务端渲染出的标题层级真实反映内容逻辑，而不是靠 JS 后补
- 检查方式很简单：用浏览器开发者工具打开“Accessibility”面板，看“Heading levels”是否形成合理树状结构
<h2> 下面没跟段落或列表，<h3> 孤零零挂在那儿，这种“标题脱钩”比用错标签更难被发现，也更影响可访问性。 
