HTML Image Tag

HTML, or Hypertext Markup Language, is the standard language used for creating websites. One of the essential elements of HTML is the image tag. The image tag is used to embed images in HTML documents, and it is a fundamental part of web development. This article will explain the image tag and how to use it with an example and output.

The image tag in HTML is written as <img> and is a self-closing tag. It is used to embed images in an HTML document, and it requires the "src" attribute to specify the image's file path or URL.

Here is an example of how to use the image tag in HTML:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Website</title>
5  </head>
6  <body>
7    <h1>Welcome to my website</h1>
8    <img src="image.jpg" alt="An example image">
9  </body>
10</html>

In this example, we have used the image tag to embed an image in an HTML document. We have set the src attribute to "image.jpg" to specify the location of the image file. We have also set the "alt" attribute to "An example image" to provide alternative text for the image. The alternative text is displayed in case the image cannot be loaded or for users with visual impairments who use screen readers.

When we view this HTML in a web browser, we will see the image displayed in the document. The alt text will be displayed if the image cannot be loaded or if the user has disabled image display.

In addition to the src and alt attributes, the image tag has several other attributes that can be used to further customize the image display. Some of these attributes include:

  • width and height: Used to specify the width and height of the image in pixels.
  • title: Used to specify the image's title text, which is displayed when the user hovers over the image.
  • class and id: Used to specify the image's CSS class and ID attributes, which can be used for styling and scripting purposes.

Here is an example that demonstrates the use of these additional attributes:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Website</title>
5    <style> .example-image {
6        width: 200px;
7        height: 200px;
8        border: 1px solid #ccc;
9      } </style>
10  </head>
11  <body>
12    <h1>Welcome to my website</h1>
13    <img src="image.jpg" alt="An example image" title="This is an example image" class="example-image">
14  </body>
15</html>

In this example, we have set the "width" and "height" attributes to 200 pixels to specify the image's dimensions. We have also set the "title" attribute to "This is an example image" to provide additional information about the image. Finally, we have set the "class" attribute to "example-image" and defined a corresponding CSS style that sets a border around the image.