webdevlinux - logo Web Dev Linux

Images with HTML

We can also display images in an HTML document. Here you will understand how to use images with HTML.

HTML Images Img element

Try the below example

FILE : images.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Images with HTML</title>
</head>
<body>
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky">
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky" width="200">
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky" height="200">
<img src="http://www.webdevlinux.com/img/sky.jpg" alt="Sky" height="200" width="200">
</body>
</html>

Explanation

Take a look at the explanation of elements & the attribute used in the example.

<img>
The img element represents an image.
src="http://www.webdevlinux.com/img/sky.jpg"
The src attribute represents the image source (path or address of the image).  You can also use a local path here. If sky.jpg is placed in the same location as images.html is placed, Then you can use the src attribute like this <img src="sky.jpg" alt="Sky">
alt="Sky"
The alt attribute represents an alternate text for the image. This is a required thing according to W3C standards. This text will be displayed instead of the image when the image is not available.
width="200"
This represents the pixel value of image width.
height="200"
This represents the pixel value of image height.