<h1>到<h6>按内容层级而非数字顺序使用，<h1>为唯一主标题，<h2>起子章节作用，跳级会破坏语义；<mark>等标签应理解为语义动词而非样式指令；<p>表完整语义段落，<div>无语义纯容器；表话题切换，仅用于同一句内换行。
<h1>到<h6>不是靠背数字顺序记的，而是看它在页面里“管多大一块内容”——<h1>是整页唯一主标题，<h2>是它的直接子章节，<h3>再往下拆解。错用层级（比如跳着用<h1>→<h3>）不会让浏览器报错，但屏幕阅读器会跳过逻辑断层，Lighthouse 直接标红“Heading levels should only increase by one”。
别记标签名，盯住语义动词
把标签当动作来理解，比记英文缩写更稳：
-
<strong>= “这句话你必须听清”，不是“加粗显示”；删掉它，语气就弱了 -
<em>= “这个词你要重读”，不是“斜体好看”；换掉它，语调就平了 -
<mark>= “这段我手写圈出来了”，不是“高亮配色”；没它，重点就没了 -
<small>= “这是附带说明，可不读”，不是“字号调小”；它语义上等同于脚注，搜索引擎会降权处理
Chrome 的 Accessibility 面板一开，这些标签立刻暴露：没<strong>的“重要提示”会被读成普通句子，<small>里的版权信息可能被跳过。
<p>和<div>混用是最大隐形坑
很多人写段落全用<div>，因为“看着都一样”。但实际差异极大：
立即学习“前端免费学习笔记（深入）”；
-
<p>自带上下外边距、段首缩进（CSS 可改），且明确告诉机器：“这是一段完整语义单元” -
<div>是纯容器，没有默认样式，也没有语义——搜索引擎不认为它承载正文，屏幕阅读器不把它当段落朗读 - 用
<div>包文字，W3C Validator 会警告“Section lacks heading”，Lighthouse 报“Document doesn't have a main landmark”
实操判断法：删掉这块内容，主干逻辑还连得上吗？如果删了它，前后两段话突然变得不衔接，那它大概率该是<p>，不是<div>。
<hr>和<br>别再靠“看起来像”选
这两个单标签常被误用，关键区别不在视觉，而在语义断点：
-
<hr>= “话题切换”，比如博客里正文结束、评论区开始；它代表一个语义分隔，不是画条线 -
<br>= “同一句话里换行”，比如诗歌、地址、歌词；它不打断语义流，只控制排版位置 - 用
<br>分隔两个段落，HTML5 规范直接视为错误；W3C Validator 报“<br>inside<p>where not expected” - 现代 CSS 推荐用
margin替代<hr>做视觉分隔，但语义仍需保留——可用<hr>配合aria-hidden="true"隐藏其辅助功能，而非删掉
真正容易被忽略的是：<hr>必须独立成行，不能塞在<p>里面；而<br>只能出现在短语级内容中，比如
<p>上海<br>浦东新区</p>合法，
<p>第一段<br>第二段</p>违法。 
