Insert Images in HTML

HTML Attributes and <img> Tag

Attributes in HTML

HTML attributes provide additional information about elements and are included in the opening tag, usually as name/value pairs.

<img> Tag

The <img> tag is used to embed images in an HTML document and is self-closing.

Attributes of <img> Tag

src: Specifies the path to the image file.
width: Specifies the width of the image.
height: Specifies the height of the image.
alt: Provides alternative text for the image if it cannot be displayed.
title: Provides additional information about the image, displayed as a tooltip when hovered over.

Example

Here is an example of an <img> tag with various attributes:

<img src="image.jpg" width="600" height="400" alt="A beautiful scenery" title="Scenery Image">

Step 1

Download some images from the internet and save them in the folder where your web pages are saved

Then open the code editor 'Notepad++' and add the following code


<html>
<head>
	<title>Insert images in a web page</title>
</head>
<body>
	<h1>Image Gallery</h1>
	<img src="nature1.webp" width="500">
	<img src="nature2.jfif" height="300" title="Beauty of nature">
	<img src="images/nature3.jpg" alt="nature">
</body>
</html>

Run Code

Then save the file in your folder

Step 2

Go to the file location and open the file in your browser

Watch video

Previous Next