IMG Tag Tutorial

Editor

Instructions

The web is primarily a text-based medium, but you can embed other media elements like pictures, video, audio, and more. The most basic non-text medium is the image, which you can embed in your HTML using the img tag.

The image tag is void, which means it cannot have children nested inside. Thus, it does not need a closing tag. A typical complete img tag might look like:

<img src="path/file.png" alt="Description" title="Tooltip" />

Step 1: Copy the code above into the editor textbox. Replace "path/file.png" with "kitten.jpg" which is a file in this project folder. Press "Render" to see the result.

The src attribute is required, and it should point the browser to the image you wish to show in the place of the img tag. In this case, we pointed the browser to a plain file name because that file is located in the same folder as this HTML file. A subfolder could be specified with something like src="subfoldername/kitten.jpg" or you could use a fully qualified URL. The possible values follow the same rules as hyperlinks.

Step 2: Replace "kitten.jpg" with "http://placekitten.com/210/300", which is the original source of the photo. Attribution information for the kitten photos in this tutorial is located here. Press "Render" and see that you still have the same photo.

The alt attribute is also required. It is short for "alternative text" which will be shown in any case where the image cannot. This is especially useful for search engine bots and visually impaired visitors.

Step 3: Replace "Description" with "White Kitten against Blue Sky" and then break the link by introducting a typo in the src attribute (for example you could remove the "h" from "http"). Now when you press "Render" the browser will not be able to find the image, and it will show you the alt text intead. After you have tested your alt text, fix the src attribute so that you can see the image.

The title attribute is not required, but it can be useful to create a basic tooltip. It is ok for the title tooltip to be the same as the alt text, but if you want the tooltip to say something different from the alt text, then that is ok too.

Step 4: Replace "Tooltip" with "Pale Kitten" and then press "Render" so that you can hover over the displayed picture and see the tooltip.

Sometimes we want our images to behave like hyperlinks, so that clicking on the image will navigate the user to a new location. This is easily done by wrapping the img tag with an a tag.

Step 5: Just before your img tag, open a hyperlink with <a href="http://placekitten.com" target="_blank">, and then just after the img tag, close the hyperlink with </a>. Press "Render" and then click on the image to open the link in a new tab.

Step 6: Time to practice! Leave the current a and img tags in the editor, but on a new line create a new img tag for a new picture next to it. The src of this new image should be "http://placekitten.com/215/300" and you may choose appropriate alt and title text.

Some tutorials will suggest that you also set the width and height attributes. This was very important in the days of dial up connections, where specifying these would provide a properly sized placeholder while the page and images finished loading. However, as you learn modern responsive techniques, you may decide to leave them out. Here are some good reasons you might include the width and height attributes:

  1. Your web page includes many external resources like styles, scripts, and images, which may impact performace.
  2. Your users may not have good connections -- the Internet connections in secure buildings like schools, over mobile data, and in certain parts of the world may be especially slow.
  3. Your image files themselves are very large, such as full resolution photography.
  4. You will use the image to create a linked image map.

For #1, #2, and #3 above, the width and height attributes may be a good idea to preserve the layout of your page while it is loading. For #4, it is useful because your map will rely on the specified size to properly match coordinates for the linked areas.

So what is an linked image map? We already created a link that used an entire image, but a map will create areas around certain features in your image so that parts of the image are linked.

Step 7: In your second img tag, add the following attribute-value pairs width="215" height="300" usemap="#kittenmap" and then below the img tag add the following map:

<map name="kittenmap">
    <area shape="rect" coords="150,0,215,210" alt="Paw" href="http://www.catster.com/lifestyle/interesting-facts-cat-paws" target="_blank"/>
    <area shape="circle" coords="60,165,90" alt="Face" href="http://emojipedia.org/cat-face/" target="_blank"/>
</map>