Previous Next

HTML Images

Displaying Image

HTML <img> element is used to display image.

Specify the image url in src attribute.

<img src="Image URL"/> 

Example

<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<img src="/images/html/flower.jpg" alt="Flower Image" />
</body>
</html>

Result:

 

Test Image

Use alt attribute to specify an alternate text for an image, if the image cannot be displayed.

 


 

Specify Image Directory

If images are in nested folders then specify folder path to locate the image.

Example

Assuming our image location is "/images/html/flower.jpg".

<!DOCTYPE html>
<html>
<head>
<title>Image in Webpage</title>
</head>
<body>
<img src="/images/html/flower.jpg" alt="Flower Image" />
</body>
</html>

Result:

 

Flower Image

 

Image Width and Height

Use width attribute to specify width of image.

Use height attribute to specify height of image.

Height can be specified in terms of pixel or percentage.

Example

<!DOCTYPE html>
<html>
<head>
<title>Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="/images/html/flower.jpg" alt="Flower Image" width="150" height="150"/>
</body>
</html>

Result:

image width and height

Flower Image

 

Image Border

Use border attribute to specify border thickness of image.

Example

<!DOCTYPE html>
<html>
<head>
<title>Image Border</title>
</head>
<body>
<img src="/images/html/flower.jpg" alt="Flower Image" border="3"/>
</body>
</html>

Result:

 

Flower Image
 

 

Image Alignment

Use align attribute to align image in center or right.

Default value is left.

Example

<!DOCTYPE html>
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<img src="/images/html/flower.jpg" alt="Flower Image" align="right"/>
</body>
</html>

Result:

Flower Image

Previous Next