HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Images

The HTML <img> tag is used to put an image in an HTML document.

Carousel Animated car Carousel
Run code

HTML Image Syntax

In order to put a simple image on a webpage, we use the <img> element.

The <img> element is an empty element which means that it has no closing tag.

Run code

The src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL.

If your image is called car.jpg, and it sat in the same directory as your HTML page, you could embed the image like so:

If the image was in an images subdirectory, you must then include the folder name in the src attribute like this:

You could embed the image using its absolute URL, for example:

Image name is always case sensitive, therefore car.jpg and Car.jpg both are different.

Search engines also read image filenames and count them towards SEO.

Therefore, give your image a descriptive filename; car.jpg is better than img001.jpg

To learn more about file paths, visit: HTML File Path Chapter.


HTML alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The easiest way to test your alt text is to purposely misspell your image name. If for example our image name was spelt carrrrrrr.jpg, the browser wouldn't display the image, and display the alt text instead:

Run code

You should always use alt attribute with images.



HTML Image Size - Width and Height

You can use the width and height attributes, to specify the width and height of your image.

Run code

However, you shouldn't alter the size of your images using HTML attributes. If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs.

If you do need to alter an image's size, you should use CSS width and height properties instead.


Use Image as Link

We have seen how to create hypertext link using <a> tag.

We just need to use an image inside <a> element at the place of text as shown below:

Run code

Responsive Images

A responsive images adjust itself to fit the size of the screen.

Use width:100% and height:auto to make an image responsive, the image will be scale up and down according to screen size:

Run code

Floated Images

Use the CSS float property to let the image float to the right or to the left of a text.

The following example specifies that an image should float to the left side of its container:

Run code

The following example specifies that an image should float to the right side of its container:

Run code

HTML Background Image

The CSS background-image property sets one or more background images on an element.

To add a background image on a web page, specify the background-image property on the <body> element:

Run code

To add a background image on a paragraph, specify the background-image property on the <p> element:

Run code

You can learn more about background images in our CSS Background Chapter.


HTML Image Maps

The <map> tag defines an image-map. An image-map is an image with clickable areas.

The following example specifies an image-map with clickable areas:

Tutorial Infographic HTML CSS JavaScript
Run code

The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.


HTML <picture> Element

HTML5 introduced the <picture> element to add more flexibility when specifying image resources.

The HTML <picture> element serves as a container for zero or more <source> elements and one <img> element to provide versions of an image for different display device scenarios.

Run code

Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched.


HTML Image Tags

Tag Description
<img> Specifies an image
<map> Specifies an image-map
<area> Specifies a clickable area inside an image-map
<picture> Specifies a container for multiple image resources