Learn how to build and design websites with our tutorials.

HTML and HTML5 Images Tutorial

View Tutorial Contents


The HTML <img> tag defines an image. The src attribute defines the the location where the image is located and the name of the file.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

img{
max-width: 100%;
height: auto;
border: none;
}

</style>

</head>
<body>

<figure>
<img src="circle.png" alt="this is an image" />
</figure>

</body>
</html> 

this is an image

HTML5 <figure> Tag

The HTML5 <figure> tag specifies self-contained content that is within the flow of the main content, for example, images, diagrams, code listings, etc. that are considered part of the main content.

The code example below shows you how to mark up an image in a web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

img{
max-width: 100%;
height: auto;
border: none;
}

</style>

</head>
<body>

<figure>
<img src="circle.png" alt="This is an image" />
</figure>

</body>
</html> 

this is an image

HTML5 <figcaption> Tag

The HTML5 <figcaption> element is used to provide a caption or text to accompany an image, diagram, code listing, etc.

The <figcaption> can be placed either over or under the <img> element.

The code example below shows you how to define the <figcaption> of an image in a web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

img{
max-width: 100%;
height: auto;
border: none;
}

</style>

</head>
<body>

<figure>
<figcaption>This is just a random image.</figcaption>
<img src="circle.png" alt="This is an image" />
</figure>

<p>
This is a paragraph.
</p>

<figure>
<img src="circle.png" alt="This is an image" />
<figcaption>This is another random image.</figcaption>
</figure>

</body>
</html> 

This is just a random image.
this is an image

This is a paragraph.

this is an image
This is the same random image as the one above.

The alt Attribute

The alt attribute specifies an alternative text that will displayed in place of an image if it cannot be displayed. Some web browsers will display the alt tag text if the image is hovered over. The text should describe the image.

The alt attribute is required for the web page to validate correctly.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

img{
max-width: 100%;
height: auto;
border: none;
}

</style>

</head>
<body>

<figure>
<figcaption>This is another random image.</figcaption>
<img src="circle.png" alt="This is an image" />
</figure>

</body>
</html> 

If you hover over the image below, the text that is within the alt attribute will appear on your screen.

This is another random image.
this is an image

Screen Readers

The alt attribute allows screen readers to provide information through the use of audio so that people with visual impairments can use the computer (or whatever device). Some search engines will also provide an audio of the text when an image is hovered over.


Image Widths and Heights

The CSS width and height properties allow you to specify the width and height of an image.

The width and height of an image should always be specified. It can be done both within the image tag itself through the use of attributes and also through the use of CSS, however, the best practice is to always specify the dimensions using CSS.

I also recommended that you specify either no border or the border style that you want an image to have.

In the code example below, has a specified width and height of 150 pixels.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>

img{

width:	150px;
height:	150px;

border:	none;
}

</style>

</head>
<body>

<figure>
<figcaption>This is another random image.</figcaption>
<img src="circle.png" alt="This is an image" />
</figure>

</body>
</html> 

This is another random image.
this is an image