In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using , and detailing how it relates to CSS background images.

In order to put a simple image on a webpage, we use the element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (pronounced sarc, sometimes spoken as its full title, source). 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, in the same way as element href attribute values.

Note: You should read A quick primer on URLs and paths to refresh your memory on relative and absolute URLs before continuing.

So for example, if your image is called dinosaur.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, which was inside the same directory as the HTML page (which Google recommends for SEO/indexing purposes), then you'd embed it like this:

And so on.

Note: Search engines also read image filenames and count them towards SEO. Therefore, give your image a descriptive filename; dinosaur.jpg is better than img835.png.

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

But this is pointless, as it just makes the browser do more work, looking up the IP address from the DNS server all over again, etc. You'll almost always keep the images for your web site on the same server as your HTML.

Warning: Most images are copyrighted. Do not display an image on your webpage unless:

1) you own the image 2) you have received explicit, written permission from the image's owner, or 3) you have ample proof that the image is, in fact, in the public domain.

Copyright violations are illegal and unethical. In addition, never point your src attribute at an image hosted on someone else's website that you don't have permission to link to. This is called "hotlinking". Again, stealing someone's bandwidth is illegal. It also slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing.

Our above code would give us the following result:

Note: Elements like and  are sometimes referred to as replaced elements. This is because the element's content ,and size, is defined by an external resource (like an image or video file), not by the contents of the element itself. 

Note: You can find the finished example from this section running on Github (see the source code too.)

The next attribute we'll look at is alt. Its value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displayed. For example, our above code could be modified like so:

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

So, why would you ever see or need alt text? It can come in handy for a number of reasons:

What exactly should you write inside your alt attribute? It depends on why the image is there in the first place. In other words, what you lose if your image doesn't show up:

Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realise how unhelpful alt text is if the image cannot be seen, such as "logo" or "my favourite place".

Note: For more information, see our guide to Text Alternatives.

You can use the width and height attributes, to specify the width and height of your image. You can find your image's width and height in a number of ways. For example on the Mac you can use Cmd + I to get the info display up for the image file. Returning to our example, we could do this:

This doesn't result in much difference to the display, under normal circumstances. But if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in:

This is a good thing to do, resulting in the page loading quicker and more smoothly.

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. The image may also end up looking distorted, if you don't maintain the correct aspect ratio. You should use an image editor, to put your image at the correct size, before putting it on your webpage.

Note: If you do need to alter an image's size, you should use CSS instead.

As with links, you can also add title attributes to images, to provide further supporting information if needed. In our example, we could do this:

This gives us a tooltip, just like link titles:

Image titles aren't essential to include. It is often better to include such supporting information in the main article text, rather than attached to the image. However, they are useful in some circumstances; for example, in an image gallery when you have no space for captions.

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic tag; we'd like you to embed the image located at the following URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.

We would also like you to:

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you doing this:

A T-Rex on display in the Manchester University Museum.

This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?

A better solution, is to use the HTML5 and elements. These are created for exactly this purpose: to provide a semantic container for figures, and clearly linking the figure to the caption. Our above example, could be rewritten like this:

The element tells browsers, and assistive technology, that the caption describes the other content of the element.

Note: From an accessibility viewpoint, captions and alt text have distinct roles. Captions benefit even people who can see the image, whereas alt text provides the same functionality as an absent image. Therefore, captions and alt text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

A figure doesn't have to be an image. It is an independent unit of content that:

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS background-image property, and the other background-* properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:

The resulting embedded image, is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images time to shine!

Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.

Note: You'll learn a lot more about CSS background images in our CSS topic.

That's all for now. We have covered images and captions in detail. In the next article we'll move it up a gear, looking at how to use HTML to embed video and audio in web pages.