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.
Related
On a page I'm working on, I noticed the following pattern:
<section>
<header>Article Headline</header>
<footer>
<!-- publication date and author go here -->
</footer>
<article>
<!-- article content goes here -->
</article>
</section>
At first glance, I was a bit surprised by the appearance of the <footer> element before the <article> (I'm a backend developer and my HTML skills are not honed as much as they probably should). When asked about this, my colleague just said that the ordering used here made the styling easier, was probably fine when semantics are concerned and that the order didn't matter but couldn't point me to a definitive source.
I tried to find some information on the semantics of the <footer> tag and it seems that a lot can be said about the rules governing its allowed content or its appearance as a child of another tag (I find the description on MDN particularly nice and clear) but there's little to no information on the ordering.
The only mention of the order of <footer> I found is in the W3C specification for HTML5
Footers don't necessarily have to appear at the end of a section, though they usually do.
Based on these sources, it seems to me that there are indeed no rules specifying any relationship between <article> and <footer> other than the well explained parent-child one. Therefore, the markup from the beginning of my post is semantically correct and we're indeed free to reorder these elements at will if it serves some other purpose.
Is this assumption correct? Are there any other caveats that we have to be mindful of?
Yes, your assessment is correct. A footer will always be a footer regardless of where exactly it appears within its sectioning element, as long as it appears within the correct sectioning element it is intended for. The sole distinguishing feature of a footer is the sort of content that appears inside it, which, as the spec suggests, may be:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
As §4.3.8 The footer element says,
The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element.
So you can move it freely (if that doesn't change its section) without changing its semantic meaning: being the footer of that section.
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.
My colleague who work with me and is responsible for SEO on pages slightly force me to use <div id="footer"> instead of new <footer>, cause saarch robots supposedly works better with the <div id="footer">.
I won't ask what is better to use cause I don't want to have question which doesn't fit SO rules.
I better ask what are advantages and disadvantages of these two approaches?
My research:
I think <footer> is better from Semantic Web view hence it's better.
I read some articles about HTML5 and new elements which brought me to use <footer> instead of <div id="footer">.
The only possible logical reason I can see why this could possibly be true is if Google see "<footer>" as a footer, but "<div id='footer'>" the same as other content on the page.
As a footer should just be part of the template, rather than the content, they may use that tag to say that they should not index text within it as that page's content.
However, even if that is true, I can't see how that would impact on SEO.
It seems many SEOs like to tweak things with no rationality or evidence. Other SEOs would no doubt tell you that the footer is duplicate content and so should be removed altogether.
It should really be up to your SEO to give reasoning why it works and why it is worth the impact upon code quality.
Semantic code should help search engines index your pages correctly - it tells them what everything is.
I know this is old, but the <footer> element (to quote spec):
The <footer> element represents a footer for its nearest ancestor <main> element or sectioning content or sectioning root element. A footer typically contains information about its section, such as who wrote it, links to related documents, copyright data, and the like.
A <footer> element can also contain entire sections representing appendices, indexes, long colophons, verbose license agreements, and other such content.
When a <footer> element’s nearest ancestor sectioning root element is the <body> element, and it is not a descendant of the <main> element or a sectioning content element, then that <footer> is scoped to the <body> element and represents a footer for the page as a whole.
TL:DR; A footer element can be in any element. It can be an article footer, and is only treated as a main site footer when it's parent element is the body tag. It also means you can have more than 1 footer element in a site.
Adding id="footer" identifies it as the footer for the main site, and not an article footer. Not sure how it being a div or a footer tag affects seo however, as I suspect seo parsers look for an element with "footer" as the id, and ignore the container type if it's found.
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.
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