HTML <header> Element

By Christopher Kielty, Published Jan 22, 2019, Updated Jan 24, 2019

<head>
  ...
</head>
<body>
  <header> 
   ...
  </header>
  <article>
   ...
  </article>
  <footer>
   ...
  </footer>
</body>

<header> is a newer element that's part of HTML5, intended to introduce a section. It goes in the <body> of a page and works well with tags like <article>, <section>, and <footer>. These are all HTML5 layout elements with semantic meaning. Often things like logos, menus and <h1>'s will go in the <header>.

Unfortunately, there are other elements that sound an awful lot like header, for example <head>, which is not the same thing at all. Also there's <h1>, 2, 3, etc., which stand for heading -- basically the title of the document body. <head> and <body> go next to each other within the main <html> tags. <header>, <article> and <footer> go next to each other within the <body> element. When I forget which is which, I just think footer sounds like it goes with header, and both go in the body of the page. Head sounds more like it's a sibling of body rather than of footer.

<header> isn't necessarily required. It's fine to just put <h1> and all of the document body content directly in <body>. I like using <header>, <article> and <footer> to keep things organized.