在网页开发中，div、p、img是最常被使用的基础HTML标签。它们分别承担布局容器、文本段落、图像嵌入的职责。虽然浏览器对错误写法有一定容错能力，但遵循规范书写能显著提升代码可读性、可访问性与搜索引擎友好度。下面我们先看一张示意图片，再从具体规范展开。
一、div标签的书写规范
div是一个块级、无语义的容器标签，主要用于配合CSS进行页面布局或逻辑分组。它本身不表示任何特定内容含义，因此不应替代具有语义的标签（如header、article）。在书写时，div必须成对出现，即<div>开始，</div>结束，中间可放置文本、行内元素或其他块级元素。
一个常见误区是滥用div嵌套，例如用多层div包裹本来可以用语义标签表达的内容。规范做法是将布局容器与语义结构分离：仅当没有更合适的语义标签时才使用div。以下代码展示了合理的div用法，它作为一个卡片容器，内部使用p标签承载段落。
<div class="card"> <p>这是卡片内的描述文字，使用p标签而非继续嵌套div。</p> </div>
div可以设置id或class属性以便样式控制，但不应写入无关内容属性。由于div默认没有内外边距以外的特殊样式，所有视觉表现都依赖外部CSS，因此保持标签干净、只负责结构分隔，是书写时的核心原则。
二、p标签的书写规范
p标签用于表示文本段落，是块级元素，代表一段独立的内容。根据HTML标准，p标签内部只能包含文本以及行内元素（如strong、em、a、span），不能嵌套块级元素，包括另一个p标签或div。如果强行在p中写入块级标签，浏览器解析时会自动提前闭合p，导致结构错乱。
很多初学者会在p里直接放图片或分区，这是不规范的做法。若需在段落附近展示图像，应将img放在p之外，或用figure标签配合figcaption。下面的示例演示了正确的段落书写：仅包含文字与行内强调标签，结构清晰且能被屏幕阅读器正确识别。
<p>规范书写段落时，可以使用<strong>强调词</strong>，但不能放入块级元素。</p>
此外，p标签应当用于真正的内容段落，而非作为布局间距工具。用多个空p撑开高度的做法既不符合语义，也不利于维护。需要间距时应使用CSS的margin或padding属性，保持p的纯粹文本语义。
三、img标签的书写规范
img是空元素，用于嵌入图像，它不需要结束标签（在HTML5中写为<img>即可，XHTML中写为<img />）。书写img时，src属性指定图像地址，alt属性提供替代文本，后者在图片加载失败或无障碍访问时至关重要，属于必填属性。忽略alt不仅损害可访问性，也会影响SEO图像检索。
width与height属性可显式声明尺寸，减少页面抖动；loading="lazy"能实现懒加载优化性能。以下示例展示了一个规范的img标签，包含必要属性与懒加载设置，注意所有小于号与大于号都做了转义以符合代码块要求。
<img src="https://ipipp.com/demo.jpg" alt="示例图片" width="800" height="400" loading="lazy">
需要区分的是，img是替换元素，它本身是行内块级表现，常配合p或figure使用，但绝不应当被当作段落内容塞进p的内部作为块级嵌套。正确的方式是将img独立成行，或置于figure容器中，从而维持文档结构的合法性。
四、常见错误写法对照
为了更直观地理解规范，我们整理出三种标签的典型错误与正确对照。这些错误在浏览器中可能照常显示，但会在校验工具中报警，并在特定设备或爬虫下引发问题。
| 标签 | 错误写法 | 正确写法 |
|---|---|---|
| div | <div><div><p>文字</p></div></div>无意义多层嵌套 | <div class="wrap"><p>文字</p></div> |
| p | <p><div>块级</div></p>非法嵌套 | <p>段落文字</p><div>块级</div> |
| img | <img src="a.jpg">缺少alt | <img src="a.jpg" alt="描述"> |
通过上表可以看出，规范书写并不复杂，关键在于尊重标签的语义边界。在编写HTML时，建议配合W3C校验工具实时检查，逐步形成正确的标签使用直觉，为后续复杂页面开发打下稳固基础。