HTML Header <header>

« Prev Next »

The <header> tag is a semantic element for grouping introductory content and navigation links. It is most commonly used at the top of the page but can be used inside sections or articles.

<header>
   Intro content like logo, site name, nav, etc.  
</header>

html-header

Example: Page-Level Header

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <header>
    <h1>My Awesome Website</h1>
    <p>Welcome to my world of code and creativity!</p>
    <nav>
      <a href="#home">Home</a> |
      <a href="#services">Services</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>
</body>
</html>
Run ›

Example: Section-Level Header

<article>
  <header>
    <h2>Understanding JavaScript Closures</h2>
    <p>Posted on June 21, 2025, by Praveen</p>
  </header>
  <p>JavaScript closures are a powerful concept...</p>
</article>
Run ›
notepad
  • Do not place <footer> or <main> inside <header>.
  • Avoid placing unrelated content — keep it focused on intro or navigation.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.