www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: <div id="main"> HTML5 convention

  1. #1
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242

    <div id="main"> HTML5 convention

    So in the past I'd use a basic page structure like this:

    HTML Code:
    <body>
      <div id="header">This is the header</div>
      <div id="nav">....</div>
      <div id="main">The is the main content of the page.</div>
      <div id="footer">...</div>
    </body>
    So in moving to HTML5 we all know how to handle the header, nav and footer parts, but what about the "main" part? Would you use

    HTML Code:
    <section id="main">
    or stick with
    HTML Code:
    <div id="main">
    ?

    Is there a convention emerging here?

  2. #2
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    I'm not using the semantic tags yet -- they don't add much value in my opinion. In any case, this examples under the nav element over at the W3C site may answer your question:

    http://www.w3.org/TR/html5/sections....he-nav-element

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by svidgen View Post
    I'm not using the semantic tags yet -- they don't add much value in my opinion. In any case, this examples under the nav element over at the W3C site may answer your question:

    http://www.w3.org/TR/html5/sections....he-nav-element
    Thanks. (For those that didn't follow the link, the W3C example linked to uses a plain old <div> to hold the "main" content).

  4. #4
    Join Date
    Aug 2008
    Posts
    13
    Yeah two good points. 1) I wouldn't switch TOO quick to HTML5 tags unless you're fully prepared for the browser incompatibility and 2) All of the HTML5 apps I have seen use <divs> widely since they are still supported in the specs

  5. #5
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by ScottAN View Post
    Yeah two good points. 1) I wouldn't switch TOO quick to HTML5 tags unless you're fully prepared for the browser incompatibility and 2) All of the HTML5 apps I have seen use <divs> widely since they are still supported in the specs
    I noticed apple.com uses <nav>. So I wonder if Apple doesn't care about the browsers that don't support that element or do they somehow serve those browsers different HTML.

  6. #6
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Using HTML5 tags is fine as long as you include this little script for non-complying (primarily IE ver. < 9) browsers: <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    Just add this code into between the <head></head> tags:
    Code:
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    The <div> vs. <section> argument is all over the Web, but the simple rule of thumb is:
    If the content you are wrapping has a header title, then <section> can be used. For a simple content container, <div> should be used. Notice that I used the word "can" for the section, since you could just as well enclosed the whole thing in a container <div> and then used a <section> or <article> element with a header title inside the enclosing <div>. There are several ways of coding in HTML5, so don't get stuck on details too much.

  7. #7
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by WebWarrior View Post
    Using HTML5 tags is fine as long as you include this little script for non-complying (primarily IE ver. < 9) browsers: <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    I understand the shiv but was wondering what the attitude was about the small % or browsers that don't support it (old IE w/o JS). I looked at apple.com with an HTML5 disabled browser and the site is functional but the nav is devoid of styles, just plain text links on the left side of the page. So Apple's attitude is like "the site will look weird but will be functional without JavaScript".

    Quote Originally Posted by WebWarrior View Post
    The <div> vs. <section> argument is all over the Web, but the simple rule of thumb is:
    If the content you are wrapping has a header title, then <section> can be used. For a simple content container, <div> should be used. Notice that I used the word "can" for the section, since you could just as well enclosed the whole thing in a container <div> and then used a <section> or <article> element with a header title inside the enclosing <div>. There are several ways of coding in HTML5, so don't get stuck on details too much.
    Thanks for that. At this point I'm going with the traditional <div id="main"> convention, since there is just one of those per page and <section> implies it's possibly one of many.

  8. #8
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    I'd encourage you to use class instead of id whenever possible.

  9. #9
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    I might get some heat for this from HTML pedants out there, but I seldom care for the small &#37; of users that don't have JS. Honestly, this is 2012 and everyone wants to enjoy the Web 2.0 features, so it's unlikely that you'll run into too many of users w/out JS.

  10. #10
    Join Date
    Aug 2007
    Posts
    3,767
    Quote Originally Posted by WebWarrior View Post
    I might get some heat for this from HTML pedants out there.
    Accessibility pedants, huge difference.

    Quote Originally Posted by svidgen View Post
    I'd encourage you to use class instead of id whenever possible.
    Why? I tend to give unique elements unique names, and use class as rarely as possible in the hope that I can avoid it.

  11. #11
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by Declan1991 View Post
    Why? I tend to give unique elements unique names, and use class as rarely as possible in the hope that I can avoid it.
    Well, I'm not a purist in the matter -- and I couldn't produce the link to the article off-hand -- but, it's a matter of transfer size, efficiency, and consistency.

    By re-using styles throughout a site, you decrease the size of your stylesheet, introduce consistency, and reduce site-rendering time (mainly b/c your stylesheet is transfered, interpreted, and cached more quickly). Facebook was actually one of the leading examples in the article (which I'm sorry I don't have a link to): by ditching ID's they were able to eliminate a lot of similar rules and shrink their stylesheet(s) by like 90%.

    Not that you'll never have a reason to apply a style to one and only one element, but even in those cases, you could just as easily create a classname and add it to the list of classes on the nod. And then you can re-use the style! You're not writing a line of code that applies ONLY to element X.

    Ideally, you'd create a set of "components" that fit together and pull from a set of standard styles to ensure you don't unnecessarily end up with tens of thousands of lines of CSS.

    You might, for instance, have some coloration styles, positioning styles, spacing styles ... and then you build re-usable components using the appropriate classes and/or tag hierarchies. Much more efficient than writing a style that applies to node X and then another similar rule to also apply to nodes Y and Z.

  12. #12
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Why? I tend to give unique elements unique names, and use class as rarely as possible in the hope that I can avoid it.
    Matter of style really. I personally use class for all styling purposes and use ID only for DOM. One must keep in mind that ID has more "weight" than class when it comes to applying styles. This can prevent from some CSS classes applied on elements inside the container from working properly.

    Ex.
    Code:
    <style type="text/css">
    #main p  { color: black; }
    p.red { color: red; }
    </style>
    
    <div id="main">
    <p>Some text...</p>
    <p class="red">Some text...</p>
    </div>
    The 2nd <p>'s text will not appear in red if id is used, but will in a class case.

  13. #13
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    ... Actually, I don't have time to double-check on it, but I did find this is my bookmarks: http://net.tutsplus.com/articles/lec...f-massive-css/

    That may be where I initially heard the concept(s).

  14. #14
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Quote Originally Posted by svidgen View Post
    ...
    Ideally, you'd create a set of "components" that fit together and pull from a set of standard styles to ensure you don't unnecessarily end up with tens of thousands of lines of CSS.

    You might, for instance, have some coloration styles, positioning styles, spacing styles ... and then you build re-usable components using the appropriate classes and/or tag hierarchies. Much more efficient than writing a style that applies to node X and then another similar rule to also apply to nodes Y and Z.
    Sounds like OOCSS. Is that catching on?

  15. #15
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    Sounds like OOCSS. Is that catching on?
    I like to use it. I recall using it in a case of a layout where a small sidebar appeared on the left on some pages, while a larger sidebar appeared on the right on others. A simpler example is to use it on buttons. Create a generic button style with common properties and then create specialized versions .button.cancel, .button.publish, etc...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles