According to the HTML5.1 spec, as outlined in the link below, every page should only have one h1 element. Naturally, I feel that the h1 element on the homepage should be a title describing the website itself. This raises the question, how do you correctly deal with h1 headers on subpages if the h1 element used on the homepage is used in header?
For instance, let's assume we are building a website for Adam's Sweet Shop, we create the layout and we create our header:
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
Now, that works fine for the homepage. But as we delve into the subpages, we are left with two options. We create a different h1 element describing that page and delegate the header h1 into a different tag. This would seemingly satisfy the requirements of the HTML5.1 spec, but it almost seems 'hacky', plus for templates this would require two different header files.
The second option is to create two h1 elements, one describing the website in the header, the other within the main element describing the page.
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
<main>
<h1>About Adam's Sweet Shop</h1>
...[other body elements]
</main>
This obviously goes against the HTML5.1 spec, but seems less hacky. I originally built a site using second approach, but received a warning message from the W3C validator.
Are either of these approaches correct, and if not, what is a better approach, for instance, an ARIA label describing the 'real' h1?
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
If it works better in your site design to have an h1 in the header and another h1 in the main, then that’s what you should do. Neither the canonical HTML spec nor the W3C copy of it say you shouldn’t use more than one h1 element per document if that’s what meets your needs. And the W3C HTML checker won’t report any errors or warnings for the markup example in the question.
As far as any accessibility concerns, it’s true screen readers will report both those h1 headings as being at the same (top) level, but that also seems appropriate for this particular case—it isn’t an absolute problem to have a couple top-level headings. (Though in contrast it would be a problem for screen readers if you marked up every section in your entire document with an h1—and that’s why the HTML emits warnings for that case (which is very different from your case).
HTML 5.1 has no restriction about having only one h1
The only requisits are:
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
This means that :
you must start with a h1,
you have to respect the h1>h2>h3... hiererarchy,
an heading starts a new section,
but you can perfectly start a new section at the same level as your first one
So having one h1 in both main and header sections is fine, according to the HTML specs,
it's possible, but it's (often) bad design.
You should always consider that your h1 is expected to be the webpage title (while the <title> element may already contain your website title). It makes no sense of having two titles for the webpage, for various reasons including SEO and accessibility.
So it's technically possible, HTML can be used for formatting complex multi-documents, but if you can avoid it, keep it simple.
edit
After reading through some discussions, I would no longer recommend using multiple h1 tags if you care about assistive technologies or browser outlining until the implementations are standardized.
My original answer should be valid in the future and for SEO purposes, but there is no guarantee for that.
original answer
You can have multiple h1s on a single page with the right sectioning. In HTML5, document outlines are created differently from previous versions.
Before HTML5, the whole page was considered the "root document", and the h1 was used to describe this root. It was a simple one-to-one relationship between HTML files and documents in the outline. This is important for SEO as engines use these outlines to guess what your page is about, and confusing them is a bad idea.
HTML5 introduced sectioning content such as article, section, header, footer, etc. According to the specs,
Sectioning content is content that defines the scope of headings and footers.
Each sectioning content element potentially has a heading and an outline.
This means you can use a h1 tag for every new outline created this way, because
Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.
so if you use a h1 in a "child" outline created for example by nesting it in an article, it won't interfere with the outline (and thus SEO) of your parent outline.
So for all intents and purposes,
<html>
<head>
</head>
<body>
<h1>
My awesome collection of articles
</h1>
[ ... some content ... ]
<article>
<h1>
My awesome article
</h1>
</article>
</body>
</html>
is a valid use of headers and sectioning in HTML5. Also, this article does a great job at visually explaining all of this using nearly your example.
Related
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.
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."
This has been bugging me for a while now, since the introduction of HTML5:
In some of our designs the page header is actually the title of the article you're viewing, which leads to a missing header in the outline (since the h1 is within the article, not directly a child of the body).
What would be a good practice for countering this?
I'm not a big fan of simply dumping in a hidden h1 in the body, as it's not the best idea for page-ranking for example.
I know that ideally the design would take these kind of things into account, but sometimes (as a developer) it's not your choice to make.
Example mark-up: http://codepen.io/TheDutchCoder/pen/DuKok
From the HTML draft:
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, the content should be marked up with a main element and the content may also be marked with an article, but it is technically redundant in this case (since it's self-evident that the page is a single composition, as it is a single document).
According to this, you should drop the article container and go only with main.
Update (8-Nov-2013)
Well, I understand that having untitled sections is unappealing, but for the time being (HTML master draft, November 2013) there is no escape: <body> elements are sectioning roots that always start a section and are displayed in the outline. An outline such as:
The main article title
└── Related articles
Latest News
Latest Blog Posts
is simply not possible with the current outline algorithm in an HTML5 compliant way (you would need to add siblings to the <body>).
Since you were considering a suggestion to the W3C, here is an idea: perhaps the outline of a document should default to <title>.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
W3C doesn't explicitly say how exactly are we supposed to use headings or I can't find such information.
Resources:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.5
http://www.w3.org/TR/WCAG-TECHS/H42.html
http://www.w3.org/TR/WCAG-TECHS/G141
This is very brief and raises many questions such as:
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Should H1 be used only once on a page?
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
If anyone could shed some light on that, it would be great :) Thanks.
1.Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
Like Richard said, it is up to the programmer. In general, headings build structure into your page, like an outline you would make for a paper in school. There is a site, that creates an outline for you based on headings. Further WebAIM found that people using technology like knowing what level they are on, so jumping around, may confuse some.
2.When designing a sidebar - what headings should be used? H2?
I normally put a <h2> in so people can navigate to it easier/faster. To be honest, I haven't actively designed a page in a year or so, so if I was to do something, I would probably use ARIA instead if the sidebars really didn't need headings, and assign the "complementary" role. Using HTML5 I could simply use the <aside> tag, which natively has the complementary role.
3.When designing a footer - what headings should be used? H2?
I normally don't use headings in the footers. You can either assign the contentinfo role to the footer div, or use the HTML5 <footer> tag which again, has it native. This blog post on ARIA is helpful.
4.Headings are meant to be used for lists (like a list of posts in a footer) anyway?
Sure, you can do:
<h3>My favorite Movies</h3>
<ol>......</ol>
5.Should H1 be used only once on a page?
Long and unending debate. I am in the camp that H1's should be only used for the title of the content, such as only the question title here on SO. There was a discussion in the HTML5 group that new tags, such as <section> resets the heirarchy/outline that I mentioned above, and h1 can be used. I am not a fan or in favor of this.
6.When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
I'd use h2's
7.Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
The proper way is <h_><a>Words</a></h_>.
You should read the section "Headings and sections" of the HTML5 spec. Getting the headings right is an important aspect of accessibility.
With headings (and sections) you are telling various user-agents how your page is structured, which content belongs together and which is separate from each other.
Think of a typical website with 3 columns. In the first column you have the site navigation, in the second column you have the main content and in the third column you have secondary content. Now, humans able to see might grasp immediately that there are three "areas" on the page, thanks to a different background color, margins, borders, whatever. But visually impaired or blind humans can't get clues from the graphical design of the page. Machines (like search engines) neither. Therefor we use heading/sectioning elements, so they can get the information (how the page is structured) from the markup.
Each HTML5 document has an outline, which gets created by the use of the headings h1-h6 (and hgroup) and/or the sectioning elements (section, article, nav, aside). You can think of it as some kind of TOC.
While a human able to see gets a first idea about the page structure by looking at the graphical design, humans using screenreaders and machines get this idea by reading the page outline, e.g.:
(1.) John Doe's Example Blog
(1.1) Navigation
(1.2) My first year at ACME
(1.3) Recent blog posts
This could be the outline of the following example documents:
Using headings only:
<body>
<h1>John Doe's Example Blog</h1>
<h2>Navigation</h2>
<h2>My first year at ACME</h2>
<h2>Recent blog posts</h2>
</body>
Using sectioning elements and headings with the level according to the calculated outline:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h2>Navigation</h2>
</nav>
<article>
<h2>My first year at ACME</h2>
</article>
<aside>
<h2>Recent blog posts</h2>
</aside>
</body>
Using sectioning elements with h1 everywhere:
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h1>Navigation</h1>
</nav>
<article>
<h1>My first year at ACME</h1>
</article>
<aside>
<h1>Recent blog posts</h1>
</aside>
</body>
(The latter two are semantically equivalent!)
When using sectioning elements, you could even omit the headings altogether, the outline would still be the same, although "unnamed" (which is not very helpful!):
<body>
<nav></nav>
<article></article>
<aside></aside>
</body>
This would be the corresponding outline:
(1) (Untitled Section)
(1.1) (Untitled Section)
(1.2) (Untitled Section)
(1.3) (Untitled Section)
You can play with this online outliner to see which documents create which outlines.
so, should we skip them or not?
Why would you want to skip levels in the first place? It's probably never good, so no, you should not skip levels. But if it would happen, I wouldn't consider it a serious error.
Note however, depending on how exactly you skip, especially if you don't skip all headings of that level, a wrong outline could be created. See for example this simple document:
<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->
<h2>My first snow</h2> <!-- this is a story -->
<h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
<h3>How I experienced it actually</h3> <!-- also subsection -->
<h3>Why I'm disappointed by snow</h3> <!-- also subsection -->
<h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>
Now, if you'd change the last h2 to h3, suddenly this "More stories" section would become a subsection of the story. If you'd change it to h4, it would become a subsubsection.
When designing a sidebar - what headings should be used? H2?
When designing a footer - what headings should be used? H2?
These questions can't be answered in general. It depends on your site and your page and your content. But yes, in many cases for a "typical page" h2 would be the right candidate. The page heading (not to confuse with main content heading!) is h1, the main content is h2, the secondary content (sidebar etc.) is h2. If your footer would need a heading (not each one does), it would be h2 also in this case.
Headings are meant to be used for lists (like a list of posts in a footer) anyway?
It really depends on the content and the context.
The important question you have to ask (in general, for all heading decisions):
Does this content "belong" to the previous heading?
If yes:
Is it some kind of sub-section? → use a heading one level higher, resp. use a section element (and optionally a heading inside of it)
Is there no natural "sub-heading" for this content? → don't use a heading here
If no: use a heading one level lower, resp. use a sectioning element that is not a child of the sectioning element in question
(you'd have to repeat this step until your heading/section is a child of a heading that it belongs to)
Should H1 be used only once on a page?
Nope. As I explained, you could use h1 for all your headings on a page (if you use sectioning elements!).
When designing a "posts listing page" - each entry usually consists of TITLE and EXCERPT - should we use H1 for titles? Or H2 or DIV?
You should probably use an article element for each entry. So you'd get an heading automatically (= an entry in the outline), so to speak, as article is a sectioning element. Now, you could use h1 for it (no matter where the article is placed!), or you could use the calculated heading level (if the article is a direct child of body, you'd use h2. If it is one level deeper, h3. And so on.).
Use sectioning elements and headings so that a useful outline is created.
If you mark-up a webpage, look for a minute at the created outline only: Does it make sense? Do you understand by that how the page is structured, what sections it got? Is the hierarchy correct? Is a separate area/section of the page missing in this outline? Is a section a child of a section it doesn't belong to? (for example, often you see that the site navigation is a child of the page's main content, which is not correct, of course: typically they should be on the same level, both being childs of the site heading).
The <h_> tags are sort of redundant from the perspective of their original usage. With the ubiquity of CSS, a tag like <h4> is pretty much descriptive for all intents and purposes.
If you have a page with multiple sections then it makes sense to denote this somehow, and until the HTML5 <section id=""> tag is fully adopted a heading can be useful for some-thing reading the source code. Considerations might include:
Search Engine Optimisation: if you make some piece of text a heading, you are telling search engines, "hey, this is important!". To what extent this matters is for another discussion.
Code readability: if multiple people are working on the project, a heading is a good way to understand where breaks in the page copy occur. You can do this with <!-- Sidebar Here --> to a similar effect, but to some this is overkill.
"Some people consider skipping heading levels to be bad practice. They accept H1 H2 H1 while they do not accept H1 H3 H1 since the heading level H2 is skipped." - so, should we skip them or not?
This is at the discretion of the programmer. You might decide to use <h1> for page headings, <h2> for section headings, but this is not written in stone. You can restyle the headings with CSS anyway, so you can favour hierarchy over appearance. If you think your sidebar is of equal importance to your tag cloud, give them the same heading classification.
Since headings are block-level elements, I assume that links go inside? Same for span's that are supposed to style headings in an unusual way?
This is absolutely correct.
The gist of what I'm saying is that W3C standards are there for reference. The development teams that make web browsers, RSS readers, etc. care about them because it means they don't have to discuss a new tag with each other. Imagine Google, Microsoft and Apple holding cross-party talks about when a <h4> or <span> tag should be used... nightmare fuel!
If a topic like those found in questions 2-6 above aren't written in stone, common sense is the fail-safe. That, and talking to your colleagues and agreeing a way forward. Sorry to repeat myself, but standards are for reference.
Hope that helps!
I've read conflicting webpages about using HTML 5's section element. Is it semantically appropriate to use it as the section between my header and footer?
<body>
<header>logo, nav links</header>
<section>main content of my webpage</section>
<footer>copyright, more links, contact info</footer>
</body>
A good place to start is Bruce Lawson's Scooby Doo and the proposed HTML5 <content> element .
You'll find a link in there to the opinion of Ian (Hixie) Hickson who is the editor of the WHATWG version of HTML5 (aka HTML Living Standard) and until recently editor of the W3C version of the HTML5 standard.
What he says (and has consistently said for at least the last 5 years) is that there is no need for a sectioning element there. If you need a containing element for everything that is not in the header or footer <div> is the element to use.
On the other hand, another member of the W3C HTML working group, Steve Faulkner, has proposed the <maincontent> element for your use case, on the grounds that is allows the ARIA "main" role to be incorporated into native HTML.
FWIW, for me, it seems odd that you should have a special element for between the header and footer in <body> but not for between header and footer in <section> or <article> so I'm with Hixie on this.
I also don't buy Steve's comments that it will be useful in that it will mark the main content even if the other sectioning and header/footer elements are not marked up correctly, since there doesn't seem any case in which I could advocate its use. It seems to be only for the web author who wants to do a half-assed job.
Do note that if <maincontent> does get accepted, it will not be part of HTML5. The earliest it could appear would be HTML 5.1
<section> is slightly more semantic than <div>. One of <section>'s main points for HTML5 is that it helps the browser to understand the document's outline.
Your approach is really dependent on the content of our page. Is everything in between the <header> and <footer> tightly related, or could it be broken down a little into more <sections>, or even other elements?
There will always be sources full of conflicting advice, especially for something in the development and utilization stage that HTML5 is in.
If you are using headings (h1 to h6), you are already using something that could be called "implicit sections". The outlines of the following two markup examples semantically identical:
Example 1:
<body>
<header>
<h1>My cool site</h1>
…
</header>
<section>
<h1>My cool article</h1>
…
</section>
<footer>…</footer>
</body>
Example 2:
<body>
<header>
<h1>My cool site</h1>
…
</header>
<h2>My cool article</h2>
…
<footer>…</footer>
</body>
So in this very case it wouldn't matter if you explicitly add section or not: the outline (the semantic structure) would be the same. Side note: it is recommended to always explicitly use the sectioning elements for sectioning content:
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
(however, this applies only for sectioning content, not sectioning roots (like body))
Now, your question can't be answered generally, if we don't know which headings you are using. There are cases which would require you to use section (or article), otherwise you would get a wrong outline for your page. And there are cases where the use of an explicit section (or article) is optional.
Some general tips (applicable to "prototypical" websites only; there are of course many exceptions; these tips should only give you an idea)
each page of your site should have a site heading (e.g. "John's blog") and a content heading (e.g. "I found a funny video")
the site heading is the first heading in body, which is not included in a sectioning element (section, article, nav or aside)
the site heading "dominates" all scopes of your page, e.g. in most cases a) the navigation and b) the content
all scopes of your page should have a heading (you can visually hide them with CSS, though). If you can't or don't want to give a heading to a scope, you have to use a sectioning element (section, article, nav or aside), which would create an untitled/implicit heading