HTML5: How to specify a URL to a detailed description of an image?
Solution :
HTML Code:
<!DOCTYPE html><!-- Declaration specifying the document type -->
<html><!-- Opening tag for the root element of the HTML document -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>How to specify a URL to a detailed description of an image</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<img <!-- Image element specifying the source URL of the image, alternate text, dimensions, and URL to a detailed description -->
src="https://www.w3resource.com/images/w3resource-logo.png" <!-- Source URL of the image -->
alt="html img src tag example" <!-- Alternate text for the image -->
width="50%" height="50" <!-- Dimensions of the image (50% of the width and 50 pixels of the height) -->
longdesc="w3r.txt"><!-- URL to a detailed description of the image -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->
Explanation:
- This HTML code demonstrates how to specify a URL to a detailed description of an image using the longdesc attribute within the <img> element.
- The <img> element is a self-closing tag used to embed images into an HTML document.
- The src attribute specifies the URL of the image to be displayed. In this example, it points to "https://www.w3resource.com/images/w3resource-logo.png".
- The alt attribute provides alternate text for the image, which is displayed if the image cannot be loaded or for accessibility purposes. In this case, it is set to "html img src tag example".
- The width and height attributes specify the dimensions of the image. In this example, the width is set to 50% of the viewport width and the height is set to 50 pixels.
- The longdesc attribute specifies the URL to a detailed description of the image. In this case, it points to a file named "w3r.txt" containing the detailed description.
- When the HTML document is rendered, the browser displays the image and provides a way for users to access the detailed description via the specified URL.
Live Demo:
See the Pen img-longdesc-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.