HTML Images

HTML Tutorial

About Lesson

HTML Images

In this tutorial, we will learn about Images and its size, border and alignment in HTML with the help of examples.

Images Element

Images are very important to improve the design and appearance of a webpage.
Web pages without images look boring and uninteresting. Users can add images on their websites by using an image tag.

An HTML image element 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.x
The <img> tag is an empty tag, which means it can contain only a list of attributes.
The <img> tag only consists of an opening tag.

Syntax

<img src = "URL" alt = "alternate text">

Image Tag Attributes

src Attribute

Specifies the path(URL) of the image.
src stands for source. It is used to tell the browser where to find the image you want to display.
The URL provides the location to the browser where the image is stored.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg">
  </body>
</html>

Output

alt Attribute

The alt attribute provides an alternate text for an image.
If the browser cannot display or find the image, it will display the value of the alt attribute.
The alt attribute is used when the user cannot view the image for some reason (because of slow internet connection, an error in the src attribute, and so on).

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display">
  </body>
</html>

Output

image did not display

width and height Attributes

The width and height attributes are used to specify the width and height of an image.
The width and height attribute always defines the width and height of an image in pixels, but other units used as well like %, rem, em, etc.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" width = "60"  height = "70">
  </body>
</html>

Output

border Attribute

By default, the image will have a border around it.
By using border attribute we can change the thickness of the border.
If The value of the border attribute is 0, that means no border around the picture.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" border = "5px">
  </body>
</html>

Output

align Attribute

By default, an Image will align at the left side of the page.
By using align attribute we can align the image to center or right.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" align = "center">
  </body>
</html>

Output