HTML Tutorial - HTML Images

Image Tag is used to display image in a webpage. You can see an example of Image Tag below.

Source: Result:



Note:
  • In the <img> Tag the src is the main attribute used to provide the filename of the image to be displayed.
  • In the <img> Tag the src is mandatory attribute. Image will be displayed even with out the width and height attribute.
  • In the example shown above one of the <img> Tag have width and height attribute in percentage. You can see it is reduced to 25% of the original size.
  • In the <img> Tag the border attribute is assigned a value of "1" to put a border around Images.
  • There is usage of <hr> Tag that is used to put an horizontal line in betweeen the two <img> Tag.

HTML Image Align Attribute


The align attribute when used with the <img> Tag it shows the image in the left or right according to the usage.
Source: Result:



Note:
  • In the <img> Tag the align attribute is used to align the image to left or right as specified.
  • In the <img> Tag the <br> Tag is being used to provide new lines in between the image.

HTML Img Tag Width and Height


In the <img> Tag the width and height needs to be specified that will show the size of space it would occupy in the webpage. By doing this you can fix the size of the image and your webpage will look the same even if you change the Image shown by the <img> Tag.

Example:
<img src="FundaLogo.jpg" width="182" height="112">

HTML Img Tag Alt Attribute


The <img> Tag Alt attribute, if used will show as alternate text when the image does not load in the webpage.

The Image not being shown may be for many reasons like slow internet connection or the filename of the image has been changed.

Example:
<img src="FundaLogo.jpg" alt="Funda Logo">