How To Display an Image In Html5 | Use of Image Tag In Html5

HTML tutorials

Image Tag In Html5

HTML tutorials

To display an image in Html you have to use the <img> or the image tag. The image tag is an empty tag and is used as a single tag. It is an inline tag. You have to use its “src” attribute give the location of the image. To explain more see the example below.

HTML code example:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset=”UTF-8″ />

<title>

HTML image tag

</title>

</head>

<body>

<header>

<img src=”images/my_image_test.png”

alt=”My image test” width=”240″ height=”240″ title=”My image test” />

</header>

<article>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque sit amet lorem ligula. Nam pulvinar nunc ac magna

aliquam quis sodales dui elementum. Fusce a lacus leo. Maecenas

ut dui eu quam condimentum sagittis.

</p>

</article>

</body>

</html>

In the above code you can see that we are using an html image tag to display an image in our html page. We are using the image tag with its attributes like src, width, height, alt and title. The src or the source attribute is the most important attribute in an image tag. This attribute specifies the image’s source or specifies where the image is located.

The alt or the alternate attribute is used add the alternate for the image if the image does not appear. It is good to use the alt tag to tell the robots about the image. The width and height are used to enforce the width and height of an image.

The title attribute is used to display the title of the image. It will be shown when someone hovers over the image in a web page. If the image is not displayed then the title will appear when you hover over the alternate text of the image.
In the modern days images are very much used in the link or anchor tags. We will discuss it later when we will be discussing the anchor tags.

Comments