In many designs, a number of headings may appear in the header, footer, or other global elements of a website. One example would be denoting "Contact Us," "Our Address," and similar sections in the page footer, or a tagline in the page header.
In these cases, I've historically tended to use <h6> elements, as they're the lowest priority heading, and therefore I assumed that the would be best suited to this use case.
However, I recently started trying to improve accessibility on my projects, and I've found that essentially every automated a11y testing tool says that this isn't the correct way to do this. I constantly get errors stating "the heading structure is not logically nested" because <h6> either appears before any other heading (in the case of a tagline in the page header), or jumps from an earlier heading to <h6> (in the case of footer titles, when the rest of the content stops after anything less than <h5>).
I would just change the <h6> in the header and footer to <p> styled to match their original designs, but that seems incorrect to me – shouldn't each section with a heading in the footer be denoted with an actual heading?
What is the appropriate way to denote headings in global elements of a page to ensure accessibility?
The typical site can have a logical heading outline by using the site name as top-level heading. Everything on the page belongs to the site, the page’s main content as well as the site navigation as well as the footer etc.
<h1>Site name</h1>
<h2>Site navigation</h2>
<h2>Page main content</h2>
<h2>Contact us</h2>
<h2>Our address</h2>
(Note that a tagline should not be a heading.)
With HTML5, you can make the sections explicit (article, aside, nav, section), and convey what each section is part of (header, main, footer):
<body>
<header>
<h1>Site name</h1>
<p>Site tagline</p>
<nav>
<h2>Site navigation</h2>
<!-- heading not necessarily needed -->
</nav>
</header>
<main>
<article>
<h2>Page main content</h2>
</article>
</main>
<footer>
<section>
<h2>Contact us</h2>
</section>
<section>
<h2>Our address</h2>
</section>
</footer>
</body>
(If the footer consists of many sections, it can make sense to introduce grouping headings/sections where possible, e.g., 'Contact' in this example. That said, not every footer needs sections/headings to begin with, especially not if the content is rather thin or not that important.)
Tools that flag the heading levels should only be doing so as a "warning" or "needs review". You can't make a blanket statement that an <h6> must follow an <h5>. I think what you're doing is correct. Make all the footer headings an <h6> so that it's consistent across the entire site. You might have pages that have enough information to warrant headings up to an <h5> but something like a "contact us" page probably has just an <h1>. Having an <h1> and then <h6> is not an automatic WCAG failure.
1.3.1 Info and Relationships is typically the guideline used to flag headings in error but all that requirement says is
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
It says nothing about skipping heading levels (except in some of the recommended techniques to achieve 1.3.1, but those are non-normative). For example, H42: Using h1-h6 to identify headings talks about using proper headings but one of the examples shows it's ok to have an <h2> before an <h1>.
Related
My goal is to use the correct H* tag (H1 to H6) in my html5 code.
I read here I shouldn't use <section> at all: "Why you should choose article over section : Browsers’ visual display of headings nested inside elements makes it look as if they are assigning a logical hierarchy to those headings. However, this is purely visual and is not communicated to assistive technologies"
but I feel that isn't true because of the answers to this popular question:
that says "sections in an article are like chapters in a book, articles in a section are like poems in a volume" and I want to use sections for their intended purpose.
The problem is this mdn page says "Important: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the outline algorithm should not be used to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure."
The guy from the first link I posted does make a good point about halfway down that page where he says "browsers display different sizes of font depending on how deeply the is nested in <section>s”.
So am I correct in saying I have to correctly match H* tags to depth/nesting to achieve a good outline AND visual styling or is there a different way. eg this would be incorrect:
<body>
<h1> something </h1>
<section>
<h1> section heading for outline </h1>
<article>
<h1>my first news article</h1>
<p>stuff</p>
</article>
</section>
</body>
because screen readers can't properly process <section> for outlining.
and because browsers display different fonts according to level of nesting.
so then would this would be correct?
<body>
<h1> something </h1>
<section>
<h2> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
note: This is my first question I'm posting so please go easy on me if I've made a faux-pas, I'm new here :)
The document outline algorithm based on <h1> has been removed from the spec and actually never worked. In terms of heading levels, your last code example is the correct one.
Why the HTML Outlining Algorithm was removed from the spec – the truth will shock you!
There Is No Document Outline Algorithm
So you should not use it, and your quote holds true.
Authors are advised to use heading rank (h1-h6) to convey document structure.
Correctly using <section>
As to the question of using <section> vs <article>.
You shouldn’t avoid the latter due to styling issues. You already did your research and should stick to your outcome. You’d need to apply some styling yourself, though.
I’d also like to add the ARIA perspective on a page summary:
<article> has role article
An article is not a navigational landmark
and
<section> has role region, which is …
[…] sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
To do so, it is also noted
Authors MUST give each element with role region a brief label
So, let’s put it together
<body>
<h1> something </h1>
<section aria-labelledby="s1-heading">
<h2 id="s1-heading"> section heading for outline </h2>
<article>
<h3>my first news article</h3>
<p>stuff</p>
</article>
</section>
</body>
I was browsing the w3.org page about the article element and one of the exemples surprised me:
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
As you can see, the comments info (poster name and date) are in a footer element at the begining of each comment.
According to W3.org 4.3.8 The footer element it is a valid usage, but it seems quite strange to use it that way.
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
It is right, nothing says that it should sit under the actual article.
I would have used a header element for this usage but on 4.3.7 The header element it is precised that
A header typically contains a group of introductory or navigational aids.
But they also say about the footer element:
The primary purpose of these elements is merely to help the author
write self-explanatory markup that is easy to maintain and style; they
are not intended to impose specific structures on authors.
So why are they using the footer element in the example? Wouldn't a header element be more intuitive and semantic?
<section>
<h1>Comments</h1>
<article>
<header>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</header>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<header>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</header>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
Is there a particular reason for that?
The semantic difference between footer and header is not always clear. In unclear cases, the important thing is that you use one of them at all, not which one to use.
Position of footer and header
The position doesn’t matter (as long as it’s inside of the relevant section). As a header is for introductory content, it will of course typically appear near the top of the section. For footer, the spec notes:
Footers don't necessarily have to appear at the end of a section, though they usually do.
It would even be possible to use them multiple times (not that it would necessarily be a good idea):
<article>
<footer>…</footer>
<header>…</header>
<p>Hello world</p>
<footer>…</footer>
<header>…</header>
<header>…</header>
</article>
Semantic differences between footer and header
What the elements represent, according to the spec’s definition:
footer: "a footer"
header: "introductory content"
What the elements "typically" contain, according to the spec:
footer: "information about its section such as who wrote it, links to related documents, copyright data"
header: "group of introductory or navigational aids"
What the elements may contain, according to the examples in the spec:
footer: "Back to …" link, publication date, navigation, copyright notice, link to ToS, references to the authors
header: introduction, title/heading, version number, date, links to related documents, copyright notice, navigation, status information, notices
WAI-ARIA roles (only in case its the footer/header of the body sectioning root):
footer has the contentinfo role ("information about the parent document")
header has the banner role ("mostly site-oriented content, rather than page-specific content")
Rule of thumb here is that footer should be used to mark meta information about enclosing section (in your example, that is author and pubtime for each individual comment). Also, as you noted, per spec it's not required that footer must be at "the foot" of the section.
In contrast, header is used for introductory content of enclosing section and should contain at least one heading element. In fact, I would assume that exclusion of heading element is main reason why original example uses footer element.
To avoid confusion, this doesn't mean that every heading should be wrapped in header since in that case it doesn't add any semantic value.
So general rule of thumb: if it has header AND some additional information (subtitle, pubdate, TOC, nav...) it can usually be enclosed in header. Any additional information/meta data about section that don't appear near heading in document flow (footnotes, related links, autor information, copyright...) can be enclosed in footer.
Reference:
- HTML5Doctor - Footer
- HTML5Doctor - Header
Plot: When building a coupons website I realize that their can be content that is not unique to the page but should be used inside the <main><article> ..here..</article></main>.
Problem: Just because w3schools state :
The content inside the element should be unique to the
document. It should not contain any content that is repeated across
documents.
But i have content which will be inside article. Like every time for example A coupon can be used by entering its code but a deal can only be activated by going to landing page.
This will be repeated in every 'coupon' post I will publish.
So now what I tried to use was.
<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>
But again :
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendent of an <article>, <aside>,
<footer>, <header>, or <nav> element.
So what is the best way to format the UN-UNIQUE content inside <main> and/or <article>.
The main tag should be used to group those article and aside elements.
<main>
<article>
The unique document content.
</article>
<aside>
Related content for that document.
</aside>
</main>
tl;dr - use your common sense :)
This article on the actual w3 site has a good overview of what should go where. The overall structure is:
<body>
<header>
<!-- header content goes in here -->
</header>
<nav>
<!-- navigation menu goes in here -->
</nav>
<section id="sidebar1">
<!-- sidebar content goes in here -->
</section>
<main>
<!-- main page content goes in here -->
</main>
<aside>
<!-- aside content goes in here -->
</aside>
<footer>
<!-- footer content goes in here -->
</footer>
</body>
Option 1 - <section>s
They go on to say that <section>s, fairly obviously, can contain multiple <articles>, but that it is also possible to put <section>s inside an <article>, for example to define the introduction or summary:
<article>
<section id="introduction">
</section>
<section id="content">
</section>
<section id="summary">
</section>
</article>
So one option is to put a <section id="content"> and <section id="terms"> inside your article.
Option 2 - <footer>s
It does appear valid to use a <footer> for this sort of content. You said it is just for author, date, category, but w3 states in its spec for <footer>:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Your text is terms and conditions of a coupon, which could be considered as semantically similar to copyright data. It's a judgement call I think.
Option 3 - <div>s et al...
As a get-out, in the first link they do also say about <div>s:
You should use [a div] when there is no other more suitable element available for grouping an area of content...
So if it really isn't clear what to use, another possibility could be:
<article>
Blah blah
<div class="terms"></div>
</article>
Summary
To be honest, after all this, it seems there is no definitive answer and sites are unlikely to become super-strict in how they semantically parse documents for a while yet, because they know there are legions of people out there who will do it completely wrong. If you just stick a <p> with the same terms in at the end of each article, it probably won't make any real difference because the main text is unique.
I personally think as long as you use your common sense and choose something which doesn't completely go against the recommendations, you can't go too wrong.
According to the WHATWG (the informal group behind the HTML Living Document Standard), there is no problem in using a main element inside an article. The HTML Living Document says:
There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.
Consequently, you can write
<body>
<header>My Page Header</header>
<main>
<article><h1>My First Article</h1>
<main>My first article's content...</main>
<aside>A sidebar</aside>
</article>
<article><h1>My Second Article</h1>
<main>My second article's content...</main>
<aside>Another sidebar</aside>
</article>
</main>
</body>
However, the W3C HTML 5.3 Draft disallows this and states that "There must not be more than one visible main element in a document."
This is an interesting case of a disagreement about a central element of HTML. Amazing! It seems that there is again a schism between W3C authors and the web/browser developer professionals behind the WHATWG. In such a case, I would go with the WHATWG.
I would go with something like this :
<main>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
<div class='article'>
<article>Unique content</article>
<footer>This coupon can be used only once..</footer>
</div>
</main>
Anyway I think having multiple <main> tags is worse than having non-unique content in an <article> tag.
You can also take into consideration Schema.org for proper mapping your content with additional attributes ( itemprop ... )
I'm setting up my WordPress sidebars for an HTML5 theme and really wanting to use before_widget and after_widget right.
So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the <article> element.
Option 1: Aside with sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Option 2: Div with Asides
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
I suppose the auxiliary question is then what heading to use for each widget title. If I wrap each widget in a <section> then <h1> seems most appropriate. If I use <aside>, I'm not sure.
All opinions welcome. Devil's advocates encouraged.
First of all ASIDE is to be used only to denote related content to main content, not for a generic sidebar. Second, one aside for each sidebar only
You will have only one aside for each sidebar. Elements of a sidebar are divs or sections inside a aside.
I would go with Option 1: Aside with sections
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
Here is the spec https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Again use section only if they have a header or footer in them, otherwise use a plain div.
Update 17/07/27: As this is the most-voted answer, I should update this to include current information locally (with links to the references).
From the spec [1]:
The aside element represents a section of a page that consists of
content that is tangentially related to the content of the parenting
sectioning content, and which could be considered separate from that
content. Such sections are often represented as sidebars in printed
typography.
Great! Exactly what we're looking for. In addition, it is best to check on <section> as well.
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content. Each section should be identified, typically by including a
heading (h1-h6 element) as a child of the section element.
...
A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
Excellent. Just what we're looking for. As opposed to <article> [2] which is for "self-contained" content, <section> allows for related content that isn't stand-alone, or generic enough for a <div> element.
As such, the spec seems to suggest that using Option 1, <aside> with <section> children is best practice.
References
https://www.w3.org/TR/html51/sections.html#the-aside-element
https://www.w3.org/TR/html51/sections.html#elementdef-article
http://html5doctor.com/aside-revisited/
Look at the following example, from the HTML5 specification about aside.
It makes clear that what currently is recommended (October 2012) it is to group widgets inside aside elements. Then, each widget is whatever best represents it, a nav, a serie of blockquotes, etc
The following extract shows how aside can be used for blogrolls and
other side content on a blog:
<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
<nav>
<h1>My blogroll</h1>
<ul>
<li>Example Blog
</ul>
</nav>
<nav>
<h1>Archives</h1>
<ol reversed>
<li>My last post
<li>My first post
</ol>
</nav>
</aside>
<aside>
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
<h1>Twitter Feed</h1>
<blockquote cite="http://twitter.example.net/t31351234">
I'm on vacation, writing my blog.
</blockquote>
<blockquote cite="http://twitter.example.net/t31219752">
I'm going to go on vacation soon.
</blockquote>
</aside>
<article>
<!-- this is a blog post -->
<h1>My last post</h1>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Permalink</a>
</footer>
</article>
<article>
<!-- this is also a blog post -->
<h1>My first post</h1>
<p>This is my first post.</p>
<aside>
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
<h1>Posting</h1>
<p>While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</p>
</aside>
<footer>
<p><a href="/first-post" rel=bookmark>Permalink</a>
</footer>
</article>
<footer>
<nav>
Archives —
About me —
Copyright
</nav>
</footer>
</body>
Based on this HTML5 Doctor diagram, I'm thinking this may be the best markup:
<aside class="sidebar">
<article id="widget_1" class="widget">...</article>
<article id="widget_2" class="widget">...</article>
<article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->
I think it's clear that <aside> is the appropriate element as long as it's outside the main <article> element.
Now, I'm thinking that <article> is also appropriate for each widget in the aside. In the words of the W3C:
The article element represents a self-contained composition in a
document, page, application, or site and that is, in principle,
independently distributable or reusable, e.g. in syndication. This
could be a forum post, a magazine or newspaper article, a blog entry,
a user-submitted comment, an interactive widget or gadget, or any
other independent item of content.
The book HTML5 Guidelines for Web Developers: Structure and Semantics for Documents suggested this way (option 1):
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
It also points out that you can use sections in the footer. So section can be used outside of the actual page content.
I'm surprised that none of the responses above consider responsive design.
I may have valid aside elements such as a tag cloud, links for further reading and so on together, one after the other, in my sidebar when my page is viewed on a desktop device.
However, when my page is reduced on a mobile device to a single column then I will be separating those elements. My navigation element will go between my header and main content elements, and links for further reading will go below the main content element, above the footer.
As the semantic content of these elements is not changing with the width of the display window, then they need to be individually marked up as aside elements.
It follows then, that the sidebar itself should not be marked up as an aside element, even when it only contains content of one type.
In turn, this means that Option 1 in the original question must be undesirable (wrong?) and that the better answer should be Option 2.
The ASIDE has since been modified to include secondary content as well.
HTML5 Doctor has a great writeup on it here:
http://html5doctor.com/aside-revisited/
Excerpt:
With the new definition of aside, it’s crucial to remain aware of its context. >When used within an article element, the contents should be specifically related >to that article (e.g., a glossary). When used outside of an article element, the >contents should be related to the site (e.g., a blogroll, groups of additional >navigation, and even advertising if that content is related to the page).
I want to change
<section>
<header>...</header>
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
</section>
into
<section>
<header>...</header>
<article class="tweet">
<p>This is a tweet preview. You can... <time pubdate>6 Hours ago</time></p>
</article>
</section>
But after reading some articles on the <article> tag, I'm not sure that this is the best move. What would be better practice?
The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:
<sectioning_element>
<heading_or_header>
... the body text and markup of the section
<footer>
</sectioning_element>
The footer is optional. Sectioning elements should have a "natural" heading. That is, it should be easy to write an <h?> element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.
It's not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn't want to display it, but you should be able to say easily what it would have been had you chosen to include it.*
For example, a section might have a natural heading "cars for sale". It's extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.
<section> tends to be used for grouping things. Their natural headers are typically plural. e.g. "Cars for Sale"
<article> is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. "My New Car"
So, if you're not grouping some things, then there's no need, and it's not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be
<article class="tweet">
<header>...</header>
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>
assuming you can find a natural heading to go inside the <header> element. If you can't, then the correct mark-up is simply
<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>
or
<div class="tweet">
<p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>
* There's a case for including the natural heading anyway, and making it "display:none". Doing so will allow the section/article to be referenced cleanly by the document outline.
<article> content
represents a self-contained composition in a document, page,
application, or site and that is, in principle, independently
distributable or reusable, e.g. in syndication. This could be a forum
post, a magazine or newspaper article, a blog entry, a user-submitted
comment, an interactive widget or gadget, or any other independent
item of content.
(from the html5 working spec)
in fact one of the examples illustrates nested <article> elements where the inner <article> is inside a <section>
Why don't you think it's a good move? It seems to me that a Tweet would fit perfectly in the W3C spec on what should be in an article. It would most likely depend on the context your sample code is in (which we can't tell from what you've provided).
It could also be put this way.
The semantics don't matter THAT much. You could very well do that if you wanted to and it would be fine. The thing with the article vs. section usage debate is that it's all subjective, to a point. I would recommend against how you're doing it in the second version though because it seems as though that just clutters the code more. What you could do is just replace the section tag with an article tag.
I went through quite a bit of head scratching to understand it because it seems to be confusing to quite a few but it really should be looked at a bit more literally. Here is an easy way to look at it:
Sections can contain elements from different topics.
Articles should contain elements from the same topic.
For example:
<section>
<section>
<article id="article_ONE">
<header>...</header>
<p>Not directly related to article_TWO</p>
<footer>...</footer>
</article>
</section>
<section>
<article id="article_TWO">
<article>
<header>...</header>
<p>Part 1 of article TWO</p>
<footer>...</footer>
</article>
<article>
<header>...</header>
<p>Part 2 of article TWO</p>
<footer>...</footer>
</article>
</article>
</section>
</section>