Images

Goodbye plain text, hello images.

HTML Element

Element Description
Image <img>
  • The <img> element displays an image on your webpage.
  • The src attribute is the path to the image file.
  • The alt attribute is a text description of the image.
  • Attributes: src, alt

Image Back to top

An <img> tag displays an image on your webpage. There is no closing tag.

The src attribute is the path to the image. The alt attribute is a textual description of the image.

<img src="img/some-image.jpg" alt="description of the image">

Here is an example of an image:

<img src="img/butterfly-staring-contest.jpg" alt="butterfly staring contest">

Broken Image Back to top

If the path to the image file is wrong, the image won't show up.

Instead, the text inside the alt attribute shows up.

<img src="img/butterfly-staring-kontest.jpg" alt="butterfly staring contest">

Image as a Hyperlink Back to top

Images can be hyperlinks too.

Instead, the text inside the alt attribute shows up.

<a href="https://www.popeyes.com" target="_blank">
  <img src="img/popeyes.png" alt="Popeye's Chicken">
</a>

Image Types Back to top

Type Extension Used For Transparent? Animated?
JPEG .jpg photos, images with lots of colors NO NO
PNG .png logos, high-quality transparent images YES NO
GIF .gif images with low numbers of colors, animated images YES YES