Definition
HTML Images are embedded visual assets declared in the document using the self-closing <img> tag and the src attribute.
Why It Matters
It is the primary mechanism for presenting rich visual layouts on the web.
Core Concepts
<!-- Standard image -->
<img src="logo.png" alt="Company Logo" width="200" height="100">
<!-- Semantic figure -->
<figure>
<img src="graph.webp" alt="Sales growth chart 2026">
<figcaption>Figure 1: Quarterly sales growth reaching 15%.</figcaption>
</figure>src: URL of the image file (required).width/height: Reserve layout space before download to prevent layout shift.- Decorative Images: Use
alt=""so screen readers skip them. <figure>/<figcaption>: Group image with caption for semantic association.- Formats: GIF, JPEG, PNG, SVG, WebP—each with different tradeoffs.