HTML5: How to specify self-contained content?

Last update on February 08 2024 12:47:27 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Opening tag for declaring 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 self-contained content</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<figure><!-- Opening tag for the figure element -->

<img src="https://www.w3resource.com/images/w3logo6.png" alt="w3resource Logo"    
width="149" height="52" /><!-- Image tag with attributes specifying the source, alternate text, width, and height of the image -->

</figure><!-- Closing tag for the figure element -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->

Explanation:

This HTML code includes an image within a figure element.
The image is self-contained, as it contains all necessary information within the image tag itself.
Self-contained content is beneficial for accessibility and portability, as it ensures that all relevant information, such as alternate text, dimensions, and source, is included directly within the HTML.

Live Demo:

See the Pen figure-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page