HTML and CSS Reference
<header> vs. <head> vs. <h1> through <h6> Elements
It is easy to confuse the <header> element with the <head> element or the
heading elements, <h1> through <h6> . They all have different semantic mean-
ings and should be used according to their meanings. For reference...
The <header> element is a structural element that outlines the heading of a seg-
ment of a page. It falls within the <body> element.
The <head> element is not displayed on a page and is used to outline metadata,
including the document title, and links to external files. It falls directly within the
Heading elements, <h1> through <h6> , are used to designate multiple levels of
text headings throughout a page.
The <nav> element identifies a section of major navigational links on a page. The <nav>
element should be reserved for primary navigation sections only, such as global navigation,
a table of contents, previous/next links, or other noteworthy groups of navigational links.
Most commonly, links included within the <nav> element will link to other pages within
the same website or to parts of the same web page. Miscellaneous one-off links should not
be wrapped within the <nav> element; they should use the anchor element, <a> , and the
anchor element alone.
The <article> element is used to identify a section of independent, self-contained con-
tent that may be independently distributed or reused. We'll often use the <article> ele-
ment to mark up blog posts, newspaper articles, user-submitted content, and the like.
When deciding whether to use the <article> element, we must determine if the content
within the element could be replicated elsewhere without any confusion. If the content
within the <article> element were removed from the context of the page and placed,
for example, within an email or printed work, that content should still make sense.