SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: HTML 5 nesting

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    194
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    HTML 5 nesting

    Is it valid to put <header> and <footer> inside of <main>?

    I ran a file through the validator with this code:

    Code HTML4Strict:
    <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

    Code HTML4Strict:
    <somewrapper>
         <header>
         </header>
          <main>
          </main>
          <footer>
          </footer>
    </somewrapper>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,822
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It may or may not be valid but it certainly is not semantic.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    194
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so header, main, and footer should be siblings to be semantic?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sessions View Post
    Is it valid to put <header> and <footer> inside of <main>?
    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>.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    <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.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    194
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post

    In that page's own code, there is a <header> inside the <main>.
    About how far down, I can only find them as siblings.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    194
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    <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.
    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>.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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

    Quote Originally Posted by sessions
    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>.
    -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
    Code:
    <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
    Code:
    <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
    http://www.456bereastreet.com/archiv...ment_outlines/
    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/20...lity-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.


    * I like putting footers right after headers in articles. It's totally allowed and I think people could do it that way more often.

    ** Hixie proposes multiple mains in a case such as this:

    Code:
    <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.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    main's carrying a role of main so NVDA and I think VO already can do something with it
    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.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •