views:

103

answers:

6

I am a little confused on how the new tags should go.

Is this correct:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>

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

        </section>
        <footer>

        </footer>
    <section>

</body>
</html>

Or should one of the sections be an <article>? What should be the starting layout?

+1  A: 

What you include depends on what content you have. Of course, you won't always need all the semantic block tags. Personally, I'm sticking with my <div> elements for now until I rewrite my website.

Delan Azabani
+2  A: 

IMHO, I do think you should separate the nav from the header, as you can't always assume the nav bar sits on your header(what if your nav bar is on the side?)

other than that i do think its a good skeleton for a layout. (unless you're creating a news or blog site, I don't think you should include the tag in your basic layout

corroded
+1  A: 

I'd take a look at Dive into HTML 5, which has some examples. Here's a HTML4 blog and a HTML5-ified version of the same content.

There's also a chapter about the new semantic markup tags.

Benjamin Oakes
+4  A: 

You shouldn't have a ‘starting’ layout for anything inside <body>.

The <article> and <section> tags are not mandatory overhead that you have to fill in, they're there to separate high-level blocks of markup appropriately for the outlining algorithm, if and when you need to do that. If you only have a single article on your page, which will be a common case, there is no benefit in wrapping the whole thing in an <article>.

Currently the <section> elements in your example are doing nothing. Until you need them, leave them out.

(And arguably leave them out anyway until browser support is better. For IE you will need to use the HTML Shiv to get any of this to work, and there are still problems with it. For more user cases this just isn't worth it yet, for the small quantity of practical benefit it brings. Also, for XML validity, change the HTML in the doctype to lower-case to match the actual root element.)

bobince
A: 

Or check out my writing a valid html5 document.

Ian Devlin
+1  A: 

This is what I usually start with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/css/screen.css" rel="stylesheet" />
  </head>
  <body>

  </body>
</html>

I use the HTML5 doctype and shorter charset for simplicity, and leave body empty as I may not be working on a "full" HTML5 project. That is, the project might require me to avoid using new HTML5 sectioning elements but this sets the project up for an easier transition at a later date and allows me to use a few small perks of HTML5 (like omitting type from my stylesheet link).

If you are still puzzled about sectioning elements, here's a couple of articles about section and article.

akamike