Skip to main content

Image Tag

Image Tag​

The Image tag is used to add an image in an HTML page.

Syntax:

<img />

Attributes :

Attributes are used to describe tag or to provide more info to tag.

  1. src Attribute :

src Attribute are used to provide source or path of the image.

Syntax:

<img src="url" />

Code :

<!DOCTYPE html>
<html>
  <head>
    <title>Tags</title>
  </head>
  <body>
    <img
      src="https://media.istockphoto.com/id/1224064817/photo/laptop-computer-on-a-modern-wooden-business-desk-with-a-notepad-and-pen-in-unfocused.jpg?s=612x612&w=0&k=20&c=V9D-NQkP4t9uY9sGwn1qOVD4-_v63CBpw8YJuoNzQzM="
    />
  </body>
</html>

Output :

output-1
  1. height and width Attribute :

The width attribute are used to give width of an image, in pixels.

The Height attribute are used to give Height of an image, in pixels.

Syntax:

<img src="url" height="" width="" />

Code :

<!DOCTYPE html>
<html>
  <head>
    <title>Tags</title>
  </head>
  <body>
    <img
      src="https://media.istockphoto.com/id/1224064817/photo/laptop-computer-on-a-modern-wooden-business-desk-with-a-notepad-and-pen-in-unfocused.jpg?s=612x612&w=0&k=20&c=V9D-NQkP4t9uY9sGwn1qOVD4-_v63CBpw8YJuoNzQzM="
      height="500px"
      width="250px"
    />
  </body>
</html>

Output :

output-5

When you give both height and width to the image then image might lose its aspect ratio. You can preserve the aspect ratio by specifying only width or only height.

Code :

<!DOCTYPE html>
<html>
  <head>
    <title>Tags</title>
  </head>
  <body>
    <img
      src="https://media.istockphoto.com/id/1224064817/photo/laptop-computer-on-a-modern-wooden-business-desk-with-a-notepad-and-pen-in-unfocused.jpg?s=612x612&w=0&k=20&c=V9D-NQkP4t9uY9sGwn1qOVD4-_v63CBpw8YJuoNzQzM="
      height="200px"
    />
  </body>
</html>

Output :

output-2
  1. alt Attribute :

alt tag are used to provide alternative text of the image, if the image is cannot displayed for some reasons or we can provide wrong source of the image.

Code :

<!DOCTYPE html>
<html>
  <head>
    <title>Tags</title>
  </head>
  <body>
    <img
      src="https://media.istockphoto.com/id/1224064817/photo/laptop-computer-on-a-modern-wooden-business-desk-with-a-notepad-and-pen-in-unfocused.jpg?s=612x612&w=0&k=20&c=V9D-NQkP4t9uY9sGwn1qOVD4-_v63CBw8YJuoNzQzM="
      height="200px"
      alt="Computer"
    />
  </body>
</html>

Output :

output-3

Local Image

You can add a local image to your HTML page and then the first download or save the image in the same folder and then provide the source of the image. Ex: src= "imageName.png"

Code :

<!DOCTYPE html>
<html>
  <head>
    <title>Tags</title>
  </head>
  <body>
    <img src="html-logo.png" height="200px" alt="Computer" />
  </body>
</html>

Output :

output-4