Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is Longdesc in HTML ?

  • Last Updated : 21 Oct, 2021

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:

HTML




<!--HTML code to demonstrate longdesc 
attribute inside the img element-->
<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green">GeeksforGeek</h1>
  
    <!-- Id-based URL -->
    <img src=
         width="100"
         height="132" 
         longdesc="#longdescdeno">
  
    <!-- Internal URL -->
    <img src=
         width="100"
         height="132" 
         longdesc="longdesc.txt">
  
    <!-- External URL -->
    <img src=
         width="100" 
         height="132" 
         longdesc=
  
    <!--data:URI -->
    <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 herf="image_description_URL"> <img src="image_path_URL"> </a>

Example 2:

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!