Why <h1> in <header>? - html

I just finished the Code School's Functional HTML5 & CSS3 and I noticed several times they emphasized that the <header> element should contain <h1> heading (not <h2>, <h3> etc.) but they did not explain why.
Why is that? What makes the <h1> so special that it is the one that we should include in <header>?

the header of the page is like the header of a document, you'll usually find the main title of the document there. The main title of a webpage is usually put into an h1, but headers can contain lots of other things like a logo, publication date and other metadata. On many websites, the sit's header also contains its navigation.

h1 is the primary (ie: the most important) header.
The header tag is not limited to only containing the h1, but as it is the most important header on the page, that may often be the case.

Related

Can someone explain the correct usage of the h1 tag?

In html4 headings are what create structure, however in html5 structuring elements do, but this algorithm isn't supported yet, so the html4 way of creating structure is used currently. This is leading to some conflicting nuanced information on the h1, I'm hoping to get cleared up. From my understanding in html4 there should only be one h1 tag and it should represent the title tag of the page. However I have also heard you can have multiple h1 tags in html5 because they represent the structuring element, similar to how you can have multiple headers and footers on a page, is this true? If so when html5 structuring is supported does this mean html4 style heading structuring is no longer valid?
<section>
<article>
<header><h1>cats</h1></header>
</article>
<article>
<header><h1>dogs</h1></header>
</article>
</section>
Semantically, <h1> has always just meant the top level heading of a section.
Think about a blog post. You should use <h1> as the title of the post, and then every heading inside of the post should be a sub-heading.
But, you can still have multiple posts on the same page (i.e. an infinite-scroll website).
This is what your HTML5 code is defining. Just two articles on the one page. You have always been able to do this, and it is valid in both HTML5 and HTML4. There has never been a semantic restriction to the amount of <h1> tags you can have, as long as you use them correctly:
They should always represent the top-level heading of an article;
Don't nest <h1> tags;
Don't use them to define sections of content within an article that has a heading.
HTML4, having single h1 tag was typically used for structure. This is no longer true with HTML5. The structure is now Nav, Section, Article, Aside which means that within each root such as Nav or Section or Article or aside each of those may have a H1 element. Of course web crawlers that see multiple H1 tags within each root(nav, section, article, aside) may work against your SEO and may stylistically degrade your web page impact on the viewer/reader.

What are there guides for using Heading tags?

Instantaneous I'm working on developing a portfolio site. Hereby I strive to be as accurate as possible markup. I'm currently stuck in the use of heading tags. Are there any guidelines on the use of h1, h2, h3 tags etc? I find it difficult to determine what is and what is now an h1 h3 is an example.
I like to hear of your findings.
According to w3c:
The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section.
So the header can contain h1, etc. But not every h1 should be wrapped in a header. Only if it is related to the section.
The header tag is just semantics. It helps browsers (and developers) to understand your page better.
In fact it's always up to you how to use headers and how many of them you want to use. You should always test your site without CSS enabled and you will see if your markup is correct and articles titles / page titles/ block titles are visible enough
You can look also at some resources
http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
http://www.hobo-web.co.uk/headers/
http://accessibility.psu.edu/headingshtml
Another great resource that explains heading tags with reference to SEO:
https://www.thiscodeworks.com/html-heading-tags-less-than-h1-greater-than-to-less-than-h6-greater-than-html-basics-htmltags-seo/5e19e63f2f9933a537bcc72d
"Best practices for SEO and accessibility purposes when using heading tags is:
Use once or twice with the title of the website of page
Use for section headers inside the page. Good to have one every 200-400 words. But totally depends on the content and layout.
- Use as many as you want to further subsection and highlight key points in the text."

Semantic markup for site header, even with outliner

