I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA.
It is OK to have the following set up?
<!-- main content -->
<section id="main" role="main">
<h1>The main content</h1>
<!-- This div needs to be here for styling reasons -->
<div class="the-content">
<p>All the text that goes with the main content</p>
</div>
<!-- the sidebar -->
<aside id="sidebar" role="complementary">
<h2>A title</h2>
<p>Some text</p>
<aside>
</section>
The thing I'm not sure of is if I should have the <aside> element outside of the <section> and the role="main" container. Does that matter?
It does matter yes. Where to put it is defined by how the content in the aside tag relates to the main section.
For example:
If the content in the aside is related to the main article, it should be inside the main section. However if the content inside the sidebar aside tag is different to main I would put it outside of the main section
http://html5doctor.com/aside-revisited/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
Yes, it the <aside> inside the <section> is perfectly valid markup and will pass W3C validation, if that's what you're worried about.
The <section> element allows flow content inside which may include the <aside> element - however if you're only using sections for styling purposes, you should probably be using a div instead.
Aside from that (pun intended) I have my doubts on the role=main part being valid - according to this, the only role attribute values allowed on <section> elements are shown below:
Default ARIA semantics:
role=region.
What Other ARIA roles, states and properties may be used?
alert, alertdialog, application, contentinfo, dialog, document, log,
marquee, search, or status.
Any global aria-* attributes and any aria-* attributes applicable to
the allowed roles.
Which rather notably doesn't include the main role.
The spec (editor's draft that already includes main) doesn't allow to nest the main element inside article, aside, footer, header or nav, but it doesn't say anything about nesting these elements inside main. It also provides two examples that use article and nav (intra-document navigation) inside main. So at least aside, nested in the article or section (and therefore scoped to its level), should be also allowed. I also can imagine the case where some part of content with some supplementary info inside (like in the aside usage examples in the WCAG Wiki) may form together the main content of the page, so I don't think that disallowing it would be reasonable.
On the other hand, the outline algorithm (which now seems to be the primary reason for the existence of all sectioning content, including aside) is still marked as being 'at risk', so the definition of these elements may change and some clarification may be added.
Probably we should ask this question to the HTML5 spec editors?
I will concur with Darren in regards to where you drop the tag. Also, your tagging is a little wacky. Various tags have WAI-ARIA roles natively, while yes you can overwrite native roles, but why would you? This post about WAI-ARIA on the Paciello Group's blog talks about it more. Ex:
Insstead of using
<section id="main" role="main">
you could just use <main>, which means the same thing, and better practice. The <aside> tag has the complementary role added natively, so that is like saying My name is Ryan, really my name is Ryan.
Related
Is it an acceptable practice to use section tag as a child anywhere in the page
or it should be always a main tag???
For example:
<section class="software-development">
<h2>
<span>Software</span>
<span>Development</span>
</h2>
<div class="development-areas">
<section class="web-apps">
<h2>Web Applications</h2>
<p>dolor ipsum........</p>
</section>
<section class="mobile-apps"></section>
<section class="desktop-apps"></section>
</div>
</section>
You can use almost any HTML tag for anything you want, but the idea of semantic tags is to give meaning to the content of your page.
In this particular case, you can use the section tag (or even the article) to define any self-contained part of your page, there's nothing wrong with that, in fact it IS a section after all with its own title. Don't think of the use of the tags as a hierarchy all the time; think of what the element your creating actually is in the page and use the appropiate tag;
This is a great article that can help you clear everything regarding semantic tags:
https://www.lifewire.com/why-use-semantic-html-3468271
Just a quote from the same article:
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because people know what paragraphs are and browsers know how to display them.
More information for the section tag based on Mozilla's Docs:
Each should be identified, typically by
including a heading (<h1>-<h6> element) as a child of the
element.
If it makes sense to separately syndicate the content of a <section>
element, use an <article> element instead.
Do not use the <section> element as a generic container; this is what
<div> is for, especially when the sectioning is only for styling
purposes. A rule of thumb is that a section should logically appear in
the outline of a document.
You can read more in this question as well: https://stackoverflow.com/a/53229971/8437694
No, not anywhere. The specs say the following (emphasis mine):
The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a
tabbed dialog box, or the numbered sections of a thesis. A Web site's
home page could be split into sections for an introduction, news
items, and contact information.
Authors are encouraged to use the article element instead of the
section element when it would make sense to syndicate the contents of
the element.
The section element is not a generic container element. When an
element is needed only for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead. 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.
So <section> could easily be put almost anywhere without fighting against its semantics.
Technically, you can use <section> anywhere "where flow content is expected".
how many main tags can be added to my html page. Is there any restriction to add more than one main tag(like one per page)?
is this correct way of using main tag??
<body>
<header></header>
<aside></aside>
<main>
<section></section>
<main>is this correct!!!</main>
</main>
<footer></footer>
The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
Authors must not include more than one main element in a document. (source)
Authors must not include the main element as a child of an article, aside, footer, header or nav element.
once only
here's a great article on HTML5 DOCTOR.
It should house the main content of a document or app. Its most important purpose is to "map ARIA’s landmark role main to an element in HTML."
It can’t be used as a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
here's an example of typical usage.
<body>
<header role="banner"></header>
<main id="content" class="group" role="main">
<!-- main content -->
</main>
<footer role="contentinfo"></footer>
</body>
It can't be more than once and should not be a descendent of any of these elements <article>, <aside>, <footer>, <header>, or <nav>.
The <main> tag purpose is to specify a document main content. Therefore, it should be the main container as cleared from its semantics and it should be used once in an HTML document.
Browser support:
<main> tag has fairly good support in all modern browsers except the great IE
For more detail with example you can read it here (w3schools).
Actually it is a bit confusing.
MDN states:
"A document mustn't have more than one < main > element that doesn't have the hidden attribute specified."
This was actually my idea: having more main's where only one is visible and the remaining hidden, so that an eventual navbar allows to switch 'pages'.
I think this is the reason why MDN says that, and it would be a very valid use case, although clashes with the W3C spec.
With the addition of the <main> element in the HTML5 draft spec, which is the more correct page layout?
<body>
<header> ... </header>
<main>
<aside> ... </aside>
</main>
<footer> ... </footer>
</body>
or;
<body>
<header> ... </header>
<section>
<main> ... </main>
<aside> ... </aside>
</section>
<footer> ... </footer>
</body>
The answer as to the correctness of each of the example markup patterns can be found in the normative definition of the main element.
Contexts in which this element can be used:
Where flow content is expected, but with no article, aside, footer,
header or nav element ancestors.
Authors must not include more than one main element in a document.
In this case either example markup is conforming. It is difficult to know which is the most appropriate or practical from a theoretical example alone.
And which spec are the browsers following?
Browsers have implemented the main element as defined in the W3C HTML specification. Conformance checkers such as the W3C HTML validator will implement the conformance requirements of the W3C HTML spec.
Note: The main element will be added to HTML 5.0 in the near future.
Note: The specification of the main element in HTML 5.1 supersedes the extension spec.
As always it depends on the content.
For me, if the contents of the header and footer are generic to all pages, then leave them outside of the main element whose content should be specific to that page. If, however, the header and/or footer are relevant to the main contents of that page only, then put them inside the main.
The same logic applies to the aside element.
Plus read what Steve Faulkner says on this page. He knows everything!
Update!
Due to this particular question, I have posted an article with further examples on how the main element might be used.
In the second example, you have placed <main> within a <section>.
Since <body> is implicitly a "section" and the <section> belongs to it, the <section> is - in fact - a subsection.
This causes a problem.
Why?
As Steve points out, you can only use <main> once per page. In this example, you have chosen to use the one element that defines the main part of the page within a subsection of that page.
The "main" part of something surely cannot belong to a subset of that thing. This simply doesn't make sense, regardless of what you are "allowed" to do according to the current specification. Your deployment of <main>, in this example, is at odds with the structural intent described by your use of sectioning content.
In structural terms, the first example is - therefore - slightly superior, although your semantic choice of <aside> is suboptimal. You've essentially said, "here is the most important part of my page's content and in it is some tangential, loosely related stuff". Tangential to what?
Unless...
you are intending to put some flow content directly within the <main> region, adjacent to the <aside>. This content would belong directly to main, which belongs directly to <body>. The <aside> remains a subsection of <body> and is actually an "aside" to some main content.
This would be totally sound.
Which of the new HTML5 elements should be used instead of div.container and div.content ?
<header>
site header
</header>
<div class="container">
<div class="content">
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</div>
<aside>
sidebar
<aside>
</div>
<footer>
site footer
</footer>
div.content can probably be a <section>. div.container should probably remain a div.
None of them are made for that. I'd recommend using ARIA roles however.
<div class="container" role="document">
<div class="content" role="main">
These can then also be used in CSS with selectors like div[role='main']
You can't answer this example in general, it depends on the content of the page.
What matters here is the outline of your page. Therefor, you can ignore all div elements as they don't influence the outline. Only use them if you need them as hooks for CSS or JavaScript.
The first question would be: Is the aside related to the whole page or is it related to the "content area"? If it is related to the whole page, it must not be included in another sectioning element. If it is related to the content area, it has to be included in that sectioning element. Here I assume that it is related to the whole web page.
The second question: Is there a common heading for the three article elements? Examples would be: "My favorite books", "Latest blog posts", or "Products". If so, you should use a sectioning element which groups these three article elements. If there would be no possible heading, you probably don't want a sectioning element here, so could use div or not element at all.
The third question (if the second question was answered positively): Should this sectioning element be an section or an article element? If your choice of using the article element for these three "things" is correct, you probably (but not inevitably!) need a section here. Whether it was correct at all to use article, again, depends on the real content. So it could be possible that you rather want
<article>
<section></section>
<section></section>
<section></section>
</article>
instead of
<section>
<article></article>
<article></article>
<article></article>
</section>
Here I assume that your choice of using article for the three "things" is correct.
So the final version might look like:
<header>
<!-- if this header applies to the whole page -->
</header>
<section>
<!-- a h1 like "Latest blog posts" -->
<article>
content
</article>
<article>
content
</article>
<article>
content
</article>
</section>
<aside>
<!-- if this aside applies to the whole page -->
<aside>
<footer>
<!-- if this footer applies to the whole page -->
</footer>
I highly recommend reading about the differences between article and section over at HTML 5 DOCTOR.
You will then be able to make an informed judgment about which sectioning elements should be used and when, and also when not to use div.
What I have surmised from their blog is that:
article: Used for content which will make sense on its own!
section: for content which is a logical section of either another section or an article (fine to nest these).
div: still used for containers or as hooks for styling, which is something html5 elements should not be used for.
Finally the decision of using html5 sectioning elements can often be decided by the fact that it contains a heading (although this is not a hard and fast rule). There are a couple of useful tools to aid these decisions.
HTML5 Outliner - online
HTML5 Outliner - chrome extension
To consider this question as a constructive question, it needs to be interpreted as asking what the HTML5 drafts say about the matter. Then the answer is section 4.13.1 The main part of the content in the W3C HTML5 draft. To put it briefly, it says that normally you don’t need any specific markup: just put the content there. Obviously, you can wrap it in a div element if you need to treat it as a unit in CSS or in scripting.
And according to that section, it could be marked up as section or article if it constitutes “a section of a larger work, for instance a chapter” or “an independent unit of content that one could imagine syndicating independently”, respectively.
This is a matter of coding style. No general-purpose software (like browser or search engine) cares about your choice here.
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