Menu
According to HTML5Doctor.com and other HTML5 introductory sites, the header element should contain a h1-h6 tag plus other navigational or introductory content. However, the traditional 'header' on most websites consists of just a logo and some navigational elements.
A lot of major sites including Facebook and Twitter use a h1 tag for their logo, which seems illogical to me, since the logo is not the most important or most informative element on the page.
A h1 tag appears in the content section of 95% of websites, not the header section. So why are we instructed to include a h tag in the header? If we must, why don't Facebook and Twitter use a h6 tag instead?
757
Headings Are Important It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3> , and so on. Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
The <header> tag in HTML is used to define the header for a document or a section as it contains the information related to the title and heading of the related content.
HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
The structure of H1, H2, H3 tags Here's how Hn tags should be used: For an article or webpage, remember that the H1 title is the most important section. H2 and H3 are used to organize sub-sections, while H4, H5 and H6 are intended to provide additional information, with more details.
You should take a look at the outline algorithm for HTML5.
You probably want your site title/logo to be a h1.
Imagine a small webpage, consisting of a page header (logo, site name, …), a site navigation and a blog entry (main content of this page):
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>ACME Inc.</header>
<div class="navigation">
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Here the only heading is the h1 inside the div. Semantically this would mean, that all content of this page is in the scope of this heading. See the outline of this page:
But this would not be true (in the semantic way): hierarchically, the page header "ACME Inc." is not "part" of the blog entry. Same goes for the navigation; it's a site navigation, not navigation for "Lorem Ipsum".
So the site header and the site navigation need a heading. Let's try to give them a h1, too:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h1>Site navigation</h1>
<ul>…</ul>
</div>
<div class="content">
<h1>Lorem Ipsum</h1>
<p>…</p>
</div>
</body>
Way better! The page outline now looks like:
But it's still not perfect: they are all on the same level, but "ACME Inc." is what makes all the webpages to form a website, it's the whole point why there are webpages at all. The navigation and the blog entry are parts of "ACME Inc.", which represents the company and the website itself.
So we should go and change the navigation and blog entry headings from h1 to h2:
<body>
<!-- not using sectioning elements, for the sake of the example -->
<header>
<h1>ACME Inc.</h1>
</header>
<div class="navigation">
<h2>Site navigation</h2>
<ul>…</ul>
</div>
<div class="content">
<h2>Lorem Ipsum</h2
<p>…</p>
</div>
</body>
Now we have this outline:
And this is exactly what the content of the example webpage means. (By the way, this would work in HTML 4.01, too.)
As explained in the link, HTML5 gives us sectioning elements, which play an important role for the outline (instead of div, which doesn't influence the outline) We should use them:
<body>
<header>
<h1>ACME Inc.</h1>
</header>
<nav>
<h2>Site navigation</h2>
<ul>…</ul>
</nav>
<article>
<h2>Lorem Ipsum</h2
<p>…</p>
</article>
</body>
The outline stays the same. We could even change the h2 (inside of the nav and the article) back to h1, the outline would stay the same, too.
If you don't want an "explicit" heading for the navigation, you are free to remove it: the outline stays the same (now with an implicit/"unnamed" heading for the nav). Each section has a heading, whether you add it or not.
You could even change the h1 inside the header to h6 and it wouldn't change the outline. You can think of this heading as the "heading of the body".
header element is not needed in these examples. I only added it because you mentioned it in your question.h1 and add the img as a child. The value of the alt attribute should give the name then.article (with its heading inside) is the most important content.h2…h6 anymore (but you are free to use them, for clarity or backwards compatibility).
163
Don't get confused by "should" contain and "must" contain. You aren't required to have anything inside the header you don't want but the 'semantic' purpose of the header is that is where you should look for and place such things, at the head of a document. Just as you would look for the title or introduction or table of contents at the top of a printed page.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
