HTML <img> longdesc Attribute

Last Updated : 22 Aug, 2021

In this article, we will discuss longdesc in HTML. Longdesc is an HTML attribute used to provide a detailed description of an image. It is an optional attribute that can be used to add extra details about an image beyond the shorter description provided as a tooltip.

Syntax:

<img longdesc="string">

Attribute Value:

longdesc: The value can be a URL to the specified document containing the detailed description.

Note: The longdesc attribute will only work with the older version of HTML(ie HTML 4.0 or older). It is no longer supported by the browser which uses the latest version of HTML.

Example: In this example, we will include GFG.html which is a plain Html file containing additional detail about the image.

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>HTML img longdesc Attribute</title> 
    <style> 
        .container { 
            position: fixed; 
            top: 20%; 
            left: 44%; 
            margin-top: -65px; 
            margin-left: -100px; 
            text-align: center; 
        } 
  
        h1 { 
            text-align: center; 
            color: #24650b; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <p>Click on the image</p> 
  
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073840/gfg5.png"
            longdesc="image-descriptions/GFG.html" /> 
    </div> 
</body> 
  
</html> 

GFG.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <style> 
        p { 
            text-align: justify; 
            text-justify: inter-word; 
        } 
  
        .container { 
            box-sizing: content-box; 
            width: 600px; 
            height: 214px; 
            padding: 20px; 
            font-size: 18px; 
            position: fixed; 
            top: 20%; 
            left: 33%; 
            margin-top: -65px; 
            margin-left: -100px; 
            border-radius: 2px; 
        } 
  
        h1 { 
            text-align: center; 
            color: #24650b; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <p> 
            What We Offer We provide a variety of 
            services for you to learn, thrive and  
            also have fun! Free Tutorials, Millions  
            of Articles, Live, Online and Classroom  
            Courses ,Frequent Coding Competitions,  
            Webinars by Industry Experts, Internship  
            opportunities and Job Opportunities.  
            With the idea of imparting programming  
            knowledge, Mr. Sandeep Jain, an IIT  
            Roorkee alumnus started a dream,  
            GeeksforGeeks. Whether programming 
            excites you or you feel stifled,  
            wondering how to prepare for interview 
            questions or how to ace data structures  
            and algorithms, GeeksforGeeks is a  
            one-stop solution. Our vision is to  
            build a gigantic network of geeks 
            and we are only a fraction of it yet. 
        </p> 
    </div> 
</body> 
  
</html> 

Output:

Example: However, the feature used in the above example is no longer recommended & not supported by any browser. Instead, we can add the link(<a> tag) to the image that will display the description of the image. For this, we will include the GFG.html file into our index.html file.

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>HTML img longdesc Attribute</title> 
    <style> 
        .container { 
            position: fixed; 
            top: 20%; 
            left: 44%; 
            margin-top: -65px; 
            margin-left: -100px; 
            text-align: center; 
        } 
  
        h1 { 
            text-align: center; 
            color: #24650b; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Welcome to GeeksforGeeks</h1> 
        <p>Click on the image</p> 
  
        <a href="GFG.html"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210816073840/gfg5.png" /> 
        </a> 
    </div> 
</body> 
  
</html> 

GFG.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <style> 
        p { 
            text-align: justify; 
            text-justify: inter-word; 
        } 
  
        .container { 
            box-sizing: content-box; 
            width: 600px; 
            height: 214px; 
            padding: 20px; 
            border: 1px solid black; 
            font-size: 18px; 
  
            position: fixed; 
            top: 20%; 
            left: 33%; 
            margin-top: -65px; 
            margin-left: -100px; 
            border-radius: 2px; 
        } 
  
        h1 { 
            text-align: center; 
            color: #24650b; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="container"> 
        <p> 
            A Computer Science portal for geeks.  
            It contains well written, well  
            thought and well explained computer  
            science and programming articles. 
            Free Tutorials, Millions of Articles,  
            Live, Online and Classroom Courses,  
            Frequent Coding Competitions, Webinars  
            by Industry Experts. With the idea  
            of imparting programming knowledge,  
            Mr. Sandeep Jain, an IIT Roorkee  
            alumnus started a dream, GeeksforGeeks. 
            Whether programming excites you or you 
            feel stifled, wondering how to prepare  
            for interview questions or how to ace  
            data structures and algorithms,  
            GeeksforGeeks is a one-stop solution.  
            Our vision is to build a gigantic  
            network of geeks and we are only a  
            fraction of it yet. 
        </p> 
    </div> 
</body> 
  
</html> 