The img Element

Images in HTML

Use the <img> tag to embed an image into your web page with an src attribute that contains a file path to the image you want to be included. Use the alt attribute to provide alternative text with a description of the image in case it doesn’t load, or is being read by a screen reader for people with disabilities.

Unlike most of the elements we have encountered thus far, the img element does not have a closing tag :

<!-- Incorrect img declaration -->
<img src="path/to/image/cat.jpg" alt="A cat"></img>

<!-- Correct img declaration -->
<img src="path/to/image/cat.jpg" alt="A cat">

Exercise

In this exercise, you will need to do the following:

• Add an image of the final result of the recipe from a search engine of your choice to your HTML page. Give this image an alternative text label. Place this image under the main level header.
• Wrap the main level header and the image in a container. Give this container an id attribute, with the value recipeTitle.
• Group the elements comprising Ingredients and Instructions into separate containers.
  • Give each container an id value; one named ingredients, the other named instructions.
  • Give both containers a class value of recipeList.