Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the real difference between the "head" and "header" tag? [duplicate]

Tags:

html

header

head

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.

like image 676
makertech81 Avatar asked Nov 25 '15 14:11

makertech81


People also ask

What is the difference between the head and header tags?

The head tag is used for holding Meta information, title, links, etc. and is not displayed on the page. The header tag is used within the body of the website and can be used multiple times if required, e.g. to determine the top of an article .

What is the difference between heading tag and title tag?

What's the Difference? In HTML terms, a Title Tag is expressed as "title" and the H1 Tag is expressed as "h1". Both serve as titles to describe what your webpage is about. Because both the Title Tag and the H1 Tag share the same broader purpose, it is easy to understand why people confuse them.

What is the purpose of the head tag and heading tag?

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.

What is the difference between head and body tag in HTML?

A HTML file has headers and a "body" (payload) — just like a HTTP request. The <body> encapsulates the contents of the document, while the <head> part contains meta elements, i.e., information about the contents. This is (typically) title, encoding, author, styling etc.


3 Answers

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'. Newspaper 'header'

EDIT: Updated reference, as psuedocoder mentioned, W3Schools is not always fully reliable.

like image 133
Arena Avatar answered Oct 13 '22 10:10

Arena


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.

like image 43
pseudocoder Avatar answered Oct 13 '22 10:10

pseudocoder


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.

like image 29
Vecta Avatar answered Oct 13 '22 08:10

Vecta