HTML header Tag

The <header> tag in HTML serves as a defining element for the header of a document or a section, encapsulating information pertinent to the title and heading of the associated content.

Typically, the <header> element houses the section’s headings (ranging from h1 to h6), logos, icons, and more. Introduced in HTML5, the <header> tag is a container tag, encompassing a starting tag, content, and an end tag.

Note: This tag cannot be placed within a <footer>, <address>, or another <header> element.

Syntax

<header> ...</header>

Attributes

This tag supports all the global attributes in HTML.

Example 1: This example illustrates the use of the <header> tag that makes the container for the head section of the document.

HTML
<!DOCTYPE html>
<html>

<body style="font-size: 25px;">
    <h1 style="color: green;">w3wiki</h1>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <header>
            <h3 style="color: green;">
              w3wiki Learning
              </h3>
            <p>Posted by GFG</p>
            <p>
                A Computer Science portal for Beginner.
                It contains well written, well thought <br>
                and well explained computer science and
                programming articles.
            </p>
        </header>
    </article>
</body>

</html>

 Output:

Example 2: In this example, we have used the <header> tag to contain the surrounding section’s heading, but not required every time.

HTML
<!DOCTYPE html>
<html>

<body>
    <h1>w3wiki</h1>
    <h3>HTML Header Tag</h3>

    <!--HTML header tag starts here-->
    <header>
        <h1>This is the heading.</h1>
        <h4>This is the sub-heading.</h4>

        <p>This is the metadata.</p>
    </header>
    <!--HTML header tag ends here-->
</body>

</html>

Output:

HTML <header> Tag

Example 3: In this example, we have represented navigational aids by using the <header> tag.

HTML
<!DOCTYPE html>
<html>

<body>
    <h1>w3wiki</h1>
    <h3>HTML Header Tag</h3>

    <!--HTML header tag starts here-->
    <header>
        <a href=
"https://www.w3wiki.net/fundamentals-of-algorithms/">
            Algo</a> |
        <a href=
"https://www.w3wiki.net/data-structures/">
            DS</a> |
        <a href=
"https://www.w3wiki.net/category/program-output/">
            Languages</a> |
        <a href=
"https://www.w3wiki.net/company-interview-corner/">
            Interview</a> |
        <a href=
"https://www.w3wiki.net/student-corner/">
            Students</a> |
        <a href=
"https://www.w3wiki.net/gate-cs-notes-gq/">
            Gate</a> |
        <a href=
"https://www.w3wiki.net/articles-on-computer-science-subjects-gq/">
            CS Subjects</a> |
        <a href=
"https://www.w3wiki.net/quiz-corner-gq/">
            Quizzes</a>
    </header>
    <!--HTML header tag ends here-->
  
</body>

</html>

Output:

Supported Browsers

  • Google Chrome 5
  • Edge 12
  • Firefox 4
  • Opera 11.1
  • Safari 5

HTML is the foundation of web pages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



Contact Us