Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

HTML

Learn step by step



HTML Images

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:

<img src="url" alt="some_text">

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.tuton.orianaitsolutions.com" has the URL: http://www.tuton.orianaitsolutions.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If an image tag is placed between two paragraphs, the browser will show the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt Attribute

The alt attribute specifies an alternate text for an image in case image is not getting loaded may be due to path issue or image file missing.
Alt attribute is an author-defined text

<img src="electricity.gif" alt="Electricity">

The alt attribute is used to provide alternative information for an image if for some reason user cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:

<img src="electricity.gif" alt="Electricity" width="42" height="42">

Tip: It is normally a good practice to provide both height and width for an image. If these attributes are set, the space required for the image is reserved during page load. However, in absence of these attributes, the browser will not know the size of the image and it can effect the page layout during load (while the images load).

HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map


Related Videos