Images can be displayed using the
This tag accepts a
src attribute, which we use to set the image source:
<img src="image.png" />
Note that this is a self-closing tag (ends with
/>), it does not contain any content - it’s self-sustaining.
We can use a wide set of image formats on the Web. The most common ones are PNG, JPEG, GIF, SVG, and more recently WebP.
The HTML standard requires an
alt attribute to be present, to describe the image. This is used by screen readers and also by search engine bots:
<img src="dog.png" alt="A picture of a dog" />
You can set the
height attributes to set the space that the element will take so that the browser can account for it and does not change the layout when it’s fully loaded. It takes a numeric value, expressed in pixels.
<img src="dog.png" alt="A picture of a dog" width="300" height="200" />
Lessons this unit:
|1:||Your first HTML page|
|9:||DEMO Using CodePen|
|10:||DEMO Using VS Code|