w3techblog@outlook.com (+91) 94 08 224007

HTML (Hyper Text Markup Language)

Tutorial No 3 : Working with images in HTML

Images in HTML
Images in HTML

Earlier, the webpages used to comprise of only texts, which made them appear quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. Let’s see how to add images on a webpage.

Adding images on a webpage :

The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag.

 <img src="example.png">
Attribute:
  • src:

    • src stands for source. Every image has a src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.

  • alt:

    • If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is an user-defined text.

Example
<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Inserting an image using "img" tag</title> 
</head> 
  
<body> 
    <p>inserted image using <img> tag:</p> 
    <img src= 
"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80" 
         alt="Sample Image"> 
  
</body> 
  
</html>
Output
Sample Image
Aligning a Picture:

By default, an image is aligned at the left side of the page, but it can be aligned to center or right using the align attribute.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Inserting an image using "img" tag</title> 
</head> 
  
<body> 
    <p>inserted image using <img> tag:</p> 
    <img src= 
"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80" align="right" alt="Sample Image"> 
  
</body> 
  
</html>
Output:
Sample Image


















Adding Image as a Link:

An image can work as a link with a URL embedded in it. It can be done by using the “img” tag inside an “a” tag.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Inserting an image using "img" tag</title> 
</head> 
  
<body> 
    <p>inserted image using <img> tag:</p> 
    <a href="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80"> 
        <img src= 
"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80" 
             alt="Sample Image"> 
    </a> 
</body> 
  
</html>
Output: (Image is clickable)
GeeksforGeeks logo
Supported Browser:

<img>
tag supported browsers are listed below.

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Opera
  • Internet Explorer