Images

You can embed an image into a document by using the img element. This element uses two important attributes:

• src, which is required and contains the location and filename of the image you want to embed
• alt, which allows you to add a text description of the image and its meaning

Example

<img
  src="heart.png"
  alt="Pink heart in an 8-bit style."
>

The src attribute uses all the same logic you learned about creating absolute and relative links.

The alt attribute should be present on all inline images and generally includes a description that could replace the image and should be informed by the context and meaning of the image, as you can see in these examples:

Writing good alt text

It is an important responsibility of front-end developers to understand when to write alt text and how to write good alt descriptions. To that end, I’d like you to read Alt-texts: The Ultimate Guide (est. reading time: 11min), which was written by a screen reader user and has a wealth of examples.

Additional alt text resources

• WebAIM’s guide to alternative textFollowing and reading this link is optional.✳️ provides information and a series of examples to test your understanding.
• A simple decision treeFollowing and reading this link is optional.✳️ to determine if you need alt text.
• The Poet Training ToolFollowing and reading this link is optional.✳️ is a web-based image description resource that helps people learn when and how to describe various types of images. Originally created for people writing educational content, the examples and exercises are still useful when thinking about images in articles, news stories, etc.