8.0 Images
Although content in the form of information is King on the Internet, most websites would be pretty dull without the use of images - this one too no doubt. To "insert" an image into a web page, we need to introduce another tag: <img>. This is called the image tag.
The image tag is used along with another attribute: src. This is called the source attribute, and it tells the browser where the image is located. Take note that the image element is opened and closed within the same tag. For example:
<img src="picture.jpg" />
Here "picture.jpg" is the name of the image file including the extension (jpeg in this case). We can now introduce another attribute that is useful with images: alt. This is called the alternate attribute, and it should always be used in image tags because it provides an alternate description if the image is not shown for some reason (wrong path specified, image extension error etc). For example:
<img src="picture.jpg" alt="Picture" />
In the above example, if the image cannot be shown then this attribute would provide the following in a browser:
Another useful attribute that can be used with images is the title attribute. This adds information to an image when someone hovers over it, and it is also quite useful for search engine optimisation (SEO) purposes too. For example:
<img src="images/logo.png" alt="Picture" title="LEARN HTML" />
This would look like this in a browser (try hovering over the image):
It is worth noting that images are not actually physically inserted into HTML pages. Instead they are simply linked to them. The <img> tag merely reserves a holding space in the HTML document for the referenced image.