HTML Images

img tag in HTML

Images are a good way to express anything. To embed images in your HTML document <img> tag is used.

The src attribute within the <img> tag is used to specify the image URL. The following example shows how to embed images on your HTML page.

The alt attribute is used to specify the alternate text. This text will be visible when an image will not be loaded by the browser for any reason.

The title attribute specifies the suitable title for the image which is visible when the mouse is over to the image.

<img src="http://www.idiotsdiary.com/img/logo.png" alt="idiotsdiary logo" title="IdiotsDiary - Free online programming tutorial">

idiotsdiary logo

Specify the width and height of the image

<img src="http://www.idiotsdiary.com/img/logo.png" alt="idiotsdiary logo" title="IdiotsDiary - Free online programming tutorial" width="150px">

idiotsdiary logo

width and height attributes are used to specify the width and height of the image. if anyone attribute is specified then another attribute automatically receives the value to maintain the image aspect ration.

Remember too long images effects your page load speed so use the image of the desired size for fast page load speed.

Specify the alignment of an image

Left align image
<p><img src="http://www.idiotsdiary.com/img/logo.png" alt="idiotsdiary logo" width="100px" align="left">
To specify the alignment of an image, align attribute is used to align the image and text is maintained around the image as per image alignment is specified.</p>
Output

idiotsdiary logo To specify the alignment of an image, align attribute is used to align the image and text is maintained around the image as per image alignment is specified.



Right align image
<p><img src="http://www.idiotsdiary.com/img/logo.png" alt="idiotsdiary logo" width="100px" align="right">
To specify the alignment of an image, align attribute is used to align the image and text is maintained around the image as per image alignment is specified.</p>
Output

idiotsdiary logo To specify the alignment of an image, align attribute is used to align the image and text is maintained around the image as per image alignment is specified.

Specify caption for an image

figure tag is used to mark the photo or image in an HTML document and a figcaption tag is used along with the figure to specify a caption for the image.
<figure>
  <img src="https://www.idiotsdiary.com/img/logo.png" alt="idiotsdiary logo">
  <figcaption>IdiotsDiary - Free programming tutorial</figcaption>
</figure>
idiotsdiary logo
IdiotsDiary - Free programming tutorial