SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling HTML5...

    I'm pretty new to HTML5 and have been keeping it at arms length until I had a project of my oen where I could experiment with it. (I'm loving microdata btw)

    I don't want to go too far down the line with my site to find I've got the basics wrong so I want to ask about styling.

    Normally using <div>s I'd add a style the usual way:

    Code:
    <div id="header">Header Stuff</div>
    <div id="navigation">Nav stuff</div>
    <div id="body-section">Body stuff</div>
    But now HTML5 has come along I'm seeing so many tutorials saying I can do away with <div>s and just have:

    Code:
    <header>Header Stuff</section>
    <nav>Nav stuff</section>
    <section>Body stuff</section>
    But my page is going to look pretty flat.

    So can I add styles to these like:

    Code:
    <header id="header">Header Stuff</section>
    <nav id="navigation">Nav stuff</section>
    <section id="body-section">Body stuff</section>
    Or are these new tags for semantic purposes only and just encompass the traditionally styled <div>s?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    You can just target the new elements if you want to style them by their name. E.g.

    Code:
    header {...}
    But you might want a class or id on them if you have more than one, of course.

    Be aware that you are making a mistake here though:

    Code:
    <header>Header Stuff</section>
    <nav>Nav stuff</section>
    <section>Body stuff</section>
    These new elements are like any other, so the closing tag should match the opening one:

    Code:
    <header>Header Stuff</header>
    <nav>Nav stuff</nav>
    <section>Body stuff</section>

  3. #3
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Be aware that you are making a mistake here though:

    Code:
    <header>Header Stuff</section>
    <nav>Nav stuff</section>
    <section>Body stuff</section>
    Oh yeah cheers - that was just me being lazy and cutting/pasting

    If I target elements - how do I do that if I've just got

    Code:
    <header>...</header>
    <nav>...</nav>
    <section>...</section>
    Can I, like in my original post (minus my cut/paste mistake), have:

    Code:
    <header id="header">Header Stuff</header>
    <nav id="navigation">Nav stuff</nav>
    <section id="body-section">Body stuff</section>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bootfit View Post
    Can I, like in my original post (minus my cut/paste mistake), have:

    Code:
    <header id="header">Header Stuff</header>
    <nav id="navigation">Nav stuff</nav>
    <section id="body-section">Body stuff</section>
    Yes you can. But I would only use those ids if absolutely necessary. If you need to target a specific header, nav or section element (as opposed to styling them all) then I'd suggest using a class instead. IDs are a bit of a slegehammer, and I hardly use them now. But if you only have, say, one nav element on the page, it's pointless to give it a class or id too.

  5. #5
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup - I understand the id/class use - just used id for illustrative purposes.

    Thanks for your help - really apreciate it

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Since you're interested in HTML5 for experimental reasons and to learn about it, I want to suggest regularly checking out html5doctor.com.

    It's an excellent resource for learning where to use which elements and (semantically) why. If you go through their older articles you'll see how much HTML5 is changing as they write it (so don't be surprised to see a newer article completely contradict an older one... that's expected).

  7. #7
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Since you're interested in HTML5 for experimental reasons and to learn about it, I want to suggest regularly checking out html5doctor.com.
    I've had HTML5doctor.com in my bookmarks for a while now - been digging through it over the last 48 hours - It's a great resource.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    And for fun, you can read their... I think it's called html5nurses? where people sent them stupid medical questions and they answered.


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
  •