Intro to XHTML series

15. How to add an image to your web page

Another useful content tag of (X)HTML is the <img /> tag, for adding an image to a web page.

<img /> is an inline element, and it's fairly easy to use. Let's add one to our second paragraph.

1) First, we'll put a line break.

2) Now, start the <img /> tag.

3) The src attribute is required; it's how you specify the image's source. As with links, an image's source can be on the same server as your webpage, or a URL to an external image.

4) Let's give our image a source. We have an image in the same folder as this web page that we'll use.

In XHTML, an image tag must also contain alternate text, for the browser to use when the image can't, for some reason, be loaded.

5) Specify this using the alt attribute.

6) Then, close the tag with a slash / then a bracket >, as with all elements that don't have an ending tag.

7) That's it! The image tag is now complete. Save, and we'll go take a look.

And here is our image, right where it should be.

This tutorial is complete. You now know how to add an image to your web page with XHTML.