HTML语义标签不可替代，必须严格按规范使用：h1唯一且层级嵌套，strong/em表语义强调而非样式，small/mark/del各司其职，p用于完整段落，br处理行内换行，hr分隔逻辑区块。
<p>、<h1>～<h6>、<strong>、<em>、<small>、<mark> 这些标签不是“可有可无的装饰”，它们直接参与语义解析、SEO 排名和辅助技术（如屏幕阅读器）的理解。用错或滥用，轻则影响可访问性，重则被搜索引擎降权。
标题层级必须严格嵌套，<h1>只能出现一次
浏览器和爬虫依赖标题标签的逻辑顺序构建页面大纲。<h1>代表主内容主题，全文仅应有一个；后续标题应按级别递进，不能跳级（比如 <h2> 后直接写 <h4>）。
- 正确：
<h1>→<h2>→<h3> - 错误：
<h1>→<h3>（跳过<h2>） - 错误：
<h1>出现两次（破坏唯一性语义） - 视觉样式应交由 CSS 控制，不要为“看起来更大”而误用
<h1>
<strong> 和 <em> 不等于加粗/斜体，而是语义强调
<strong> 表示内容具有强重要性（如警告、关键结论），<em> 表示语气上的强调（如反语、重音）。它们默认渲染为加粗/斜体，但本质是语义标签，不是样式标签。
- 用
<b>或<i>仅当纯视觉需求且无语义（比如品牌名中的小写字母、技术术语中的拉丁斜体） - 屏幕阅读器对
<strong>会加重语气，对<em>会改变语调；而<b>/<i>通常无特殊播报 - 避免嵌套
<strong>多层——强调本身已是极限，再套一层不增加语义价值
<small>、<mark>、<del> 都有明确场景，别当“通用小字”用
这些标签各自承担不可替代的语义角色：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<small>专用于法律条款、版权信息、免责声明等“次要但需保留”的文本，不是“想让字变小就套上” -
<mark>表示在当前上下文中需要高亮的引用片段（如搜索结果中匹配关键词），不是装饰性荧光笔 -
<del>必须配合<ins>使用，表示“被删除的内容 + 替换的新内容”，单独用<del>会让人困惑修改意图 - 所有这些标签的默认样式可被 CSS 覆盖，但语义不能靠 class 模拟——
<span class="deleted">不会被辅助技术识别为删除内容
段落 <p> 不是“换行工具”，<br> 才是强制换行
新手常把 <p> 当作排版换行符反复使用，这是典型误用。每个 <p> 应包裹一个完整语义段落，而非每行文字都套一个 <p>。
-
<p>自带上下 margin，连续多个<p>会造成过大空白，破坏节奏 - 诗歌、地址、歌词等需保留换行但又属于同一段落的场景，用
<br>插入换行，而非拆成多个<p> -
<hr>是主题分隔线，不是装饰横线；它应当出现在两个逻辑区块之间，而非段落内部随意添加
真正难的不是记住标签名，而是每次敲下 <h2> 时，心里清楚它在告诉机器：“接下来是一级主题下的二级子主题”，而不是“我要在这里加个大点的字”。语义一旦松动，后续的可访问性、SEO、维护成本都会连锁反应。
