HTML5: How to define an image?

Last update on February 09 2024 12:52:58 (UTC/GMT +8 hours)

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 define 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 -->
<p><!-- Opening tag for a paragraph element -->
<img src="https://www.w3resource.com/images/layout.gif"><!-- Image element specifying the source URL of the image to be displayed -->
</p><!-- Closing tag for the paragraph 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 demonstrates how to define an image using 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/layout.gif".
When the HTML document is rendered, the browser fetches the image from the specified URL and displays it within the document.
The image is wrapped inside a <p> (paragraph) element, which is commonly used to group content together.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page