HTML Images, Attributes, Width, Height, Alt

Images in HTML

OK, So far we do not have any images in our page. Let’s liven up things by adding some images. If you have learnt the HTML links properly, including an image in your HTML page should be a just piece of butter for you.The syntax of an html image element is

Code
<img src=”xxx” width=100 height=100 />

The path of the image to be displayed is told to the browser by setting the value of the attribute src. Just like the html links, the path of the image to be included in the HTML file can be given in any of the two ways ‘the absolute path’ or ‘the relative path’.

Image Attributes Width and Height:

Apart from the location, img element has two other important attributes width and height worth mentioning here. As told earlier, these attributes are now-a-days controlled by css. However, we can specify these attributes of html image by setting their values. In the example given below the width and height are both set to 100 units.

Code
<img src="logo.gif" width=150 height=100 border=1>

Output

Image Attribute Alternative (ALT):

Other important attribute of an HTML image is alt. You should always set this attribute. This attribute specifies what text should be displayed in case the browser is not able to load the image due to any reason. The example below will make it further clear.

Code
No Alt: <img src="noimage.gif" width=100 height=100 />
Output
No Alt:

Code
With Alt: <img src="noimage.gif" width=100 height=100 alt="Tutorial India Logo"/>

Output
With Alt:

Why the Attribute Alt?

Following are the reasons why you should you HTML attribute alt.

• For any reason if you ever misplace the image, you will not have to go to the html code to find out which image is missing.
• If you like keep your image names cryptic (like "123aere.jpg"), assigning one time "alt" attribute will help you while maintenance.
• One of the most important reasons why you should use the alt attribute is that google and other search engines recognize your image by this attribute. So if you want your images to be googled easily, put a descriptive alt attribute.

One last point before we move on to next topic. Just like nextline element <br />, <img> element is also self closing element. Hence notice the syntax of html image again. One last point before we move on to next topic.