Member Avatar for Zinavo

What is the Difference Between Head and Header?

  • 5 Contributors
  • 4 Replies
  • 8K Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Short version: <head> holds metadata for the document; <header> is visible, introductory content for a page or section. They are unrelated to HTTP headers (transport-level metadata).

Practical guidelines you can use right away:

  • <head>: exactly one per document. Put <title>, <meta charset>, viewport/meta SEO tags, <link rel="stylesheet">, <style>, and scripts that use defer/async. Nothing here should render on the page. Omitting critical items (like <meta charset="utf-8"> or the viewport meta) can cause garbled text or poor mobile layouts. See MDN: <head>.
  • <header>: visible, semantic wrapper for intro/nav. You can have multiple, e.g., one for the site and one per <article>/<section>. It is not a heading itself; include an actual <h1>–<h6> inside. A page-level <header> is exposed as a banner landmark for assistive tech, improving navigation. It must not be inside <footer> or <address>. Spec: header element, MDN: <header>.

Example of section-level usage:

<section>
  <header>
    <h2>Getting Started</h2>
    <nav><a href="#intro">Intro</a> | <a href="#install">Install</a></nav>
  </header>
  <!-- section content -->
</section>

Common mistake: placing visible markup (e.g., images or text) in <head>; browsers may ignore or move it, and validators will flag it.

Recommended Answers

All 4 Replies

Member Avatar for anand9796

Head tag:
The HTML element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets.

Header tag:
The HTML element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

Member Avatar for Purvi_1

Head :
head is the tag at the top of your page containing your meta-tags, styles, scripts and title.

Header :
header tag contains information related to the title and heading related content which is display on web page.

Member Avatar for Dani

Turish, you're referring to yet a third thing, HTTP headers.

I think they were comparing head vs header HTML tags:

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.