关于HTML中<img>标签的困惑：它是否为空标签？为何支持属性？

标签：空标签的定义与属性支持解析 #

首先明确：<img>确实是HTML中的空标签（void element）。

空标签的核心定义是：这类元素不需要闭合标签，也不能包含任何子内容（比如文本、其他HTML元素）。<img>完全符合这个标准——它的作用是嵌入外部图片资源，本身不需要包裹任何内容，所以你永远看不到<img>...</img>这种写法，这就是它作为空标签的核心特征。

至于它支持src、alt、width、height、id这些属性，和它是空标签完全不冲突：

• 属性的作用是给元素提供额外的配置信息、功能声明或标识，和元素是否能包含子内容是两个独立的概念。
• 逐个看这些属性的必要性：
  • src：必填属性，指定图片的资源路径，是<img>能加载图片的核心依据
  • alt：替代文本，当图片加载失败、或屏幕阅读器读取页面时，能传递图片的信息，是无障碍访问的关键配置
  • width/height：指定图片的尺寸，帮助浏览器在加载图片前预留出对应的布局空间，避免页面加载时出现布局跳动
  • id：给<img>赋予唯一标识，方便后续用JavaScript操作元素，或用CSS精准定位样式

内容的提问来源于stack exchange，提问作者Manthan Kasle