Skip to content
Related Articles

Related Articles

HTML5 <header> Tag

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 22 Jul, 2022

The <header> tag in HTML is used to define the header for a document or a section as it contains the information related to the title and heading of the related content. The <header> element is intended to usually contain the section’s heading (an h1-h6 element or an <hgroup> element), but this is not required. It can also be used to wrap a section’s table of contents, a search form, or any relevant logos. The <header> tag is a new tag in HTML5 and it is a container tag ie., it contains a starting tag, content & the end tag. There can be several <header> elements in one document. 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.

The below examples illustrate the <header> element 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>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <header>
            <h3>GeeksforGeeks Learning</h3>
             
<p>Posted by GFG</p>
 
 
             
<p>
               A Computer Science portal for geeks.
               It contains well written, well thought
               and well explained computer science and
               programming articles.
            </p>
 
 
 
        </header>
    </article>
</body>
</html>


 Output:

HTML <header> Tag

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>GeeksforGeeks</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>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>
     
    <!--HTML header tag starts here-->
    <header>
        <a href=
        Algo</a> |
        <a href=
        DS</a> |
        <a href=
        Languages</a> |
        <a href=
        Interview</a> |
        <a href=
        Students</a> |
        <a href=
        Gate</a> |
        <a href=
        CS Subjects</a> |
        <a href=
        Quizzes</a>
    </header>
    <!--HTML header tag ends here-->
</body>
</html>


Output:

HTML <header> Tag

Supported Browsers:

  • Google Chrome 5 and above
  • Internet Explorer 9 and above
  • Microsoft Edge 12 and above
  • Firefox 4 and above
  • Opera 11.1 and above
  • Safari 5 and above

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!