How do you embed images in HTML and what is the alt attribute for?

Images are embedded with the void <img> tag, whose src attribute gives the file path and whose alt attribute provides a text description for when the image can't be seen.

The <img> element is self-contained (no closing tag) and takes at least two attributes:

<img src="path/to/image.png" alt="Description">

The src ("source") points to the image file. Browsers support many formats — gif, jpg, png, svg, webp and more.

The alt ("alternative text") attribute is the part students underrate. It supplies a textual stand-in that is used:

• by screen readers, so blind and visually impaired users learn what the image contains;
• by search engines, which can't "see" pixels and rely on the text to index the image;
• whenever the image fails to load, so the browser shows the description instead of a broken icon.

<img src="logo.png" alt="Company Logo">

Tip: write alt text that describes the content meaningfully, and don't start it with "image of…" — the technology already knows it's an image.

Go deeper:

• <img>: the image element — MDN — full attribute reference plus responsive-image and accessibility notes.
• Images (accessibility) — web.dev — how to write alt text by image purpose: decorative, informative, functional, complex.