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:
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".