HTML Images

Images improve the appearance and illustrate many concepts of the web pages.

Inserting Images in HTML Documents

The web is not just about text, its multi-media and HTML's multimedia features allow you to include images, audio clips, video clips, and other multimedia element in the web pages.

The <img> tag is used to insert images in HTML documents. It is an empty element and contains attributes only. The syntax of <img> tag can be given with:

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

The following example inserts three images on the web page:

  • <img src="kites.jpg" alt="Flying Kites">
  • <img src="sky.jpg" alt="Cloudy Sky">
  • <img src="balloons.jpg" alt="Hot Air Balloons">
 

Note:Like <br> , the <img> element is also an empty element, and does not have a closing tag. In XHTML it closes itself ending with "/>".


The Src Attribute of Images

Every image has a src attribute (src stands for source). The src attribute tells the browser where to find the image you want to display. The URL of the image provided as the value of src attribute points to the location where the image is stored.

For Example, An image named "sky.jpg", located in the "images" directory on "www.tutorialrepublic.com" has the URL: https://www.tutorialrepublic.com/images/sky.jpg

<img url="https://www.tutorialrepublic.com/images/sky.jpg" alt="Sky">

The Alt Attribute of Images

The alt attribute is the alternative description for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text.

<img url="https://www.tutorialrepublic.com/images/kites.jpg" alt="Kites">
 

Note:The required alt attribute provides alternative information for an image if a user for some reason cannot able to view it because of slow connection, an error in the src attribute, or if the user uses a screen reader.


Setting Width and Height of an Image

The width and height attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default.

  • <img src="kites.jpg" alt="Flying Kites" width="300" height="300">
  • <img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
  • <img src="balloons.jpg" alt="Hot Air Balloons" width="200" height="200">
 

Note:It's a good practice to specify both the width and height attributes for an image. In the absence of these attributes the image loads with its original size that may cause distortion or flicker in your website layout.


HTML Image Tags

Tag Description
<img> Defines an image.
<map> Defines an image-map.
<area> Defines a clickable area inside an image-map.
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.