SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Main content area in HTML5 - what is correct ????

    Hi, I'm stuck in a debate, trying to confirm the semantically correct HTML element, in HTML5 which holds all of an HTML pages main content... EG: every page usually has a <header>, <nav>, <aside> and <footer>... But what is the correct element that should contain ALL of your content ???

    <section>

    <article>

    Or

    <div>

    It's driving me nuts, I can't seam to find a definitive answer....

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mattwebb View Post
    It's driving me nuts, I can't seam to find a definitive answer....
    Welcome to HTML5.

    what is the correct element that should contain ALL of your content?
    The <body> element.

    HTML5 is still in development and constantly evolving, and no one seems to be be very clear on what it's all about. (I say this because—possibly like you—I emerge from reading about it more confused and none the wiser than when I started.) My suggestion is that you leave it alone until it's actually ready for the real world ... and even then think twice. (For mine, HTML5 is ruining the simplicity and logic of HTML ... but maybe I'm just a fogey.)

    Presumably the answer to your question is <section>, but to be honest, I don't really care enough to check.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on what it is.

    There's a lot of debate on this, but I like to use <section> for anything that couldn't pass as an article.

    So for main page content, I'd say <section> is your best bet.

    Just remember that if you have a wrapper element, that is purely for styling purposes and should therefore be a <div>. Anything that exists only for styles and adds nothing to the content should be a generic element (div or span)

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    "Conan, what is best in life?"
    The <body> element.
    and of course "Crush your enemies, see them driven before you and hear the lamentation of the women"
    The body element has ALWAYS ( not just in HTML5 been the default container element ( tho I suppose technically The HTML element is the ROOT element of a page)

    If you are adding HOOKS FOR CSS , which have no semantic meaning, using a DIV would be appropriate. But as we know we shouldn't add hooks unless absolutely necessary.

    so something like :

    Code:
    <body>
    <div  id="page">
    <div id="links"><nav><ul><li><a href="#">some link</a></li></nav></ul></div>
    </div>
    </body>
    would justifiably bring about the wrath of deathshadow60!

    NOW
    If you werent talking about ALL your HTML and just what your main content is. you could consider SECTION/ ARTICLES as recursive semantic elements

    Code:
    <body>
    <header></header>
    <nav>
         <ul>
           <li><a></a></li>
           <li><a></a></li>
         </ul>
    </nav>
    <section id="content">
       <section  id="main">
            <article>
                  <header></header>
                   <p></p>
            <article>
            <article>
                  <header></header>
                   <p></p>
            <article>
            <article>
                  <header></header>
                   <p></p>
            <article>
      </section>
       <section id="sec">
            <article>
                  <header></header>
                   <p></p>
            <article>
            <article>
                  <header></header>
                   <p></p>
            <article>
      </section>
    </section>
    <aside>
            <article>
                  <header></header>
                   <p></p>
            <article>
             <nav> <a>links?</a></nav>
    </aside>
    <footer>       
             <article>
                  <header></header>
                   <p></p>
            <article>
    <footer>
    Keep in mind you dont need to SECTION everything... that would be akin to divitis.
    that is the GENERAL GIST. Again the CONTENT and ITS MEANING determine on an individual case what is semantically correct.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I would think section but I haven't used those elements for any projects so…

    I normally just wrap all the "main-content" in a div with an id of main-content considering that area is always an important part of the page which generally needs to isolated or have items selected relative to it with CSS.

    Quote Originally Posted by dresden_phoenix
    If you are adding HOOKS FOR CSS , which have no semantic meaning, using a DIV would be appropriate. But as we know we shouldn't add hooks unless absolutely necessary.
    I tend to disagree because I always seem to have to isolate things like the masthead, content area, main content area, any sidebars and footers. Having those components wrapped in a containing div results in much less convoluted CSS. Of course I'm not saying go crazy with it but it is pretty much guaranteed that those layout regions will need to have hooks for styling purposes. The only websites where is has been different are dedicated mobile ones where the layout doesn't have things like sidebars. The "main content" area is generally the same as the content area.
    The only code I hate more than my own is everyone else's.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by mattwebb
    But what is the correct element that should contain ALL of your content ???
    The others above answered THIS question, but the one in your thread title seems to be a different one.

    HTML5 does not have a <main> tag. They left this out, according to Bruce Lawson, because they could get away with the Scooby-Do rule: anything that's not the main page header, nav, contentinfo, aside, or complementary... must be the main content. So, the HTML5 document outline assumes as such, regardless of whether you use a div, section, article, or whatever (though section and article themselves become part of the document outline, so in that case the outline will assume a "main" around those elements if they don't fit any of the other top-level block types).

    You can help things using ARIA landmark roles though. You can also use them for CSS styling if you're not worried about IE6.

    <div role="main">...</div>

    div[role=main] {
    style;
    }

    There should only be one "main" role per HTML page.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I tend to disagree because I always seem to have to isolate things like the masthead, content area, main content area, any sidebars and footers.
    Why? Aren't they isolated by the very fact that there is a "footer' or "header" , etc, tag? Any extra wrapping element is superfluous.. at most justified only as an extra hook for CSS

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by dresden_phoenix
    Why? Aren't they isolated by the very fact that there is a "footer' or "header" , etc, tag? Any extra wrapping element is superfluous.. at most justified only as an extra hook for CSS
    I was referring to HTML4.
    The only code I hate more than my own is everyone else's.

  9. #9
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattwebb View Post
    But what is the correct element that should contain ALL of your content ???
    Since the only elements that are restricted to one per document in a web page (HTML4 or HTML5) are <html>, <head>, <title> and <body>...

    ... and you wonder about ALL of the content ...

    ...<body> it is.

    The body element represents the main content of the document.
    http://developers.whatwg.org/section...e-body-element


    <hr>


    If we talk about sectioning elements of HTML5, specific sections like <section>, <article>, <nav>, <header>, <footer> are just that: specific. As in: not containers, but sections. Which means you could have this:

    Code:
    html
      head
      body
        div
          section
          article
        section
        article
    which means none of <div>, <section> or <article> is a candidate for ALL of your content.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ralph has it right -- if you're talking "all" your content, that's BODY's job.

    Of course, if you're writing markup semantically with numbered headings and horizontal rules to mark the start of subsections properly, none of those HTML 5 tags serve any purpose... which is why if you are going to have extra tags as hooks to apply CSS to, you use DIV or SPAN -- since they do not alter the meaning of the content or the semantic tags you should already be using.

    Which is why it's pathetic how people are now slapping ARTICLE around everything wrapped by SECTION -- for no good reason.

    Which is why I consider HTML 5 to be pathetically useless nonsense designed to set web development BACK a decade or more -- it offers NO tangible benefits apart from letting the people who up until two years ago were sleazing out HTML 3.2 with a 4 tranny doctype on it, to slap the 5 lip service around their rubbish outdated code and call themselves "modern".

    See the second code example in Dresden_Pheonix's post for everything WRONG with HTML 5.

    Code:
    <h1></h1>
    
    <ul>
     <li><a></a></li>
     <li><a></a></li>
    </ul>
    
    <h2></h2>
    <p></p>
    <h2></h2>
    <p></p>
    <h2></h2>
    <p></p>
    
    <h2></h2>
    <p></p>
    <h2></h2>
    <p></p>
    
    <h2></h2>
    <p></p>
    <ul><li><a>Links?</a></li></ul>
    
    <hr>
    <div>Footer text</div>
    Anything else is a presentational hook, and that's DIV or SPAN's job. (that last DIV only being there to lip-service the 'no inline-level content' part of validation.

    What makes the stuff in the sidebar be "articles?", why are they broken into sections when heading tags or horizontal rules already say you're starting a new section?

    HTML 5 -- I STILL can't believe anyone is DUMB ENOUGH to want to use it.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    HTML 5 -- I STILL can't believe anyone is DUMB ENOUGH to want to use it.
    have you gone on craigslists or Monster or such looking for a developers job lately you better LOVE CSS3 and HTML5 ( including APIs)..lol It's clients that ask for this.

    Personally, I thought it had promise but then something must have gone horribly wrong. NAV beign one of biggest "unfixable" let downs. It makes sense to have a NAV element instead of a UL .. but its bloat as a wrap.

    Some of the other stuff simply gave, or attempts to give, semantic meaning to wrappers we were marking up with extra classes or IDs anyway.

    The key is the THINKING , in most cases. If you DONT need the extra markup DONT use it.. and dont FORCE semantics on content that carries none. Really the errors you see in HTML5 are not a new phenomena , its the same as those from the DIVitis, era.. except now its SECTION and it's officially sanctioned...lol.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    have you gone on craigslists or Monster or such looking for a developers job lately you better LOVE CSS3 and HTML5 ( including APIs)..lol It's clients that ask for this.
    Because it's now just as sick a buzzword as "Web 2.0" was just a few years back, where everyone was using the term without even understanding what it meant. I consider it my job to inform those types of people that taking technical advice from the pages of Forbes is like taking financial advice from the pages of Popular Electronics.

    Quote Originally Posted by dresden_phoenix View Post
    Personally, I thought it had promise but then something must have gone horribly wrong. NAV beign one of biggest "unfixable" let downs. It makes sense to have a NAV element instead of a UL .. but its bloat as a wrap.
    Given it's purpose -- indicating a section of content that a user may want to skip in the page for not being content; in the most popular use -- at the top of a page to skip the menu and other stuff -- I thought that was a numbered heading (in this case H2) or horizontal rule's job to indicate where the next subsection starts... so it's entire PURPOSE was redundant! Especially since in USEFUL browsers like Opera I already HAVE that functionality on websites where people use headings properly!

    If they just meant it as a replacement for UL, why not bring back the MENU tag that was deprecated in 4 STRICT? Which they did, for some completely different other purpose related to forms that I've been unable to get a straight answer from ANYONE on as to "why?"... At least that would say it's a menu, and not some uselessly vague term that applies to every anchor on the page!

    Though I hate it right down to the name -- nav, navigation... every anchor on a website is 'navigation' making that vague and meaningless -- I thought class="nav" is uselessly vague BS every time I see it, who on earth thought it was a good idea for a tag?!? Herpaderp -- again why I think it's meant for the crowd who see nothing wrong with vague/pointless idiocy like "style.css", class="style-47", or </div><!-- end div --> -- you don't know what's wrong with those, do the world a favor and back the {expletive omitted} away from the keyboard.

    Part of the laugh of people thinking all the tags that were deprecated in STRICT were for being 'presentational' -- NOT! Most of them were ditched for being vague and redundant. Vague and redundant? You mean like HTML 5? I'm looking forward to when 6 STRICT deprecates all these new structural tags as pointless.

    Quote Originally Posted by dresden_phoenix View Post
    The key is the THINKING , in most cases. If you DONT need the extra markup DONT use it.. and dont FORCE semantics on content that carries none.
    Or even more semantics around things that already have it. See "HGROUP" for the pinnacle of HTML 5 stupidity in that department -- justifying the half-assed nonsensical practice of pairing sibling heading tags when not starting a section and subsection...
    Code:
    <hgroup>
      <h1>Site Title</h1>
      <h2>Tagline</h2>
    </hgroup>
    /FAIL/ at even understanding the entire POINT of using numbered headings.... and even without HGROUP that's nonsensical BS.

    Quote Originally Posted by dresden_phoenix View Post
    Really the errors you see in HTML5 are not a new phenomena , its the same as those from the DIVitis, era.. except now its SECTION and it's officially sanctioned...lol.
    ... and TABLE before that -- as our dearly departed friend Dan used to say "the people who made endless nested tables for no reason moved on to make endless nested DIV, net improvement zero." -- to which I'd now append "and today just replace those div with pointless HTML 5 tags instead of leveraging the EXISTING semantics we've had since day one!"... Though should probably work the people abusing nested lists on obviously tabular data in that, like the dimwits making vBulletin themes.

    Well, that and they seem to miss that the entire reason to use DIV is to NOT change the semantics since you already should have plenty! ... and that it starts to become micromanaging the meanings of every little element instead of actually letting the content itself do the talking. Perish the thought...

    Bloated code is bloated code -- the difference being that before it was just wrong, now they're justifying bad practices as 'normal' with lame excuses and new tags... just part of why I say HTML 5 sets coding practices BACK a decade or more. Welcome to the pinnacle of the browser wars and HTML 3.2 -- all the lessons of which are now long lost.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm lawling at Red Green... you know he's invisible to the reg-green colour-blind? I keeed.


    Quote Originally Posted by crusty
    why not bring back the MENU tag that was deprecated in 4 STRICT? Which they did, for some completely different other purpose related to forms that I've been unable to get a straight answer from ANYONE on as to "why?"
    Application menus. Since HTML5 is meant to address HTML4's almost-total lack of application markup.

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    oh I had this long-@ss answer.. but my cell ated it.
    I hope you know I was agreeing with you DS60.. in almost everything but where the "blame" originated.


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
  •