HTML <img>

BrandonDusch's avatar
BrandonDusch's avatar
BrandonDusch
Published Jun 20, 2021Updated Jul 1, 2022
Contribute to Docs

The <img> element displays an image on the web page.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

Syntax

<img src="image URL" alt="text used for accessibility" />

The <img> element has no closing tag and it cannot have other tags inside of it. It uses attributes to set properties, some of which include:

  • src sets the URL or filename of images that support many formats (GIF, JPEG, PNG, etc.).`
  • alt is an alternative text used by screen readers and when the image does not load.
  • height is the height of the image, measured in pixels.
  • width is the width of the image, measured in pixels.

Example

Below is an example of an image wrapped in an <a> element which creates an image link:

<html>
  <head> </head>
  <body>
    <a href="https://codecademy.com">
      <img
        src="cc_logo.png"
        alt="Codecademy Home Page"
        width="256"
        height="64"
      />
    </a>
  </body>
</html>

This is what the rendered image look like:

Codecademy logo

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours