One of the earliest media inclusions in the HTML markup was the “Image” tag, which allows you to insert an image as an element within your document. Most popular image formats are supported within HTML, and may be included by just referencing the image location. In this tutorial, you will learn how to add an image to your site.

The HTML

Our HTML document will include an image and a heading. The image is a standard .jpg file, and is included in the file attachment at the bottom of the tutorial.

Syntax

The first part of the <img> syntax is the “src” attribute, which defines for the browser where the image is located. This can be either an absolute or relative location; the latter being preferred for most implementation. For our examples here, make sure that the image is located in the same folder as the primary HTML file so that it may be properly located. The “alt” attribute displays pre-defined text when the image fails to load.  Generally speaking, you will never see the alternate text unless the browser is not able to locate the image from the location specified. For specialized machines such a screen readers used by those with disabilities, this text will be read  as a means of describing what is present, but perhaps not viewable, by the user.

Examples:

A Few Last Words

Images make pages far more interesting. What would we do if all our sites were simply text? No matter how many times you format text, its digital media that makes sites interesting apart from the themes applied. Join us next time for additional HTML tutorials.
Download Source Files