HTML Image Attributes

Learn to control image display and accessibility using the essential attributes of the <img> tag.

Controlling Your Images

You've learned how to add an image, but how do you control its size and other properties? Let's dive into the most common attributes for the `<img>` tag.

The 'src' Attribute

The `src` (source) attribute is mandatory and specifies the path or URL to the image file.

The 'alt' Attribute

The `alt` (alternative text) attribute provides a text description for screen readers and is displayed if the image fails to load. It is crucial for accessibility.

The 'width' and 'height' Attributes

These attributes specify the image's dimensions in pixels. Setting them helps the browser reserve space for the image before it loads, preventing page layout shifts.

Practice Zone


Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

<img
alt="A beautiful image"
src="image.jpg"
width="300"
height="200">

Completa el código:

______
______
______
______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<img src="" alt="" width="" height="">

Practice Example: Code Editor

Display an image with a width of "300" and a height of "200".

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<img src="image.jpg" alt="A beautiful image" width="300" height="200">

Knowledge Check

Which image attribute is most important for web accessibility?