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>