The HTML Image Tag

Guest Author - Diane Cipollo

When the web was first created and people started writing books about how to create websites, placing images on the web didn't get much coverage. This was because of the limitations of the web and the web surfer's computer. But the web and computers have improved considerably and images have become an important part of webpages and websites. The HTML books published today talk about a picture being "worth a thousand words".

Ok, let's say you have your image in the correct format and you are ready to add it to your webpage. You will use the HTML tag called the image tag to do this. Let's take a look at the image tag and its attribute/value parts. Some computer languages do not allow you to break a line of code into two lines such as I have done below. HTML is one of the languages that do allow you to do this.

Note--The arrow

indicates that the code is wrapped to a second line and should really be all on one line.

The first thing you should notice is that the image tag does not have a matching closing tag (</img>) like most HTML tags do. Secondly you can see that this tag has many attribute/value pairs which gives you a lot of control over the way your image is displayed on the web page.

<	Left angle bracket
img	Element name
src	This attribute controls the storage location of the image. It tells the browser where to look for the image.
width	This attribute tells the browser the width of the image so that it can leave a space for the image.
height	This attribute tells the browser the height of the image.
alt	This attribute gives the image a name (alternate text). When the image cannot be displayed by the web browser for whatever reason, this name will appear inside the designated space.
border	This attribute controls the thickness of the border that will be placed around the image. There are two default values used if this attribute is not specified in the image tag. A border is used if the image is functioning as a hyperlink (link) button. If the image is just a picture and not a link button, no border appears.
hspace	This attribute controls the amount of space that is left empty on the right and left side of the image.
vspace	This attribute controls the amount of space above and below the image.
align	This attribute controls where the image is placed. The options are top, middle, bottom, left and right.
>	Right angle bracket

Next →

|