HTML Images

Image

HTML img element adds an image in a page. Firstly we write an image tag. Then, we add the src attribute in the <img> tag.

Syntax to add an image.

<img src="address of the image/name.extension" >

See the example given below.

Example

<img src="files/logo.png"  alt="codingb-logo" width="300"/>

Try </>

src attribute specifies the location (address) of the image.

Image Related Attributes:

alt attribute

alt attribute is used to give the alternate name to an image in the form of text.

Example

<img src="files/logo.png" alt="codingb logo is present here."/>

Try </>

This text can be seen when an image is not available due to slow network or wrong address.

height attribute

height attribute represents the vertical dimension.

Example

<img src="files/web.png" height="400px">

Try </>

width attribute

height attribute represents the horizontal dimension.

Example

<img src="files/web.png" width="400px">

Try </>

Image Alignment

The image can be aligned on any side using CSS properties.

Example

.img1{
	float:left;
  	width:200px;
}
.img2{
	float:right;
  	width:200px;
}

Try </>

Image Alignment in text

Images can be aligned in the text in different ways.

Example

<p>This is default case. The text <img src="files/web.png" width="200" height="200"> is on the bottom side of the image.</p>
Try </>

align='top':

Example

<p>The text is on the top side <img src="files/web.png" width="200" height="200" align="top">. This text is on the top side of the image.</p>
Try </>

align='middle':

Example

<p>This is default case. The text <img src="files/web.png" width="200" height="200"> is on the bottom side of the image.</p>
Try </>

usemap attribute

usemap attribute is used to make an image map. Google map is the common example of a map.

Example

<img src="files/three images.jpg" usemap="#shapes" alt="shape of square.">

Try </>

There are three integers in the coords attribute. The first integer is the distance of the circle from the left edge of the image. The second integer is the distance of the circle from the top edge of the image. The third integer is the radius of the circle.

NOTE: align attribute was used to align the image in the text but now it is obsolete. align attribute is not included in HTML5.


Tip: Always remember there is no end tag for <Img>. Therefore, only one tag is used. You can also use <img /> tag.



Was this article helpful?

 

Email:

Message:

Get the newsletter