HTML5中、、等是void元素，必须自闭合（不可写）；、、等承载内容的标签必须成对闭合，否则导致DOM解析错乱、CSS失效或脚本不执行。
<img alt="HTML中单标签和双标签的分类与使用场景" >、<br>、<input> 这类标签不能写成 <img alt="HTML中单标签和双标签的分类与使用场景" >，而 <p></p>、<div>、<code><span></span> 必须配对闭合——这不是随意约定，是 HTML5 规范对语义和解析行为的硬性约束。
哪些标签必须是单标签？
HTML5 中明确要求不带内容、仅靠属性起作用的元素，必须用自闭合形式（<tag></tag> 或 <tag></tag>），浏览器会按空元素处理。写成双标签会导致解析异常或被自动修正：
-
<img src="a.jpg" alt="HTML中单标签和双标签的分类与使用场景" >合法；<img src="a.jpg" alt="HTML中单标签和双标签的分类与使用场景" >会被浏览器忽略结束标签，且 W3C 验证失败 -
<meta charset="utf-8">正确；加不但多余，还可能干扰文档编码识别 -
<hr>和<br>是纯行为型标签，没有“内容”可包裹，强行闭合无意义
哪些标签必须是双标签？
凡是设计上承载内容（文本、子元素、嵌套结构）的标签，必须有明确的开始与结束。否则浏览器无法确定内容边界，DOM 构建会出错：
-
<p>文字</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>正确；<p>文字</p>（缺结束）会让后续所有标签被当成段落内容，常见于排版塌陷 -
<div> <h2>标题</h2> <p>正文</p> </div>可嵌套；但<div> <h2>标题</h2> <p>正文</p> 缺结束，<code>
