Is it valid to put <header> and <footer> inside of <main>?
I ran a file through the validator with this code:
<main>
<header>
</header>
<div>
</div>
<footer>
</footer>
</main>
and it passed, but all examples I’ve seen online so far make <header>, <main>, and <footer> siblings, as in
<somewrapper>
<header>
</header>
<main>
</main>
<footer>
</footer>
</somewrapper>
It may or may not be valid but it certainly is not semantic.
so header, main, and footer should be siblings to be semantic?
As far as I know, yes it is. As far as HTML5 goes, I’d assume it is semantic. In HTML5, you divide the page into various parts, many of which can have their own <header> and <footer>, if needed.
This is a useful page: http://html5doctor.com/the-main-element/
In that page’s own code, there is a <header> inside the <main>.
<main> should most likely (depending on your page) be siblings to the page’s main header and footer… however since many elements who can live inside <main> can have their own headers and footers, it’s okay to have code like you posted above (the second bit of code I mean).
… so long as what you posted above is a general page or document outline. <main> is not intended to be used to mark up the main-content chunk of some smaller in-page element such as an article or a section. It’s mostly a tag used to tell software where all the not-banner not-navigation not-header not-footer not-ads-and-crap content of any given page is, even if that content has some of those things inside of it. Think software like Readability that tries to give you the BS-and-nav-free version of a site’s dedicated article.
<main> itself is not a sectioning element and shouldn’t have it’s own <header> or <footer> as direct children. But an <article> or <section> inside main can have however many headers and footers and asides you want.
About how far down, I can only find them as siblings.
I’m so confused 
The page in question has 1 header ( the page header ), 1 main content area, and 1 page footer.
because of the way the page is styled, it made sense to group the header and footer in 1 “main content” element. I may have to wrap my header, main and footer in a <div id=“mainContent”></div>. I suppose I was trying to avoid that extra containing div by wrapping header and footer in <main>.
Well, there are no Brownie points for using <main> yet anyway, as it’s brand new and basically experimental, and has no semantic value yet. I’d go with a div for now, with a role=“main” for good measure.
Actually ralph main’s carrying a role of main so NVDA and I think VO already can do something with it, which is pretty cool.
But not everyone is up-to-date enough to associate automatically the role of “main” with the new tag, so <main role=“main”> or <div role=“main”> are both preferred over <main> alone. Similarly, even though it’s older, <nav role=“navigation”> is also still recommended even though now according to the specs nav’s have already the navigation role implicitly associated. So, some Brownie points. Does that mean we get brownies? om nom nom nom
-edit ok now I see it. Yeah, don’t do that. Most of the time pages have something wrapping the main content separate from page headers/footer/etc so either changing that thing to a <main> or throwing a role of “main” on it works instead. But no, <main> can’t replace <div id=“wrapper”> of an entire page (what’s outside that div? just the body?) because then it breaks what the main role is supposed to do: show people the main stuff, so not the header stuff nav stuff footer stuff and blah blah blah either.
I’ll just post what should be good and what should be avoided, as I understand it:
good
<body>
<div id="page">
<header>
main page header stuff, logo, blah
</header>
<nav></nav>
<aside>...blah blah blah.... archives... ads... </aside>
<main>
<article>
<header> //this would be the article's header
<h1>HIER BE PAGE</h1>
<p>date</p>
</header>
<footer>
posted on such-and-such by <a href="#">so and so</a>
tags: foo, bar, baz
</footer>*
<p>
article stuffs
</p>
</article>
//m0aR articles, sections, whatever... possibly containing their own headers and footers and whatnot
</main>
<footer>
main page footer stuffs here
</footer>
</div>
</body>
The above is according to w3c version of the spec-- the WHATWG version claims multiple mains per document are fine, which right now is being, um, discussed. W3C believes more than one main per document creates a similar problem as more than one nav-- it prevents software from easily finding the (usually single) main content of a page.**
Here’s what you don’t do
<body>
<main>
<header>
main page header stuff, logo, blah
</header>
<nav></nav>
<aside>...blah blah blah.... archives... ads... </aside>
<article>
<header> //this would be the article's header
<h1>HIER BE PAGE</h1>
<p>date</p>
</header>
<footer>
posted on such-and-such by <a href="#">so and so</a>
tags: foo, bar, baz
</footer>*
<p>
article stuffs
</p>
</article>
//m0aR articles, sections, whatever... possibly containing their own headers and footers and whatnot
<footer>
main page footer stuffs here
</footer>
</main>
</body>
Main isn’t meant as a replacement to page wrapper, it’s meant solely to point out what, in your document, is the purpose content, why people went there. So not logos, main navigation, footer info, or sidebar ads. You’re free to put in as many articles and sections inside your main as you want, and you can have a main sitting on the page with (let’s say accessory content) articles and sections around it as siblings, and sectioning elements like article, section, aside can have their own headers and footers.
In this link
which was written before the main element, the div he calls “main” would be the <main> element. Later in “HTML5” he does <article id=“main”>… today if using the <main> element you’d do
<main>
<article>
…
</article>
</main>
<aside>…
using Roger’s code.
If you View Source on his page you’ll see his article is wrapped in a div called “main”, and today you could swap that for a <main> tag, though I would have stopped at the small ad at the bottom and not include the “possibly related” links, but this starts getting subjective and people who agree on the general use of <main> would argue here.
If this particular SitePoint forum page were to be marked up with <main>, it would start right before the h1 with the Thread tile in it, and end right after the Reply to Thread button (or after the Post Quick Reply buttons if you chose to include the quick reply box in main).
On this page
https://www.ssbbartgroup.com/blog/2013/07/03/jquery-ui-accessibility-analysis/
I would start a <main> tag right before the h2 (which should be an h1) called “jQuery UI Accessibility Analysis” and end </main> after the Leave a reply line.
Main is meant to do for software and the visually impaired what our eyes tell us as we look at a web page-- we visually group stuff into boxes and when we want to read “main content” we tend to use the visual cues of those boxes to go directly to what we think is the main content.
So your markup should try to do what your eyes would tell you anyway.
** Hixie proposes multiple mains in a case such as this:
<header/>
<nav/>
<main>
<hx>foo bar baz</hx>
<p>main content stuffs</p>
</main>
<in-page advertisement(s)/>
<in-page links to related articles/>
<main>
<hx>quux</hx>
<p>continuation of the main content...</p>
</main>
<aside(s)/>
<footer/>
This causes more headache for software and visually-impaired visitors but we’ve all seen articles on the web that use JS to inject ads right into the content, and the multiple-main use case above would let that stuff get filtered out of anything scraping “main content”. It would probably be acceptable to most users like this, but the fear is authors would start treating <main> like <article> and you lose the obviousness and simplicity you get with a general “one per page” rule. As I said, it’s being discussed, and currently the two specs don’t agree here.
Is it any different from using a div with that role, though?
I like putting footers right after headers in articles. It’s totally allowed and I think people could do it that way more often.
I like that. I was thinking that the “published on” bit could go just after the heading in a footer element … Though it does make a joke of the name itself.
Is it any different from using a div with that role, though?
No, or actually, putting the role on something (even main) would be somewhat safer. HTML5 maps the roles but unless the browsers and AT recognise it, explicit labelling by the author would be safer. I still put role=“navigation” on my navigation too, whether I use nav or not (now that that NVDA bug is gone where it would see both the implicit role and the authored role and announce two).