Styling HTML5

HTML & CSS
1

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:

<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:

<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:

<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

And for fun, you can read their… I think it’s called html5nurses? where people sent them stupid medical questions and they answered.

3

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.

4

Yup - I understand the id/class use - just used id for illustrative purposes.

Thanks for your help - really apreciate it :slight_smile:

5

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.

6

Oh yeah cheers - that was just me being lazy and cutting/pasting :rolleyes:

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

<header>...</header>
<nav>...</nav>
<section>...</section>

Can I, like in my original post (minus my cut/paste mistake), have:

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

You can just target the new elements if you want to style them by their name. E.g.

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:

<header>Header Stuff[COLOR="Red"]</section>[/COLOR]
<nav>Nav stuff[COLOR="Red"]</section>[/COLOR]
<section>Body stuff</section>

These new elements are like any other, so the closing tag should match the opening one:

<header>Header Stuff[COLOR="blue"]</header>[/COLOR]
<nav>Nav stuff[COLOR="blue"]</nav>[/COLOR]
<section>Body stuff</section>
8

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).