Tutorialspoint.dev

HTML 5 | <header> Tag

The <header> tag in HTML is used to define the header for a document or a section.

  • The header tag contains 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.
  • The <header> element 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 requires a starting tag as well as an end tag.
  • There can be several <header> elements in one document.
  • A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

Syntax:

<header> ...</header>

Below examples illustrate the <header> element in HTML:

Example 1:

<!DOCTYPE html>
<html>
    <head>
        <title>Header Tag</title>
    </head>
    <body>
        <article>
            <header>
                <h1>This is the heading.</h1>
                <h4>This is the sub-heading.</h4>
                <p>This is the metadata.</p>
            </header>
        </article>
    </body>
</html>                    

Output:



Example 2:

<!DOCTYPE html>
<html>
    <head>
        <title>Header Tag</title>
    </head>
    <body>
        <header>
            <h1>GeeksforGeeks</h1>
            <p>
                    Algo</a> | 
                <a href="https://tutorialspoint.dev/slugresolver/data-structures/">DS</a> | 
                <a href="https://tutorialspoint.dev/slugresolver/category/program-output/">
                    Languages</a> |
                <a href="https://tutorialspoint.dev/slugresolver/company-interview-corner/">
                    Interview</a> |
                <a href="https://tutorialspoint.dev/slugresolver/student-corner/">
                    Students</a> |
                <a href="https://tutorialspoint.dev/slugresolver/gate-cs-notes-gq/">
                    Gate</a> |
                <a href="https://tutorialspoint.dev/slugresolver/
                articles-on-computer-science-subjects-gq/">CS Subjects</a> |
                <a href="https://tutorialspoint.dev/slugresolver/quiz-corner-gq/">
                    Quizzes</a
            </p>
        </header>
    </body>
</html>                    

Output:

Supported Browsers: The browsers which supports <header> tag are given below:

  • Apple Safari 5.1+
  • Google Chrome 6+
  • Firefox 4+
  • Opera 11.1+
  • Internet Explorer 9+


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter