Open In App

Explain the difference between head Tag and header Tag in HTML5 ?

Last Updated : 23 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The <head> element is a container for metadata and is placed between the <html> and <body> tags. The <header> is for the main content section’s introductory elements, like headings or logos and it mainly focuses on what appears at the top of the webpage.

<head> Element

The <head> element is part of the HTML document’s structure, and it contains metadata and resources that are crucial for the document but not directly displayed on the page. For instance:

  • Meta information (e.g., charset, viewport).
  • Title of the document (<title>).
  • Links to external stylesheets (<link>).
  • JavaScript includes (<script>).
  • Metadata for search engines (<meta>)

Syntax

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document Title</title>
</head>

<header> Element

The <header> element is a semantic HTML5 element that is used to define the header section of a document or a section within a document. It usually contains introductory content, headings, logos, navigation menus, or other elements related to the introduction of the document or a specific section. For instance:

  • Page title or logo.
  • Navigation menus.
  • Headings or introductory text.

Syntax

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

Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads