Understanding the Difference: head vs header in HTML

Max Musing

Founder

HTML documents leverage a mix of elements, each tailored for specific use cases. Within this mix, head and header elements often confuse people because of their seemingly similar names. However, they fulfill distinctly different roles within an HTML document. Grasping these differences is key to mastering HTML document structure, enhancing your web development skills.

What is the `head` element?

The head element acts as a metadata container, nestled between the <html> and <body> tags. Invisible to users, it typically encompasses elements that specify the document's title, character set, links to stylesheets, scripts, and other meta-information.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

What does the `header` element do?

Contrastingly, the [header element](https://www.basedash.com/blog/mastering-html-headers-structure-seo-accessibility), situated within the <body> of an HTML document, represents introductory content. It’s visible to users and often includes headings (<h1> to <h6>), logos, navigation, or any other elements that introduce the website or a specific section of it.

<body>
<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <!-- Main content goes here -->
</main>
</body>

How do `head` and `header` differ?

Location and visibility: The head element, placed outside the <body>, remains invisible to the end user. The header, however, forms part of the <body> and contains elements that users can see.
Purpose: While the head element holds meta-information critical for the web page, such as CSS links and the page title, the header element usually carries introductory content or navigation links.
Usage: A document contains only one head element, but can include multiple header elements across different sections or articles on the same page.

Distinguishing between these two elements not only sharpens your HTML document structuring but also paves the way for creating semantically correct and accessible web pages.

The next generation of charts and BI.

Coming soon.

Fast. Opinionated. Collaborative. Local-first. Keyboard centric.
Crafted to the last pixel. We're looking for early alpha users.

Request access