HTML <header> tag

The <header> tag is used to define the main introductory of a webpage or a section. It is commonly used within other HTML elements like <article> and <div> element.
It is a semantic HTML element. It does not render any visual appearance but proper using of this element helps in search engine results.

Type: Block Element

Syntax of <header> tag

<header>
  Header content
</header>

<header> tag is introduced in HTML5.

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<header>	6.0 or higher	9.0 or higher	4.0 or higher	5.0 or higher	11.1 or higher

Example of page-level header

<header>
 <h1> Main title of the page </h1>
</header>

Example of article-level header

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<article>

 <header>
  <h3> Searching a Business </h3>
  <p> Top 10 Online Jobs to make real cash </p>
 </header>

<ul>
 <li>
  List 1
   <p> Description of List 1</p>
 </li>
</ul>
</article>
</body>
</html>

Run The code »

<header> tag is mainly used to define navigation bar, search option and heading elements. Even logo or icon can also be included.

More reference

You should be careful when using this element. Placing certain HTML elements inside a <header>—such as <footer>, <address>, or another <header>—can result in an incorrect document structure.

The <footer> element and the <header> element are opposite in purpose, like “true” and “false.” Therefore, a <header> element should not be placed inside a <footer> element, and vice versa.
A single <header> element is enough to specify the content's introductory, so it is wrong to have another <header> element within the same heading section.

Default CSS property of <header> tag

header {
  display:block;
}

❮ Previous Next ❯