How to Insert an Image in HTML?
Last Updated :
19 Mar, 2024
Inserting an image in HTML involves using the <img> tag with attributes like src to specify the image source. It’s a self-closing tag, requiring no closing tag, and is essential for displaying visual content on web pages.
Here’s a basic HTML code structure to insert an image:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Insertion in HTML</title>
</head>
<body>
<h2>Image Insertion in HTML</h2>
<!-- Image insertion code will go here -->
</body>
</html>
Example of Inserting an Image in HTML
1. Using the <img> tag:
To insert an image using the <img> tag, specify the image file’s path in the src attribute. Optionally, include an alt attribute for accessibility. This tag is self-closing and essential for displaying images.
Example: In this example, the <img> tag inserts an image. Specify the image URL in the src attribute and provide optional alt text for accessibility.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Image Insertion in HTML
</title>
</head>
<body>
<h2>Using the img tag</h2>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240318162718/download.png"
alt="Description of the image"
/>
</body>
</html>
Output:
Using the tag Example Output
2. Using CSS background image property:
Inserts an image using CSS background image property. The image URL is specified with background-image, and background-repeat: no-repeat; ensures the image is displayed only once without repetition.
Example: Here we are using above explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Insertion in HTML</title>
<style>
.image-container {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20240318162718/download.png");
width: 200px;
height: 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>
Using CSS background image property
</h2>
<div class="image-container"></div>
</body>
</html>
Output:
Using CSS background image property Example Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...