Placing Pictures
Last edited by admin Thu, 10/04/2012 - 06:29


The <img> element

The basic syntax for placing an image in a web page is as follows:

<img src="mountain_view.jpg">

A good practice in XHTML is to place dimensions information, the "alt" attribute, and a closing slash:

<img src="/files/primer/mountain_view.jpg" width="300" height="220" alt="mountain view" />

...with the result being this nice picture:

mountain view

The height and width attributes

It a good practice to specify the dimensions of a picture when including it into a web page. The benefit of using the height and width attributes is that at the time the page renders the browser reads the dimensions specs first and orders images accordingly, before actually loading them. This tends to improve the user experience on pages with large number of images.

The alt attribute

The alt attribute provides a brief text description for the image, which is accessible to search engines. It should contain brief meaningful information; for example, for a logo you would normally use the name of the organization. For purely decorative elements it is best to use alt="".