A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/html/html-img-tag/ below:

HTML IMG Tag - GeeksforGeeks

HTML IMG Tag

Last Updated : 23 Jul, 2025

The HTML <img> tag is used to embed images in a web page. It is an empty or self-closing tag, meaning it doesn’t have a closing tag. It allows to display images from various sources, such as files on a website or URLs from other websites.

index.html
<html>
    <head></head>
<body style="text-align: center;">
    <h3>GeeksforGeeks logo</h3>
    <img src=
        "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
         width="420" height="100" 
         alt="Geeksforgeeks.org">
</body>
</html>
Syntax
<img src="./image.png" alt="image description" width="200" height="100">
HTML image Tag Attributes Attribute Description src Specifies the path to the image. alt Provides alternate text for the image, useful for informing users about the image and displaying in case of network issues. crossorigin Allows importing images from third-party sites with cross-origin access for use with canvas. height and width Specifies the height and width of the image. ismap Specifies an image as a server-side image map. loading Specifies whether a browser should defer loading of images until certain conditions are met or load an image immediately. longdesc Specifies a URL to a detailed description of an image. referrerpolicy Specifies which referrer information to use when fetching an image (e.g., no-referrer, no-referrer-when-downgrade, origin). size Specifies image sizes for different page layouts. srcset Specifies a list of image files to use in different situations. usemap Specifies an image as a client-side image map. Custom styling with image tag index.html
<html>
<head>
  	<style>
    	img {
      		width: 200px;
            height: auto;
            border: 5px solid #4CAF50;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
    	}
    	img:hover {
      		transform: scale(1.1);
    	}
  	</style>
</head>
<body>
  	<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
       alt="gfg image">
</body>
</html>

Now you have clear understanding of HTML <img> so you can implement this knowledge to create some interesting components using CSS and JavaScript

Using CSS Using JavaScript

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4