The HTML5 DOCTYPE

**weegillis** · 08-05-2011, 11:58 AM

Originally Posted by kgun

Personally I have not started to use HTML5, so what is the correct DOC type etc? Do I need to go to W3C or Alistapart? Tell me how it is done with HTML5 and XHTML.

Jump into your template folder and swap out the existing DOCTYPE with this one:

HTML Code:

<!DOCTYPE html>

That's it. Your document (assuming it is valid HTML or XHTML) is now valid HTML5. Now you can jump right in.

It might not be valid markup, but newer browsers support the new elements, many regardless of DOCTYPE. The HTML5 doctype just automatically throws the rendering engine into standards mode.

Being a big fan of semantics, this is the perfect specification for you, @kgun. It's all about semantics. Structure no longer needs to be confined to just breaking down the headings. The entire tag library is geared to exposing the document structure right down to the minutest detail.

Take for example <DIV>. We know it's a block level element, and have used it for all these years to wrap everything from soup to nuts. Now it is relegated to the outer wrapper. The new element, <section> is taking over, and making more sense, just being there. Add to this, <article> and things really begin taking on order and meaning.

We used to hang our H's out there, hoping they would act as the glue that holds our articles together. Now we can wrap headings in an <hgroup> element so they stand right out. Add to this the new <header> element, and we will never again have to use, <div id="header">.

HTML Code:

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>This is an HTML5 document</title>
 </head>
 <body>
  <div id="wrapper">
   <header>
    <nav role="navigation">
     <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
     </ul>
    </nav>
    <hgroup>
     <h1>This is an HTML5 Document</h1>
     <h2>Markup that means something</h2>
    </hgroup>
   </header>
   <section role="main">
    <nav role="navigation">
     <ul>
      <li><a href="#cats">Cats</a></li>
      <li><a href="#dogs">Dogs</a></li>
     </ul>
    </nav>
    <section>
     <article id="cats">
      <hgroup>
       <h2>For the love of cats</h2>
       <h3>Curl up with one today!</h3>
      </hgroup>
      <p>Yadda yadda yadda, blah blah blah, nice kitty!</p>
      <p>Care of long hair cats is a year long job that must be done regularly. Fig. 1. illustrates the method used to remove hairballs.</p>
      <figure>
       <img src="hairballs.png" alt="removing hairballs from long hair cat" width="300" height="240">
       <figcaption>Fig. 1. Removing hairballs from a long hair cat</figcaption>
      </figure>
     </article>
     <article id="dogs">
      <hgroup>
       <h2>For the love of dogs</h2>
       <h3>Trade in your PC for one today!</h3>
      </hgroup>
      <p>Yadda yadda yadda, blah blah blah, good dog!</p>
      <aside>
       <p>Take your PC for a walk today. Your dog will love you for it.</p>
      </aside>
     </article>
    </section>
   </section>
   <aside>
    <ul>
     <li><a href="#">Blogroll</a></li>
     <li><a href="#">My Site</a></li>
    </ul>
   </aside>
   <footer>
    <ul>
     <li><a href="#">Privacy</a></li>
     <li><a href="#">Site Map</a></li>
    </ul>
   </footer>
  </div>
 </body>
 </html>

**weegillis** · 08-06-2011, 01:47 PM

On further reading, I stand to be corrected with regard to <DIV> and <SECTION>. The HTML5 Doctor interprets the W3C spec, here: The Section Element.

Originally Posted by HTML5Doctor

Rules of thumb for using section

Of course, there are always exceptions, but these should give useful guidance for 99% of cases:

Don’t use it just as hook for styling or scripting; that’s a div
Don’t use it if article, aside or nav is more appropriate
Don’t use it unless there is naturally a heading at the start of the section
The revised spec (as of 16 September) says:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

In the above example, DIV would be the correct thing to use. See below for the revised usage (as I see it; subject to change).

**weegillis** · 08-06-2011, 01:53 PM

HTML Code:

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>This is an HTML5 document</title>
 </head>
 <body>
  <div id="wrapper">
   <header>
    <nav role="navigation">
     <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
     </ul>
    </nav>
    <hgroup>
     <h1>This is an HTML5 Document</h1>
     <h2>Markup that means something</h2>
    </hgroup>
   </header>
   <div id="main">
    <nav role="navigation">
     <ul>
      <li><a href="#cats">Cats</a></li>
      <li><a href="#dogs">Dogs</a></li>
     </ul>
    </nav>
    <div>
     <article id="cats">
      <hgroup>
       <h2>For the love of cats</h2>
       <h3>Curl up with one today!</h3>
      </hgroup>
      <section>
       <h4>Nice Kitty</h4>
       <p>Yadda yadda yadda, blah blah blah, nice kitty!</p>
      </section>
      <section>
       <h4>Cat Care Tips</h4>
       <p>Care of long hair cats is a year long job that must be done regularly. Fig. 1. illustrates the method used to remove hairballs.</p>
       <figure>
        <img src="hairballs.png" alt="removing hairballs from long hair cat" width="300" height="240">
        <figcaption>Fig. 1. Removing hairballs from a long hair cat</figcaption>
       </figure>
      </section>
     </article>
     <article id="dogs">
      <hgroup>
       <h2>For the love of dogs</h2>
       <h3>Trade in your PC for one today!</h3>
      </hgroup>
      <section>
       <h4>Good Dog</h4>
       <p>Yadda yadda yadda, blah blah blah, good dog!</p>
      </section>
      <aside>
       <p>Take your PC for a walk today. Your dog will love you for it.</p>
      </aside>
     </article>
    </div>
   </div>
   <aside>
    <ul>
     <li><a href="#">Blogroll</a></li>
     <li><a href="#">My Site</a></li>
    </ul>
   </aside>
   <footer>
    <ul>
     <li><a href="#">Privacy</a></li>
     <li><a href="#">Site Map</a></li>
    </ul>
   </footer>
  </div>
 </body>
 </html>

In this example, the styling hooks are the main and content div.

**kgun** · 08-06-2011, 07:56 PM

Great information.

I am not the fastest to refactor http://www.oopschool.com/phpBB3/view...php?f=45&t=225

Content is King and refactoring is Queen.

**weegillis** · 08-06-2011, 09:37 PM

Originally Posted by kgun

Content is King and refactoring is Queen.

Unless you're refactoring.com or useit.com. But your point is made.

There is not a lot to do to refactor an older web to a newer form. The site architecture, even the CSS can stay intact. Start with the DOCTYPE, and go from there.

When all the code is revamped, attack the CSS and next thing you know, it's 2011 instead of 2001. Nothing says a person has to even use the new elements. They are semantic tools, not structural, so they simply overlay the existing structure. Same with the CSS. It simply augments the existing styles. Your regular visitors need not even know the site is going through a metamorphosis, and probably won't if they use older browsers.

Thread: The HTML5 DOCTYPE

Thread Tools

Display

The HTML5 DOCTYPE

Posting Permissions