HTML标签须按语义正确使用：标题需严格层级嵌套，<p>表段落而非换行，<strong>/<em>表强调而非样式，<small>/<mark>/<u>有特定语义用途；误用将损害可访问性、SEO及维护性。
<h1> 到 <h6> 是语义化标题，不是“加大字号”的装饰工具；<p> 是段落容器，不是换行符；用错就等于把结构当样式使，后续维护和 SEO 都会出问题。
标题标签 <h1>–<h6> 必须按层级嵌套
浏览器和屏幕阅读器依赖标题层级理解内容结构。<h1> 应全页唯一（通常为页面主标题），<h2> 表示一级子节，<h3> 是 <h2> 下的子节，依此类推。跳着用（比如 <h1> 后直接 <h4>）会破坏可访问性树。
常见错误现象：
- 用
<h2>当副标题、<h3>当小标题，但中间缺了<h2>分组，导致大纲混乱 - 为“视觉效果”滥用
<h1>多次（如每个卡片都塞一个<h1>）
实际建议：
立即学习“前端免费学习笔记（深入）”；
- 先画内容大纲，再选对应层级标签
- 用浏览器开发者工具的“大纲视图”（Elements → Accessibility → Outline）实时验证
- 不要靠 CSS 改变
<h1>的字号来“降级”它——该用<h2>就用<h2>
<p> 不是 <br>，段落必须有语义边界
<p> 表示一个完整、独立的文字段落，自带上下外边距；<br> 只是强制换行，无任何语义。混用会导致：
- 无障碍工具无法识别段落分隔，读屏时连成一片
- CSS 重置或响应式断点失效（比如想对所有段落统一加首行缩进，
<br>完全不响应） - 复制粘贴时丢失段落空行，变成一整块文字
正确做法：
- 每一段自然成文的内容，都用
<p>包裹 - 纯排版换行（比如地址分行、诗歌断句）才用
<br> - 连续多个
<br>（如<br><br>）基本是结构设计缺陷，应改用 margin 或<div>分隔
<strong> 和 <b>、<em> 和 <i> 语义不同
前者强调内容重要性或语气变化，后者仅表示“视觉加粗/斜体”，无语义权重。搜索引擎和读屏软件只响应 <strong> 和 <em>。
典型误用场景：
- 产品名、品牌词用
<b>加粗（应使用<strong>，因其具有强调含义） - 外语短语、术语用
<em>（应优先用<i>，W3C 明确将其定义为“不同语境下的文字”，如拉丁名、船名） - 用
<strong>实现图标旁文字加粗，但其实只是 UI 样式需求（此时应改用<span>+ class）
简单判断法：删掉标签后，句子原意是否被削弱？如果是，用 <strong>/<em>；如果只是“看起来要突出”，用 CSS。
<small>、<mark>、<u> 这些标签仍有明确用途
它们不是过时的“装饰残留”，而是 HTML5 明确定义的语义标签：
-
<small>：用于免责声明、版权信息、法律条款等次要但需保留的文本（不是“缩小字体”的通用手段） -
<mark>：高亮用户当前搜索关键词或文档中需要引起注意的片段（语义上等同于荧光笔标记） -
<u>：HTML5 已弃用其“下划线”旧含义，现专用于拼写错误提示（配合spellcheck="false"使用）或中文排版中的人名、地名下划线（需搭配 lang 属性）
容易被忽略的点：这些标签默认样式可被 CSS 覆盖，但语义不可替代。比如用 <span class="highlight"> 替代 <mark>，就失去了机器可读的“这是高亮内容”这一层含义。
