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

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

Solution:

HTML Code:

<!DOCTYPE html><!-- Opening tag for declaring the document type -->
<html lang="en"><!-- Opening tag for the root element of the HTML document with the lang attribute set to "en" for English language -->
<head><!-- Opening tag for the document's header section -->
<meta charset="utf-8"><!-- Metadata tag specifying the character encoding of the document -->
<title>Example of HTML5 header element</title><!-- Title of the HTML document -->
<meta name="description" content="This is an example of HTML5 header element. header element is the head of a new section." /><!-- Meta tag specifying the description of the HTML document -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<header><!-- Opening tag for the header element -->
<h1>Example of HTML5 header element</h1><!-- Heading level 1 inside the header element -->
<p>header element is the head of a new section. <!-- Paragraph element containing text content -->
It may contain : </p><!-- Continuation of the paragraph -->
<ul><!-- Opening tag for the unordered list element -->
<li>h1-h6</li><!-- List item specifying the usage of heading elements -->
<li>hggroup</li><!-- List item specifying the usage of the hggroup element -->
<li>Table of content</li><!-- List item specifying the usage of a table of contents -->
<li>Search Form</li><!-- List item specifying the usage of a search form -->
<li>Logos</li><!-- List item specifying the usage of logos -->
</ul><!-- Closing tag for the unordered list element -->
</header><!-- Closing tag for the header 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 represents a basic HTML document structure with a focus on the header element.
The <html> element is the root element of the HTML document, and the lang attribute is set to "en" to specify the language as English.
The <head> element contains meta-information about the HTML document, such as the character encoding and the title.
Inside the <head> element, there is a <meta> tag specifying the description of the HTML document.
The <body> element contains the visible content of the HTML document.
Inside the <body> element, there is a <header> element, which typically contains introductory content or navigational links for the document or a section of the document.
Within the <header> element, there is a <h1> (heading level 1) element representing the main heading of the section.
Following the main heading, there is a paragraph (<p>) element providing additional information about the header element.
This paragraph is followed by an unordered list (<ul>) containing list items (<li>) specifying different elements that may be included within a header, such as headings, groupings, table of contents, search forms, and logos.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page