This section talks about using HTML to place images in web pages. It does not address image formats, optimization and file sizes, compression, production workflow, or CSS for images. All of those topics are addressed elsewhere in this blog.

We place images onto web pages with the <img> tag.

The <img> tag is the first tag we have encountered that does not have a matching closing tag. This makes sense, since everything about the image is specified by the tag’s attributes – the tag doesn’t “enclose” anything. The image attribute creates its own content, rather than the content being contained between an opening and closing tag.

To ensure compatibility with XHTML and XML, tags without an explicit closing tag are closed within themselves, like so:

1. <img />

(This internal closing is optional in HTML5)

By itself, the <img> tag does nothing. Just as the <a> element needs an href attribute in order to work as a link, the <img> tag needs a src attribute to bring an image onto the page:

1. <img src=“smile.jpg” />

(Note that the example above assumes that the smile.jpg file is in the same location as the HTML page that uses it.)

A very important attribute to the <img> tag is the title, which should be specified as soon as you insert the image into your web page, just as you specify the title of a page as soon as you create it. Every image should have a title attribute:

1. <img src=“smile.jpg” title=“Smiling Norwegian fisherman” />

The alt attribute was standardized before the title attribute, and fulfills the same function: it makes the content (an image, in this case) understandable by everyone, including those hard of sight, or those who otherwise cannot see them image. (If the image, for multiple possible reasons, has not loaded on the page, for example). title supersedes alt – it is more versatile, and can be applied to almost any tag, unlike alt, which can only be applied to images. We have seen the title attribute applied to <acronym>, but it can also be used to enhance hyperlinks (<a>) and many other tags. However, you should continue to use alt to maintain full backwards compatibility and HTML compliance. The solution is easy: whatever the title attribute is set to for an image, set the alt attribute to the same value:

1. <img src=“smile.jpg” title=“Smiling Norwegian fisherman”
2. alt=“Smiling Norwegian fisherman” />

Finally, note that as an inline tag, <img> should be contained inside a block element. Usually (but not exclusively) that is a paragraph:

<p><img src=“smile.jpg” title=“Smiling Norwegian fisherman”
1. alt=“Smiling Norwegian fisherman” />The fjords of Norway are strange, lonely
2. places, in which Great Auks look over a grey ocean that is frozen for half the
3. year. It is in this harsh environment that Sigmund Erikson makes his living as a
4. fisherman, trawling for cod…</p>

Again, this rule can be ignored for HTML5, but it is still a good practice to follow: think of an image as being an illustration for content, and thus part of a paragraph or heading.

If bitmapped text is part of the image, that text should be the alt and title attribute values, rather than a description of the image. This is commonly the case with corporate logos and banners, which typically should be wrapped in an <h1> tag:

1. <h1><img src=“ozymandias.jpg” title=“Ozymandius Corporation”
2. alt=“Ozymandius Corporation” /></h1>

Finally, if an image used on a page is purely decorative and has no meaning (i.e. if it was removed the content of the page would essentially remain the same), the alt attribute must still be used, but it should be set to nothing at all: alt="". In this case, the title attribute need not be set.