Usually when I code HTML5 documents I use the following syntax:
<header class="site-header">
<hgroup class="site-brand">
<h1 class="brand-name">
Brand Name
</h1>
<h2 class="brans-slogan">
Awesome Slogan
</h2>
</hgroup>
</header>
<article>
<header class="article-header">
<h1 class="article-title">Article Header</h1>
</header>
[... content ...]
</article>
It seemed to be header the right tag for site header, but after reading the spec and outlining this code, I saw two drawbacks
header tag make its content first level, and article title 2nd
Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.
What would be the best approach?
Your first problem is that you have two h1 tags. This is NOT proper semantic mark-up. You are correct about the header tag and it would be preferable to put you high level h tags in that area.
That being said, your original question is a design and content architecture problem. If you are going to use an h1 in your article body then you should choose a different tag to use in the header of you page.
The spec says,"The header element typically contains the headings for a section (an h1-h6 element or hgroup element), along with content such as introductory material or navigational aids for the section."
It does not have to, though. The h1 tag (and title tag) are your main semantic indicies for a page. You do NOT want 2 h1 tags or header tags, but these two tags do not have to go together ... but its nice if you can architecture it that way.
Your usage of header in this example is okay.
However, it's not really needed here. If you only include h1-h6 and hgroup, you don't need to specify that it's a header, because it is already clear by definition. header is useful if you want to include additional content for which it's not necessarily clear that it should belong to the header vs. the main content.
But there is no harm in using header for headings only, so go on with it if you like it, need it for CSS/JS hooks, might include additional header content in the future, etc.
header tag make its content first level, and article title 2nd
I don't understand what you mean by that. The header element doesn't influence the document outline. It's a way to differentiate between introductory content and main content.
Site headers might not contain headings at all, since its purpose is to tell the user who the page belongs to.
The header element doesn't have to contain a heading. E.g. this example would be fine:
<article>
<header>I visited Berlin last week and in this post I document what I liked about it.</header>
<p>…</p>
</article>
The footer element is similar, and for some content both elements could be suitable.
If you'd want to attribute the article author, it would go into a footer.

whats the correct approach to this css

I have a page where the main element is a document, in this case a privacy policy.
The privacy policy title is an <h1> with the rest of the headings following, <h2> etc.
At the side of the document, but not in the flow of the H1, I have a small submenu which also has a heading. The question is what should the heading tag be on that?
Although I'm using some html5 elements I'm not using SECTION etc, due to the reliance on javascript for older browsers.
I would say h3 according to WordPress widget-titles that are also h3
e.g.
<h3 class="widget-title srp-widget-title">
POPULAR ARTICLES
</h3>
I would stay away from h1 and h2 in widgets(sidebars). If it is h3 or h4 doesn't matter too much... imho.
because of each heading tag indicates the relative importance of each section, so it's best to start with the highest level header and work you way down. I would put it in h3
Use a H1 tag, contrary to popular belief you don't get penalized for multiple H1 tags; however it may have some effect on the SEO of your site.
For confirmation you can browse the articles below:
Is it alright to use multiple h1 tags on the same page, but style them differently?
http://www.seomoz.org/q/multiple-h1-tags-on-same-page
And most importantly, the below link offers an interesting read:
http://productforums.google.com/forum/#!topic/webmasters/kYX4Upa8_es
Snippet from the link above of particular interest:
When google is 'allocating' weight to a page, one of the factors is
the text found inside your H tags.
So if you have one H1 tag, and not much text in it, google will see
this as 'very strong text' with lots of meaning. If you have one H1
tag for a whole paragraph of text, google will see this as 'weak text'
due to the total number of words contained inside the H1 tag.
The number of H1 tags on a page also affects this, if you have two H1
tags, this 'very strong text' weight will be halved, if you have
three, it will be (well, I'm not sure if it's a third of the original
weight, or reduced by a factor of three (ie, original weight divided
by two, and then divided by two again)) and so on. So having many H1
tags is a bad idea because you will have more combined text inside H1
and it also gets divided by the number of H1 tags on the page.
As for what happens in HTML5, sorry, but I'm not sure how google views
this nested syntax, I just wanted to expand and clarify on what
Cristina was talking about.
Although if you're really paranoid about SEO just stick a H3 in there, I'm sure it doesn't matter much.
If this web page is part of a web site (and not a stand-alone document), you probably don't want to use h1 for the main content heading.
Even if you don't use the sectioning elements (section, article, aside, nav), your headings still create an outline. This outline should represent the structure of your page, similar to a ToC.
So let's think of a simple website with: a) site header, b) main content, c) site navigation
If you use h1 for the heading of your main content, the site-wide header and the site-wide navigation would be in the scope of this main content:
Privacy Policy
My cool website
Navigation
But this is not correct. "Privacy Policy" is part of "My cool website", not the other way around. And "Navigation" is not a sub-part of "Privacy Policy". So your outline should look like:
My cool website
Privacy Policy
Navigation
So the solution is: use h1 for your site-wide heading (typically the name of your company/project/person/etc.). All scopes of your page are "dominated" by this heading. This is what unites your pages to a site.
Note: if you would use sectioning elements, you could use h1 for each sectioning content.
It is considered a heading, so it should probably be <h3>.
if there are no <h3> in the main content, then use a <h3> in the sidebar.
If you want to see it as e new content, use <h1> again.
It really depends on the context you see it, or your UX'er.

