HTML常用文本标签详解及用法总结-html教程-PHP中文网

html语义标签不可替代，必须严格按规范使用：h1唯一且层级嵌套，strong/em表语义强调而非样式，small/mark/del各司其职，p用于完整段落，br处理行内换行，hr分隔逻辑区块。

html常用文本标签详解及用法总结

<p></p>、<h1></h1>～<h6></h6>、<strong></strong>、<em></em>、<small></small>、<mark></mark> 这些标签不是“可有可无的装饰”，它们直接参与语义解析、SEO 排名和辅助技术（如屏幕阅读器）的理解。用错或滥用，轻则影响可访问性，重则被搜索引擎降权。

标题层级必须严格嵌套，`<h1></h1>`只能出现一次

浏览器和爬虫依赖标题标签的逻辑顺序构建页面大纲。<h1></h1>代表主内容主题，全文仅应有一个；后续标题应按级别递进，不能跳级（比如 <h2></h2> 后直接写 <h4></h4>）。

正确：<h1></h1> → <h2></h2> → <h3></h3>
错误：<h1></h1> → <h3></h3>（跳过 <h2></h2>）
错误：<h1></h1> 出现两次（破坏唯一性语义）
视觉样式应交由 CSS 控制，不要为“看起来更大”而误用 <h1></h1>

`<strong></strong>` 和 `<em></em>` 不等于加粗/斜体，而是语义强调

<strong></strong> 表示内容具有强重要性（如警告、关键结论），<em></em> 表示语气上的强调（如反语、重音）。它们默认渲染为加粗/斜体，但本质是语义标签，不是样式标签。

用 <b></b> 或 <i></i> 仅当纯视觉需求且无语义（比如品牌名中的小写字母、技术术语中的拉丁斜体）
屏幕阅读器对 <strong></strong> 会加重语气，对 <em></em> 会改变语调；而 <b></b>/<i></i> 通常无特殊播报
避免嵌套 <strong></strong> 多层——强调本身已是极限，再套一层不增加语义价值

`<small></small>`、`<mark></mark>`、`<del></del>` 都有明确场景，别当“通用小字”用

这些标签各自承担不可替代的语义角色：

<small></small> 专用于法律条款、版权信息、免责声明等“次要但需保留”的文本，不是“想让字变小就套上”
<mark></mark> 表示在当前上下文中需要高亮的引用片段（如搜索结果中匹配关键词），不是装饰性荧光笔
<del></del> 必须配合 <ins></ins> 使用，表示“被删除的内容 + 替换的新内容”，单独用 <del></del> 会让人困惑修改意图
所有这些标签的默认样式可被 CSS 覆盖，但语义不能靠 class 模拟——<span class="deleted"></span> 不会被辅助技术识别为删除内容

段落 `<p></p>` 不是“换行工具”，`<br>` 才是强制换行

新手常把 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 当作排版换行符反复使用，这是典型误用。每个 <p></p> 应包裹一个完整语义段落，而非每行文字都套一个 <p></p>。