Inserting Images

Welcome to our free HTML tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

Contact Us or call 1-877-932-8228
Inserting Images

Inserting Images

Inserting images in web pages is done by placing an img tag in the HTML code. The <img> tag is an empty tag. Its src attribute is used to reference an image file using a relative or absolute path. The syntax is shown below:

Syntax

<img src="path_to_image_file" alt="alternative text">

The following page shows how to use the <img> tag:

Code Sample:

Images/Demos/Images.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p><img src="http://www.google.com/images/logo.gif" alt="Logo"></p>
<hr>
<p><img src="Images/Pooh.jpg" alt="Pooh Bear"></p>
<hr>
<p><img src="Images/RunnersHome.gif" alt="Runners Home"></p>
</body>
</html>

Code Explanation

The page will render as follows:Google Image Page Example

Making Images Accessible

Alternative Text

To add alternate text for an image, use the alt attribute.

<img src="logo.gif" alt="Logo">

Alternate text is displayed...

  • When the user's browser does not support images.
  • As the image is downloading.
  • When the user hovers over the image with the mouse (in some browsers).

Alternate text can also be used by screenreaders to describe an image for the visually impaired.

Long Descriptions

If an image depicts something complicated, such as a graph or chart, a long description of the image can be provided on a separate page. The longdesc attribute of the <img> tag is used to point to that description. For example:

Code Sample:

Images/Demos/LongDesc.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Description</title>
</head>
<body>
<h1>Long Description</h1>
<p><img src="Images/BigMac.jpg" alt="Big Mac Nutrition Information" longdesc="BigMac.html"></p>
</body>
</html>

Code Explanation

The browsers don't do anything with the longdesc value, but modern screen readers make use of it. One example is JAWS, a most popular screen reader from Freedom Scientific.

Height and Width Attributes

The img element also takes height and width attributes that set the dimensions (in pixels) to use to display the image on the page. It is not good practice to "resize" the image using these attributes. If you use these attributes, you should set the values to the actual height and width of the image. Using the height and width attributes lets the browser know how much space to allocate for the image without having to wait for the image itself to download. Use of these attributes may promote faster rendering of the Web page.

<img src="logo.gif" alt="Logo" height="100" width="300">
Next

This tutorial is based on Webucator's Introduction to HTML Training Course. We also offer many other HTML Training courses. Sign up today to get help from a live instructor.