H1 in article page - site title or article title?

Within an article-oriented page (such as a blog post), the <h1> element (level 1 heading) is commonly used to markup either:
the blog title (i.e. the often-large site title at the top of the page, not to the <title> element), or
the article title
What is the best choice and why?
To the site owner, who may want to shout out to the world the name of their site/blog, using a level 1 heading around the site title might seem to make sense.
From the perspective of what you are trying to communicate to the user, the site title is of less relevance - the article content is what you're trying to communicate and all other site content is secondary. Therefore using <h1> for the article title seems best.
I feel the <h1> element should focus on the article title, not the site title or other content. This does not appear to be a popular convention by any means.
Examples:
Joel Spolsky uses <h1> for the article title, and an anchor for the site title
Jeff Atwood uses no <h1> at all, <h2> for the article title and an anchor for the site title
37 Signals' SVN uses <h1> for the site title and an anchor for the article title
That's three different approaches across three sites where you might expect a strong consideration for correct semantic markup.
I think Joel has it right with Jeff a close second. I'm quite surprised at the markup choices by the 37Signals people.
To me it seems quite a simple decision: what is of greatest relevance to the consumer of the article? The article title. Therefore wrap the article title in an <h1> element. Done.
Am I wrong? Are there further considerations I'm missing? Am I right? If so, why is the '<h1> for article title' approach not more commonly used?
Is the decision of where to use the <h1> element as invariable as I put it? Or are there some subjective considerations to be made as well?
Update: Thanks for all the answers so far. I'd really appreciate some angle on how the use of the <h1> for the article title instead of site title benefits usability and accessibility (or doesn't, as the case may or may not be). Answers based on fact instead of just personal supposition will get many bonus points!
There is a W3C Quality Assurance tip about this topic:
<h1> is the HTML element for the
first-level heading of a document:
If the document is basically
stand-alone, for example Things to See
and Do in Geneva, the top-level
heading is probably the same as the
title.
If it is part of a
collection, for example a section on
Dogs in a collection of pages about
pets, then the top level heading
should assume a certain amount of
context; just write <h1>Dogs</h1>
while the title should work in any
context: Dogs - Your Guide to Pets.
As a screen reader user the heading level doesn't matter as long as it's consistent. Different blogs use different conventions, so there is no standard way to make it more accessible. Making sure the headings match to the content level is more important then what level of heading is used. For example if displaying a series of blog posts with comments all the blog posts could have heading level 2 and at the start of the comments you could have heading level 3. For an example of easy to navigate headings find any Wikipedia article with multiple sections and subsections. I can easily skip around main sections by using my screen readers navigate by heading feature to jump to any level 2 heading, and if I want to move to subsections of a given sections I will navigate to the next heading.
On your blog's home page, I would use H1 to denote the site title and H2 for the titles of the individual blog posts that are published on the front page.
When entering a particular article, though, I would use H1 for the article title and an anchor for the site title.
This is a nice and semantic setup that will also be appreciated by Google when it crawls your site.
On Wikipedia the h1-Tag contains the article-name and headings in the document start with h2. The name Wikipedia is part of the title-tag in the html-header. I also think that's the way to go. So for blogs I would do like Joel Spolsky in the examples you have given.
And I would always start with the highest level, so letting out h1 is in my opinion a bad option.
The <head> part of a HTML page has an element named <title>. As the name implies, this is for the site title.
HTML is used to structure a page into a machine parse-able form, not for layouting. If it was only about layouting, you could only use <div> and <span> blocks with different classes/ids and apply CSS to them. Instead of
<h2>Sub Header</h2>
I could use
<div class="header2>Sub Header</div>
and somewhere have some CSS code that will make this <div> look like h2 (font size, bold font, etc.). The difference is that a computer can't know that my <div> is in fact a second level header in the first example (how should it know that? I might name it differently than "header2"), however in the first case, it knows that it is a second level header by the fact that it is a <h2> element and if it wants to show the user a structured list of head-lines of a page, it can do so
Top Level Header
Sub Header
Sub Sub Header
Sub Header
Sub Header
Top Level Header
Sub Header
Sub Sub Header
Sub Sub Header
Sub Header:
by searching for the H1/H2/H3/... elements and structuring them as above. So if a computer tries to find out the title of a page, where will it look for it? In an element named <title> or in an element named <h1>? Think about that for a moment and you have your answer.
Of course you might say "But the title is not visible on the page". Well, it is usually visible in the browser window somewhere (window title or at least tab title) - however, you may want it to be visible on the page as well - I can understand that. However, what speaks about doing that? Who says you may not repeat it? But I wonder if you should use a h1 element for that.
<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>
Use CSS to style #title the way you like. Make it super big and super bold and have an eye catching color if you like, nothing speaks against it. Automatic page parsers usually ignore div and span to some degree, as it tells them nothing (these are elements used to layout the page for the reader, but they say nothing about the structure of the page. LAYOUT is not STRUCTURE, you can only apply style to certain structural elements to generate a layout, but one should not be confused with the other one). Still a computer will know what the title of the page is, it knows it thanks to the title element.
For a typical website, e.g. a blog, the h1 should contain the site title. Yes, on every page of the site.
Why? In a website, there are various parts that are shared for all its webpages. Let’s take navigation as example:
<ul id="site-navigation">
<li>Home</li>
<li>About me</li>
<li>Contact</li>
</ul>
This #site-navigation is repeated on every page of the site. It represents the site navigation, not the page navigation. The difference is important! {The page navigation could be a table of contents (like in a Wikipedia article) or a pagination for a long article.}
If you’d use the article title as h1, the site navigation would be in scope of this heading.
<body>
<div>John’s blog</div> <!-- the site title -->
<h1>My first blog post</h1> <!-- the article title -->
<p>…</p>
<h2>Navigation</h2>
<ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>
So this markup conveys: The navigation (→ started by the h2) is part of the article (→ started by the h1). But this is not true, this navigation is not the navigation for the article. The links really are part of the whole site, and the site is represented by the site heading.
The problem becomes clearer when the article contains subheadings, too:
<body>
<div>John’s blog</div> <!-- the site title -->
<h1>My first blog post</h1> <!-- the article title -->
<p>…</p>
<h2>Why I’m blogging</h2>
<p>…</p>
<h2>Why you should read my blog</h2>
<p>…</p>
<h2>Navigation</h2>
<ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>
As you can see, there is no way to differentiate the article sub-headings from the navigation. It looks like the article has three sub-headings: "Why I’m blogging", "Why you should read my blog" and "Navigation".
So if we instead use h1 for the site title and h2 for the article title, the navigation can be in scope of the site heading, by using h2, too:
<body>
<h1>John’s blog</h1> <!-- the site title -->
<h2>My first blog post</h2> <!-- the article title -->
<p>…</p>
<h2>Navigation</h2>
<ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>
Now this markup conveys: There is a site titled "John’s blog" (→ started by the h1) and it contains an article (→ started by the first h2) and a site navigation (→ started by the second h2). Sub-headings of the article would be h3 now, of course.
Another problem by using h1 for the article title is that then there is typically content before the first heading, e.g. the site header including the site title and other stuff. For users that navigate via headings, this first content would be "invisible". So it’s good practice to give every separate block an own heading.
HTML5 formalizes this with the sectioning/outlining algorithm. It solves many outlining problems you might have had with HTML 4.01, because the content order can be (mostly) free now and you don’t have to "invent" actual headings if you don’t want to, thanks to section/article/nav/aside. But also in HTML5 the site heading should be the h1 that is a child of body but not a child of any sectioning element/root. All other sections are in scope of this site heading.
H1 in article page - site title or article title?
Both. This article is informative: The Truth About Multiple H1 Tags in the HTML5 Era.
There should only be one, and there must be one only h1; usually this is the page title.
Then it should follow h2, h3 etc.
So your page can look like this (without all the other html tags)
h1
h2
h2
h3
..etc