HTML5: How to define a footer for a document or section?

Last update on February 08 2024 12:47:26 (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 define a footer for a document or section</title><!-- Title of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<article><!-- Opening tag for the article element, representing a self-contained composition -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet congue arcu id cursus. Nunc turpis leo, iaculis in elementum eu, aliquam in libero. Praesent dictum vehicula eros, eget ornare neque ullamcorper in. In hac habitasse platea dictumst. Sed euismod, ante mattis convallis sollicitudin, tellus enim lacinia nunc, ut interdum neque neque id massa. Sed lorem orci, condimentum nec tempus eget, varius sed ipsum. Nam vitae eros vel libero tristique porttitor vitae eu odio. Fusce aliquet diam libero.</p><!-- Paragraph element containing placeholder text -->
</article><!-- Closing tag for the article element -->
<footer>Copyright 2011-12.</footer><!-- Opening and closing tags for the footer element, providing copyright information -->
</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 the use of the article and footer elements.
The article element represents a self-contained composition, typically containing content such as blog posts, news articles, or forum posts.
Inside the article element, there is a paragraph (p) element containing placeholder text (Lorem Ipsum).
The footer element is used to define a footer for the document or a section. In this case, it provides copyright information.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page