Hey. I have been keeping away from HTML5 for a while now. Need to make that transition. My typical 2 column (blog style) layout would have typically been : *some css to float main left and sidebar right....* <body> <div id="main"> </div><!-- end DIV main --> <div id="sidebar"> </div><!-- end DIV sidebar --> </body> ........ My typical 3 column layout would be something like: *some css to float left column left, and float sidebar right <body> <div id="wrapper"> <div id="leftColumn"> </div><!-- end DIV leftColumn --> <div id="sidebar"> </div><!-- end DIV sidebar --> <div id="main"> </div><!-- end DIV main --> </div><!-- end DIV wrapper --> </body> ............ Those are some quick basic examples. Now I am trying to move over to HTML5's "new" tags, section, aside, article.... From my understand of a 2 column (blog style) layout, in html5 it should look like: *some css to float section main left, and aside sidebar right. <body> <section id="main"> <article> content goes here..... content goes here..... </article> </section><!-- end SECTION main --> <aside id="sidebar"> <div id="adBox1"> content goes here..... content goes here..... </div><!-- end DIV adBox1 --> <div id="adBox2"> content goes here..... content goes here..... </div><!-- end DIV adBox2 --> </aside><!-- end ASIDE sidebar --> </body> And from my (non-)understanding of a 3 column layout in html5: *some css float sidebarLeft left, and sidebarRight right <body> <aside id="sidebarLeft"> <div id="menu1"> content goes here..... content goes here..... </div><!-- end DIV menu1 --> <div id="menu2"> content goes here..... content goes here..... </div><!-- end DIV menu2 --> </aside><!-- end ASIDE sidebarLeft --> <aside id="sidebarRight"> <div id="adBox1"> content goes here..... content goes here..... </div><!-- end DIV adBox1 --> <div id="adBox2"> content goes here..... content goes here..... </div><!-- end DIV adBox2 --> </aside><!-- end ASIDE sidebarRight --> <section id="main"> <article> content goes here..... content goes here..... </article> </section><!-- end SECTION main --> </body> ..... I am conmpletely confused on where sections fit into place versus divs. I read a few articles, and all pointing in different directions. Someone mentioned the section tag shouldnt be used if you're using it for styling.. What does that mean?!?!?!? So my conclusion from what I've read so far. 2 column layout. Visually you will have a section tag and an aside tag......... In the section tag you will use divs, or just paragraph tags? And in the aside tag you will use divs, or just paragraph tags? My conclusion for a 3 column layout. *This is different from what I wrote up there. I think this to be better semantically. The 3 columns will be represented by 3 section tags. --First section tag on the left of a traditional layout will have a div for the first menu, and a div for the proceeding menus and any ad boxes below..... The second, and main content section will have a div holding all the main content. And a article tag if it is holding an article or snippet of an article....... The third and right floated section tag will be the ad boxes. So the section tag will contain divs for each ad box.... *Please note. I left out the header and nav tags because those are easier to understand their place. Any guidance on two column and three column layouts will be appreciated. And any info on the place of divs now.....
I wouldn't use the aside tag there. Maybe something like this? <main> <!-- main column --> <article></article> </main> <section id="sidebar1"> </section> <section id ="sidebar2"> </section> Code (markup):
There's a "main" tag? It hasnt been removed? Every single article i've read on HTML5 does not mention that at all. Here we go with more research. LoL. I guess I will go through the w3c or whatever its called to get the most "accurate" up to date info.
Can anyone else chime in? Im thinking two aside tags and one middle section tag, for three column layout
To paraphrase Inigo Montoya, I don't think that means what you think it means. The aside element is not about side columns. It is about including some bit that is loosely connected to some main content. For example, a glossary of terms used in the article. It can very well be presented as a sidebar similar to a small supporting or background piece you might see near a newspaper or magazine article. Another example of an aside is its use in plays. Consider two characters talking and one turns to another character or to the audience and says, "talking to this guy is like talking to a box of rocks." He then turns back and continues the main dialog. His commentary is an aside. I have seen on the inter-tubes some tutorials, and I use the term loosely*, describe the actual specs for the element then tell us the W3c doesn't make sense. then they proceed to provide their own definition and teach the wrong way to use the element. For the real skinny on the aside element, see MDN, the aside. See also htmldogs's use of the aside for pull quotes. When all else fails, study the specs for the aside element. In fact, you should carefully study the entire html5 specification. cheers, gary * This starred bit is also an aside.
Thanx for the links. I rechecked all of those links. Specifically defaulting back to the HTML5 spec "The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page." My idea of keeping my three-column layout simple with one Section tag for the main content and then two Aside tags for the Left vertical navigation menu, and then the other for the Right Advertisements and related posts, etc.... Rereading everything(which is still Not 100% straight forward), me using it this way should be fine/correct as well........ And not to say that since I use the Aside for the sidebars that I wont use it for such things like Quotes, etc... Am I correct? And also. What do you use for your three column layouts now? Assuming you're using HTML5 tags. Oh Gosh was xHTML and HTML 4.xx DIV tags for everything SO MUCH SIMPLER. I get their goal for creating more defined and specific tags, but I think the goals should be clearer and better planned. Saying Aside can be this, This, This, and Section can be one of these four things, and Articles CAN be your main tag for your content, and can be nested within eachother and can.... etc..... Still not highly defined in my opinion.
Can anyone else chime in. Im going to start developing soon, and I am trying to figure this out. Would rather move from all Divs
If the div is the right element to use, then use it. The div is an important element. Its function is to aggregate other elements, affording them a context for scripting and styles. A good and common use is to wrap related elements that will be displayed together. The aside element, as I read it, should be used to add some point related loosely to its parent's content. It is not a column. It is not anything visually different from other parental content unless styled so. HTML5 is a candidate for release; it is not yet the Recommendation, though it may have wide support. So don't become infatuated. Use it if you will, but use it correctly. Incorrect use will, for example, screw up the structure, making it difficult for users of assistive technology or those using text based browsers. I don't know how Google is handling html5 or especially, its misuse. Heading levels in sections are not backward compatible and cause issues with text browsers, or possibly AT. Sight impaired users tend not to upgrade their screen readers in a timely manner due to the costs. So move carefully into html5, and use the new elements correctly, if at all. Expect problems. cheers, gary
Yea. I was actually thinking about holding off. Do you use the new html5 tags? Section, article, aside, nav, header, footer, audio, video?
Let me think. No, not yet. I do think some of the v5 changes are helpful, the article and section come to mind, but the gotchas out-weigh the benefits. For example, those elements screw up heading levels. This will eventually be fixed as older UAs die out. Until then, you're screwing with your visitors' experience on the site. Header and footer have semantic value, but again, not backward compatible. Nav, audio and video are redundant. YMMV, consider who you're screwing up (yourself, your client, your visitors), when you use something that's has holes in its support environment. cheers, gary