HTML <img> longdesc Attribute

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>

Output:

Supported Browsers: This attribute is not supported by any browser now.

HTML <img> longdesc Attribute

Explore