View video tutorial

HTML Image

HTML

HTML <img/> tag is used to display images on the web page.

Image tag <img/>


➔ <img/> is an empty tag and has no closing tag. It only contains attributes.

➔ alt attribute is used to show alternate text when image can not be displayed.

➔ width and height attributes are to set the width and height of the picture.

Syntax

<img src="puppy.png" alt="My nice puppy" width="200" height="150">

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Image for a mountain

mountain

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Img Tag Example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h3>Image for a mountain</h3>
    <img src="mountain.png" alt="mountain">
    <p>Image for a mountain: using width and height attributes</p>
    <img src="mountain.png" width="450px" height="200px" alt="mountain">
    <p>Image for a mountain: using width and height attributes in style.</p>
    <img src="parrot.png" style="width: 300px; height: 200px;" alt="mountain">
</body>
</html>

Output is:

birds mountain

Image for a mountain: using width and height attributes: width="600px" height="200px"

mountain

Image for a mountain: using style attribute: style="width: 300px; height: 200px;"

Click on the "Try Now" button to see how it works.