When creating a web page using HTML, the image tag is used to insert a photo or graphic in a particular place on the page. There are many ways that images can be used on web pages, from adding interest to being used as a navigational tool or to provide information. There are also several different formats of images that can be used. No matter how or what image is being added to the web page, the image tag is always required.
To add an image, the image tag is included where you want the image to appear within your page. For instance, if an image were to be inserted after this paragraph, the image tag, or <img>, would be added to the HTML document after this paragraph. The tag <img> defines all images in HTML. It is referred to as an empty tag, as it contains attributes and has no closing tag. Attributes are options that are available for a specific HTML tag.
If only <img> were added to a HTML document, nothing would show as the attributes of the tag have not been included. The most important attribute for <img> is "src," which stands for source. The attribute src states where the image file is actually located, or it is the address for the image file. As the image is being used on a web page, the location of the image will be given as a URL. Within the HTML document, the image would look like: <img src="URL" />.
Specifically, the URL points to where the image is stored. For example, if an image of a computer with the filename computer.jpg were stored in the images folder on www.wisegeek.com, the URL would be replaced with: <img src="www.wisegeek.com/images/computer.jpg" />. When the browser opens the web page, it displays the image where the image tag is included.
The image tag has a number of other different attributes. They allow a user to adjust how the image looks on the page. The following attributes are commonly used for this tag: alt, border, size, and align.
The attribute alt stands for alternate text and it is shown if a browser is unable to display an image. Also, alternate text is read for those users who are visually challenged and choose to display text over images. For the example above, the alternate text could be stated as alt="image of a computer".
The border attribute adds a border to the image with the thickness depending on the number of pixels stated. This can be especially useful when the image background and the web site background are similar, and a clear distinction is desired. For example, border="10" will place a 10 pixel thick border around an image.
Size attributes are also important, as width and height can be used to specify the exact size of an image. These attributes need to be used very carefully, as changing them can affect the proportions or quality of the displayed image. Size attributes do not change the actual file, just how the browser displays it.
The attribute align specifies how the image is aligned compared to text on the page. There are several different choices for this attribute, including top, bottom, middle, left, right, absmiddle, absbottom, baseline and texttop. These tags also help determine how the text on the page aligns with the image.