img tag Attributes

The <img> tag has all the universal and the UI event attributes. Other specific attributes are

• src
• alt
• align
• border
• height
• width
• hspace
• vspace
• ismap
• usemap
• longdesc
• name

Src – It has the path to the image file in the value part and it is usually a relative URL. It can be an absolute URL or a relative URL.

<img src=”logo.jpg” />

This attribute usage is illustrated as

Alt – It is also called as alt text. It stores a text value which is a text description of image, as

<img src=”logo.jpg” alt=”Vskills logo” />

It is used in different ways as

• If the image could not be shown by browser, this text is shown instead.
• Screen reader software reads a web page for blinds, uses it to describe the image.
•  Search engines use alt text to index the web page.

border – It specifies width in pixels of line around an image. By default, images do not have borders, so to create a border around an image assign value to it as

<img src=”images/logo.jpg” alt=”Vskills Logo” border=”1” />

It is not used now but alignment is done by CSS.

Height and width – They indicate the height and width for the image when showed in the browser. Their values are usually in pixels as

<img src=”logo.jpg” alt=”Vskills Logo” height=”120” width=”180” />

Their values can also be in percentage of the browser screen or containing element

Browser can display images smaller or larger than their actual size but this may blur the images or image will not be as clear but, instead different size version of images as per use should be made.

align – It positions an image within the web page or in an element to left, right or center. It is not used now but alignment is done by CSS.

hspace and vspace – They specify the amount of space in pixels, around an image.

<img src=”images/logo.jpg” alt=”Vskills Logo” hspace=”10” vspace=”14” />

It is not used now but alignment is done by CSS.

ismap and usemap – They are used with image maps.

longdesc – It specify the URL of a document (or part of a document) containing a description for the image in more detail as shown

longdesc=”../how_it_works.html”

Most browser does not support it

name – It is used to identify an image usually for script code but it is replaced now with the id attribute.

name=”image_name”

Apply for HTML Certification

https://www.vskills.in/certification/certified-html-designer

Back to Tutorials