Adding Images


To add an image to the page, you need to use an <img> element. This is an empty or self closing element, meaning there is no closing tag. It must carry the 2 following attributes:


This tells the browser where it can find the image file. this will usually be a relative URL pointing to an image in your site.


This provides a description of the image which describes the image if you cannot see it for any reason.

The text in the alt attribute is called the alt text. It should give an accurate description of the image content si it can be understood by screen reader software (used by people with visual impairments) and search engines.

If the image is in the site just to make the page look more attractive (and it has no meaning, such as a graphic dividing line), then the alt attribute should still be used, but the quotes should be left empty.


You can also use the title attribute with the <img> tag to provide additional information about the image. Most browsers display the title content in a tooltip when the user hovers over the image with her cursor.


This specifies the height of the image in pixels.


This specifies the width of the image in pixels.

Images often take longer to load than the HTML code that makes up the rest of the page. It is a good idea to specify the exact size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.

The size of images is increasingly being specified using CSS rather than HTML.


Leave a Reply

Your email address will not be published. Required fields are marked *