| SitePoint Sponsor |
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....
Welcome to HTML5.Originally Posted by mattwebb
The <body> element.what is the correct element that should contain ALL of your content?
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.
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)
"Conan, what is best in life?"
and of course "Crush your enemies, see them driven before you and hear the lamentation of the women"The <body> element.
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 :
would justifiably bring about the wrath of deathshadow60!Code:<body> <div id="page"> <div id="links"><nav><ul><li><a href="#">some link</a></li></nav></ul></div> </div> </body>
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
Keep in mind you dont need to SECTION everything... that would be akin to divitis.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>
that is the GENERAL GIST. Again the CONTENT and ITS MEANING determine on an individual case what is semantically correct.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
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.
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.
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.
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 CSSI tend to disagree because I always seem to have to isolate things like the masthead, content area, main content area, any sidebars and footers.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
I was referring to HTML4.
The only code I hate more than my own is everyone else's.
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.
http://developers.whatwg.org/section...e-body-elementThe body element represents the main content of the document.
<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:
which means none of <div>, <section> or <article> is a candidate for ALL of your content.Code:html head body div section article section article
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.
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.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>
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.
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.HTML 5 -- I STILL can't believe anyone is DUMB ENOUGH to want to use it.
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.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
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.
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.
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...
/FAIL/ at even understanding the entire POINT of using numbered headings.... and even without HGROUP that's nonsensical BS.Code:<hgroup> <h1>Site Title</h1> <h2>Tagline</h2> </hgroup>
... 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.
I'm lawling at Red Green... you know he's invisible to the reg-green colour-blind? I keeed.
Application menus. Since HTML5 is meant to address HTML4's almost-total lack of application markup.
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.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
Posting Permissions
Reply With Quote
Bookmarks