This question already has an answer here:
- <header> vs. <head> 5 answers
The Question
I've been coding for a while and realized that the head and header look exactly the same. Are they the same, and what is the difference between them? Does it make a difference?
After researching a bit I couldn't find much info on this, I may not have been digging deep enough. The info I found was that the <head> tag came out since HTML 1 as the <header> tag came out in HTML5. Is one more stable from the other?
Summary
I would like to understand the difference between the two tags. I would like a creditable/ or official source. If you can please post the link of where you got the information. A example of the code would be helpful too! The main question I am asking is whether there is a difference and if so what difference is there. Is there a benefit from one of them? Thank you for taking the time to read this.
A quick Google search reveals the following:
Head tag:
The HTML <head> element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets. (HTML MDN)
Header tag:
The HTML <header> 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. (HTML MDN)
-
In other words; the head tag is used for document title, styling, scripts, etc.
Whereas the header tag is used for headers as seen in articles.
Newspaper 'header'
EDIT: Updated reference, as psuedocoder mentioned, W3Schools is not always fully reliable.
From W3C:
https://www.w3.org/wiki/HTML/Elements/head
"The <head> element represents a collection of metadata for the Document."
https://www.w3.org/wiki/HTML/Elements/header
"The <header> element represents a group of introductory or navigational aids."
The main difference is that the <head> element is for META data and the <header> element is for actual content.
The HTML <head> tag is a container for metadata and links to scripts and stylesheets.
The <header>tag is a semantic container used to designate contents that is introductory or navigational in nature.
来源：https://stackoverflow.com/questions/33919706/what-is-the-real-difference-between-the-head-and-header-tag