Skip to content
Related Articles

Related Articles

Improve Article

What is usually included in the header of an HTML document ?

  • Last Updated : 08 Oct, 2021

The <header> is a tag introduced in the HTML5. In this article, we are going to discuss the use cases of header tags and what is usually included in the header of an HTML document. HTML5 came up with the <header>, the concept of the header was also there in HTML4. The programmer used to create an HTML <div> with the id of “header” to specify that it is the header. 

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

 <div id="header"></div>

 In HTML5, we have <header> tag along with tags like <main>,<footer> etc.

header web structure

HTML5 <header> tag: In our normal notebook, we use our uppermost section of the page for heading or header. We specify the heading of the content on that page.  The <header> tag is generally used to hold the information about the content. It generally gives the user information about what the page is actually for and what the user can expect in the <main> section of the website.



The <header> tag is generally used for heading purposes, you may see the use of these header tags <h1> to <h6>. The <nav> tag is used inside the <header> tag . This may happen if <nav> is very small and if the content of <nav> tag is used to identify the different web content. In such cases, the <nav> is usually taken inside of the <header> tag.

If our web page <main> has more than one section for different contents, then each section can also have their separate <header> tags to hold the information about a particular section.

header tags:

Where we can / cannot use <header> tag?

As header is used for heading purposes, it cannot be used in the <footer>, but it can be used inside <main> tag for describing different sections such as every <article> tag in our <main>.

Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <style>
        header {
            background-color: aquamarine;
        }
 
        footer {
            color: white;
            background-color: black;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
            left: 0;
        }
    </style>
</head>
 
<body>
    <header>
        <h1>Heading</h1>
        <a href="#">article1</a>
        <a href="#">article2</a>
        <a href="#">article3</a>
        <a href="#">article4</a>
 
         
<p>
            This paragraph give more info
            about the web content. So it
            is placed inside the header tag.
        </p>
 
    </header>
 
    <main>
        <header>
            <h2>Header for sub heading</h2>
        </header>
 
         
<p>
            This is our original content, which
            is introduced in both the header of
            this web page. but the header in main
            tag is specifically for the content
            itself rather than web page as whole.
        </p>
 
 
        <article>
            <header>
                <h3>Article heading</h3>
            </header>
 
             
<p>
                This shows that header tag can
                also be found inside the article
                tag to show the article title/
                heading. So header tag is also
                used for that purpose also.
            </p>
 
        </article>
    </main>
 
    <footer>
        The footer usually have copyright
        info and address.
    </footer>
</body>
 
</html>

Output:

Example 2: See the below example for an understanding of what exactly the header is useful for. We can also include our navigation bar in the header as it is also an important part of the web page that defines the structure of our content and navigate through the different sections of the page. Hence it can also be placed inside the header tag.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <style>
        header {
            width: 100%;
            height: 10%;
            background-color: #E1A2B8;
        }
 
        nav {
            color: white;
        }
 
        a {
            text-decoration: none;
            background-color: lightgreen;
            padding: 5px;
            border-radius: 5%;
            margin: 20px;
        }
 
        main {
            font-size: 150px;
        }
    </style>
</head>
 
<body>
    <header>
        <h1>Coffee shop</h1>
        <nav>
            <a href="#">Menu</a>
            <a href="#">Review</a>
            <a href="#">Contact</a>
            <a href="#">About Us</a>
        </nav>
    </header>
     
    <main>
        Main content...
    </main>
</body>
 
</html>

Output:

 

Note: The default CSS for <header > tag is display: block




My Personal Notes arrow_drop_up
Recommended Articles
Page :