HTML - <header> Tag

HTML <header> tag is used to represent introductory content for an HTML document or section. It specifies a header for the document.

This element can define a global site header and some headings elements also includes a logo, company name, a search input field, an author name, global navigation, and other elements. The <header> element originally existed at the beginning of HTML for headings and is the first to be seen on a webpage.

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

Syntax

<header>
  ...
</header>

Attribute

HTML header tag supports Global and Event attributes of HTML.

Examples of HTML header Tag

Bellow examples will illustrate the usage of header tag. Where, when and how to use header tag to create header elements of any website.

Creating header Element

The following program shows the usage of the HTML <header> tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header Tag</title>
</head>

<body>
   <!--create header tag-->
   <p>'header' element(tag) example</p>
   <header>
      <h1>HTML</h1>
      <p>
         Full form of above content: Hyper Text Markup Language.
      </p>
   </header>
</body>

</html>

Using header tag with article element

In this example we will create a article element inside of that we will create a header element to define the header of the article element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header Tag</title>
</head>

<body>
   <!-- Creating header Element -->
   <h2>HTML 'header' Element</h2>
   <article>
      <header>HTML Tags</header>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </article>
   <article>
      <header>HTML Attributes</header>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </article>
</body>

</html>

Styling header Element

Consider the following example, where we are going to use the <header> tag and applying the CSS properties.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header tag</title>
   <style>
      header {
         color: green;
         font-style: italic;
      }
   </style>
</head>

<body>
   <!--create header tag-->
   <p>'header' element(tag) example</p>
   <header>
      <h1>Cricket</h1>
      <p>
         I love playing and watching cricket matches.
         My favorite player is Virat Kohli.
      </p>
   </header>
</body>

</html>

Linking header Element

In this example, we are going to use the <header> tag with the anchor element

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header Tag</title>
   <style>
      header {
         color: rgb(4, 78, 138);
         font-style: italic;
      }

      .demo {
         background: left / cover url("91442692.webp");
         height: 120px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 20px;
         text-decoration: none;
      }
   </style>
</head>

<body>
   <!--create header tag-->
   <p>'header' element(tag) example</p>
   <header>
      <a class="demo" href="#">Gaming laptop</a>
   </header>
   <article>
      <header>
         <h2>HTML</h2>
         <p>Hyper Text Markup Language</p>
      </header>
      <p>
         HTML is a standard markup language for documents 
         designed to displayed in a web browser.
      </p>
   </article>
</body>

</html>

Supported Browsers

Tag
header	Yes 5.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm