Head vs Header: Essential Elements Explained

Want to know the differences between the head and header elements in HTML? In this comprehensive guide, we’ll explain the roles of both elements and when to use them in your web development projects. Get a clear understanding of head vs header and start building better, more organized websites today.

Free Weekly SEO Newsletter

Hey! I’m Scott, I’ve been an SEO consultant for nearly 10 years. Get on my weekly newsletter to get..

Weekly SEO updates, keep up with the latest and greatest.
How we grow websites from zero to millions of visitors
A bunch of SEO tips and Tricks you won’t find anywhere else test

Get On The Newsletter

What are the differences between Head and Header?

The head element contains metadata about the webpage, including information such as the webpage’s title, scripts, and stylesheets. The head element is not visible to the user and is used to provide information to the browser and search engines about the webpage.

The header element represents a container for introductory content or navigation links. The header element can be used to contain the logo, site navigation, and other elements that are typically found at the top of a webpage.

In summary, the head element contains metadata about the webpage, while the header element represents a container for introductory content or navigation links.

Head / Header Code Examples

Here is an example of the head element in HTML:

<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>

In this example, the head element contains the webpage’s title, a stylesheet link, and a script tag.

Here is an example of the header element in HTML:

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

In this example, the header element contains the website’s title and a navigation menu. The header element can be used to contain other elements as well, such as a logo or search form.

Remember that the head element is used to provide metadata about the webpage, while the header element is used to contain introductory content or navigation links.

More Complex Element Examples

elements to structure a more advanced webpage:

<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
  <meta name="description" content="A website about my interests and hobbies">
  <meta name="keywords" content="hobbies, interests, blog">
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- main content goes here -->
  </main>
  <footer>
    <!-- footer content goes here -->
  </footer>
</body>