Now that we can create pages using basic html, create text and headers, and format our text, it would probably be a good idea to learn how to use images. Images, after all, are very important in web design—they convey information, improve your site’s appearance, and add a little spice to your page.

Images are included in your HTML using a <img /> tag. Image tags are some of the few HTML tags that only require one tag—there is no closing </img> tag. The “/” at the end of the tag tells your browser that there is no closing tag.

Source Attribute

An image tag has several attributes that go inside of the tag. The first and most important attribute is the source attribute—it tells your browser where to find the image you want to display. Source is abbreviated as “src.” Here’s an example:

Here’s the result:

Alternate Text Attribute

The next most important attribute is the alternate text attribute. This attribute tells the browser what text to display in place of the image in case the image is not available. This text is also for people using screen readers. Alternate text is abbreviated as “alt.”

Here’s what the alternate text looks like for our image when it’s unavailable:

Title Attribute

Another attribute for images (and many other HTML tags—try some and see which tags allow this attribute) is the title attribute. This attribute tells the browser what text to display when you hover over the image.

Size Attributes

Finally, you may have an image that is too large or too small that you need to resize (remember, large images are very large files, and small images will look pixelated if they are stretched too much). Do this with either the height or width attribute (or both, if you want to distort the image). Here are three examples:

Go and experiment with some of your own images!