–

嵌套或跳级使用会破坏语义结构

浏览器不报错，但搜索引擎和屏幕阅读器会认为内容逻辑断裂。比如直接从

跳到

，中间缺

，会导致SEO权重分散、无障碍导航混乱。

常见错误现象：<h1>首页</h1> <h4>关于我们</h4>（跳级）；<h2><h3>子标题</h3></h2>（嵌套）

必须按层级顺序使用，h1 → h2 → h3…不可跳跃，也不可嵌套
每页最多一个h1，用于主标题；h2作为一级章节，h3为二级子节
用开发者工具的“Accessibility”面板检查 heading level 是否连续

`<p></p>`未闭合或被块级元素意外包裹

<p></p>是严格闭合的块级标签，漏写

会让后续所有内容被浏览器“吞进”段落里——比如页脚突然出现在文章末尾的<p></p>内部。

更隐蔽的坑是把它当容器误用：<p></p> <div>内容</div>

在HTML5中虽不报错，但违反规范：块级元素不能作为<p></p>的子元素。

写完<p></p>立刻补，别依赖浏览器自动修复
需要包裹块级内容时，改用<div>或语义化标签如<code><section></section>
VS Code 中开启 HTMLHint 插件，能实时标出<p></p>内含<div>的警告 <h3> <code><strong></strong>和<em></em>混淆语义，当成纯样式标签用
很多人只记得<strong></strong>加粗、<em></em>斜体，就拿它们替代<span style="font-weight:bold"></span>——这丢掉了关键语义：前者表示“强重要性”和“强调语气”，后者只是视觉变化。

错误示例：<strong>¥99</strong>（价格不是重要内容，只是样式突出）；<em>点击确认</em>（按钮文字不是语气强调）
- <strong></strong>适用于警告、关键数据、法律条款等需强制用户注意的内容
- <em></em>适用于朗读时需重音处理的词，比如“我不是说*你*错了，是说方案错了”
- 纯样式需求，请用<span></span> + CSS，避免误导辅助技术
<br>和<hr>滥用导致结构松散难维护

<br>本意是段内换行（如诗歌、地址），<hr>是主题分隔线。但新手常拿它们代替布局手段：用一堆<br>撑间距，或用<hr>代替<section></section>的视觉分割。

后果明显：CSS无法统一控制<br>间距；<hr>语义上不代表新内容区块，SEO和可访问性全失效。
- 垂直间距一律用margin或padding，禁用<br>做布局
- 区块分隔优先用<section></section> + CSS 边框/间距，<hr>仅用于同一主题下的自然停顿（如演讲稿段落间）
- 检查代码时搜索<br>，若出现在<p></p>外或连续多个，基本就是误用
最容易被忽略的是：这些标签的语义不是“可有可无的装饰”，而是页面骨架的一部分。一旦写错，问题不会立刻炸出来，而是在SEO收录、屏幕阅读器播报、甚至未来用Web Components重构时才集中爆发。