How to add a hit map on top of an image in HTML ?

How to specify an alternate text for an image in HTML ?

Last Updated : 09 Sep, 2020

The alternative text for an image is useful when the image not displayed/loaded. If the image is not loaded the its alternative text is displayed on the web page. Alternative text is the alternative information for an image.

Example 1: In this example, the image path contains the image so it will display the image.

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        How to specify an alternate 
        text for an image? 
    </title> 
</head> 

<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 

    <h2>
        How to specify an alternate 
        text for an image?
    </h2> 

    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Output:

Example 2: In this example, the image path is not correct so it will display alternative text information.

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        How to specify an alternate 
        text for an image? 
    </title> 
</head> 

<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 

    <h2>
        How to specify an alternate 
        text for an image?
    </h2> 

    <img src= "geeks.png"
        alt="GeeksforGeeks logo"> 
</body> 

</html>

Output:

How to add a hit map on top of an image in HTML ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to set an alternate text for area in HTML5 ?

In this article, we will learn how to specify an alternate text for an area in HTML5. This alternate text is displayed due to various reasons like the use of a screen reader, incorrect or non-existing image path in the src attribute, or a slow internet connection. Approach: We will use the alt attri

How to Arrange Images and Text in HTML?

In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enh

How to Insert an Image from Folder in HTML

The <img> src attribute is used to insert an image from folder in HTML. The src attribute accepts absolute and relative file path. Table of ContentUsing HTML <img> src AttributeInsert Image from Folder in CSSInsert Image from Folder using HTML <img> src AttributeThe <img> tag

How To Change Image Size In HTML?

To change the size of an image in HTML, you can use width and height attribute within <img> tag. Alternatively, we can use CSS properties to set or change the image size. Change image size feature is useful while developing a responsive web page.Table of ContentUsing HTML width and height Attr

How to add a hit map on top of an image in HTML ?

HTML is a Markup language is used to design web pages. When we need to make an image also works as a link, we use the <a> tag but in this tag, our whole image links to only one page. What will we do if we want to make every part of the image link to different resources? So, For this map tag co

How to Put Text Below the Image in HTML?

In web development, itâ€™s common to add descriptive text or captions below images to provide context or improve accessibility. There are a couple of ways to achieve this using HTML and CSS we will going to explore them all.These are the following approaches to put text below the image in HTML:Table o

How to Set Caption for an Image using HTML?

A caption for an image is a short description for a title that explains the image, providing context or additional information. In HTML, add a caption to an image by using the <figure> tag for the image and the <figcaption> tag below it for the caption text.Syntax<figcaption> Figur

How to Insert an Image in HTML?

To insert an image in HTML, you can use <img> tag. This tag uses the src attribute to define the URL of the image file. We can also use CSS to insert image in HTML.Table of ContentUsing img TagUsing background-image propertyInsert an Image using img TagThe <img> tag is the primary method

How to create a client-side image-map in HTML5 ?

In this article, we will create a client-side image map by using an <img> tag. The <img> tag is used to add images on a webpage. This tag is an empty tag which means it can contain only a list of attributes and it has no closing tag. Syntax: <img src="url" alt="some_text" usemap="#map

How to Resize an Image in HTML?

Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint