Images and Captions

Adding visual assets to pages using image and figure tags.

Images in HTML are added using the self-closing <img> tag. To group images with descriptive caption text, we use <figure> and <figcaption> elements.

Core Attributes & Elements

src: Points to the path of the image.
alt: Provides alternative description text.
<figure>: Structural container for visual assets.
<figcaption>: Represents a caption or legend for the content of its parent <figure> element.

Example

html

<figure>

<img src="image.jpg" alt="Mountain">

<figcaption>Beautiful Mountain</figcaption>

</figure>

Interview questions

Why is the alt attribute required for img tags?

The `alt` attribute is vital for accessibility because screen readers read it aloud to visually impaired users. It also displays as fallback text if the image file fails to load, and is crawled by search engines for image SEO.

Practice

Write code containing an image of a cat inside a figure container, complete with a caption beneath it and alt description.

Hint: Put the <img> inside <figure> followed by <figcaption>.