HTML Tags Guide To Adding Images To Your Web Documents

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Web Images: Best Practices and HTML Code In One Useful Guide
What does HTML Tags Guide To Adding Images To Your Web Documents do?
The <img> tag is used to insert an image into a document.
Display
inline
Null element
This element must not contain any content, and does not need a closing tag.

Code Example

<img src="/wp-content/uploads/flamingo.jpg">

Using the <img> tag

The <img> element is the most straight-forward way of displaying a static image on a page. You should normally use it whenever an image is actually a part of the content (as opposed to using an image as part of a page’s design).

All <img> tags must have a defined src attribute. This defines the image to be displayed. Typically, the src is a URL, but a data representation of the image can also be used in some cases.

Inline vs. Block

Intuitively, an image seems like a block element. It has a defined width and height, and cannot be broken over multiple lines. It behaves like a block.

Unfortunately, because of historical reasons, the HTML specification (and all browsers, by default) treat the <img> tag as if it is an inline element. Because of the way browsers handle white space, this can cause problems if you are not careful.

<img src="/wp-content/uploads/flamingo.jpg">
This combination of text and image looks bad on most browsers.
This combination of text and image looks bad on most browsers.

There at least two easy ways to fix this. The simplest is to simply make sure there is a line break before and after your images. This is fine if you don’t care much about flowing text around your image.

<!-- Line breaks around the image. -->

This is some text that appears above the image.<br>
<img src="/wp-content/uploads/flamingo.jpg"><br>
Here is some other text below the image.
This is some text that appears above the image.

Here is some other text below the image.

A better, more systematic way of handling the inline image problem is to images into block elements with CSS.

img {
  display: block;
}
<!-- Image is block level. No need for line breaks. -->

This is some text that appears above the image.
<img src="/wp-content/uploads/flamingo.jpg">
Here is some other text below the image.

#block-img img {
display: block;
}

This is some text that appears above the image. Here is some other text below the image.

Using the display: block; CSS rule is a good default way of presenting images, which you can then build upon for other types of presentation — such as wrapping text around an image within the flow of an article.

Responsive Images

It’s important to make sure that images display correctly across a wide variety of screen widths and window sizes. One of the easiest techniques for accomplishing this is to use CSS to set the width (or the max-width) to 100%. This will ensure that the image is never too big for its container. When used in conjunction with a flexible-grid system, this optimizes the images display size for various screen widths.

img {
 width: 100%;
 height: auto;
}
<!-- This image is very large, but it will not overflow the container. -->

<img src="/wp-content/uploads/very-large-flamingo.jpg">

#responsive-width img {
width: 100%;
height: auto;
}

There are two other techniques you should know for responsive images:

  • Using the srcset image attribute to specify multiple sizes of a single image.
  • Using the <picture> element to specify different image designs for different contexts.

Deprecated <img> attributes

The <img> element has been a part of the HTML specification almost since the beginning, and has been a vital part of HTML-based page design since before the advent of modern browsers, CSS3, or semantic markup. Because of this history, there are a large number of deprecated (no longer in use) attributes that have previously been used with the <img> element.

Many of the deprecated attributes are related to layout and positioning, other have to do with browser behavior. In most cases, CSS is the preferred method for achieving these layout effects. In other cases, JavaScript is the best way to get the desired results.

Deprecated attributes are marked below in red. Where possible, we have provided additional information on how to achieve the desired effects using modern standards.

For more information about deprecated tags and other changes to the HTML specification, see our article on HTML5.

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for img

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll