HTML - <header> Tag

Quiz

The <header> Tag

The 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 may include a logo, company name, search input field, 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 web page.

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

Syntax

Following is the syntax of <header> tag −

<header>
  ...
</header>

Attributes

The HTML header tag supports both Global and Event attributes in HTML.

Example: Creating Header Element

The following program demonstrates the usage of the HTML <header> tag. The examples below illustrate where, when, and how to use the <header>tag to create header elements for any website

<!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>

Example: Header tag with Article Element

In this example we will create a article element, and within it, we will add a <header> element to define the header of the <article> element. This HTML code demonstrates the use of the <header> tag within <article> elements to create headers for sections about HTML tags and attributes, enhancing content structure and readability.

<!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>

Example: Styling Header Element

Consider the following example, where we use the <header> tag and apply CSS properties. This HTML code styles the <header> element with green, italic text and includes a header titled "Cricket" with a paragraph expressing admiration for Virat Kohli.

<!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>

Example: Linking Header Element

In this example, we will use the <header> tag with an anchor element. This HTML code styles the <header> element and includes a styles link, as well as an article about HTML with a header.

<!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

Print Page