What is Longdesc in HTML ?
Last Updated :
02 Jun, 2023
Generally, we use alt text to describe the image. Sometimes, we need to provide longer descriptions of images, and in this situation, alt text may not be able to provide proper space. The longdesc attribute is the solution to this problem. We have to provide the link or URL of the web page which contains a description of the image as a value of the longdesc attribute.
We can use the longdesc attribute inside the IMG, iframe, and, frame elements. It can be used inside the IMG element, instead of alt text. We can use it inside the HTML iframe element, as a complement to the title attribute. However, the longdesc attribute doesn’t support most browsers as it is removed from HTML5.
Syntax:
<img src="Image_path_URL" longdesc="URL or data URI">
Attribute values: It takes a URL or data URI as a value of the longdesc attribute.
- Full URL: It’s a URL of external resources.
- Relative URL: It’s a link to internal resources.
- ID-based URL: To point out any element on the same page using the id.
- Data URI: encoded version of actual content.
Example 1: In this example, we will use the longdesc attribute.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green">GeeksforGeek</h1>
<img src=
width="100" height="132"
longdesc="#longdescdeno">
<img src=
width="100" height="132"
longdesc="longdesc.txt">
<img src=
width="100" height="132"
longdesc=
<img src=
width="100" height="132"
longdesc=
"data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E">
</body>
</html>
|
Output:
In HTML 5, we can use the <a> tag to provide links to the external or internal resources of the image. It is the best alternative to longdesc and is supported by all browsers.
Syntax:
<a href="image_description_URL"> <img src="image_path_URL"> </a>
Example 2: In this example, we will use the alternative of the longdesc attribute by using <a> tag.
HTML
<!DOCTYPE html>
<html>
<body>
<a href=
<img src=
</a>
</body>
</html>
|
Output:
Conclusion: As most browsers don’t support the longdesc attribute, users should use the img tag inside the <a> tag to provide a long description for images.
Share your thoughts in the comments
Please Login to comment...