tags:

views:

671

answers:

6

This is a community wiki that asks the question, "Just how semantic can our HTML markup get thanks to HTML 5?" Below You can find the source code of a sample HTML 5 page. The object is to make a very usable, accessible, style-able webpage using as few classes and IDs as possible.

Also, when do you plan to start implementing HTML 5? Are you going to wait 10+ years until the draft is finalized, or are you going to be an "early adopter" now that browser support is rapidly growing?

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8" />  
     <title>Site Name &bull; Page Title</title>
    </head>
    <body>
     <nav>
      <h1><a href="/">Site Name</a></h1>
      <ul>
       <li><a href="#">Nav Link</a></li>
       <li><a href="#">Nav Link</a></li>
       <li><a href="#">Nav Link</a></li>
      </ul>
     </nav>
     <header>
      <p>Welcome to the site!</p>
      <a href="#">Call to action!</a>
     </header>
     <section>
      <aside>
       <!-- Sidebar -->
      </aside>
      <article>
       <header>
        <h2>Article Name</h2>
        <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
       </header>
       <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
       <figure>
        <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
        <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
       </figure>
       <p>Lorem ipsum dolor...</p>
      </article>
     </section>
     <footer>
      <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
     </footer>
    </body>
</html>
+2  A: 

Although I take great happiness in seeing new capabilities, the truth still remains that my clients use IE6 (and similar browsers). As much as I would like to see everybody using a modern browser, the fact that they aren't means I have to work with technologies that don't require them to upgrade.

Jonathan Sampson
Even though your users are on IE6, doesn't mean you can't write the code above. Using the neat javascript-hack, you can supply IE6-users with the same semantic HTML: document.createElement("header");Then you can style your CSS as normal. (:
peirix
A: 

The main driver for people adopting HTML 5 would be better search engine placement, without that, I'm not seeing a huge reason to adopt.

(Maybe if people could somehow convince me that the web might be more data-like and therefore interoperability would improve, then I might be somewhat convinced, but that sounds a bit overly optimistic)

altCognito
+2  A: 

I'm going to use it as soon as browsers support it. The sites I make are mainly hobby projects mostly visited by Firefox users. (80% of my traffic uses the latest version of FF).

nbv4
A: 

I'll echo jonothan sampson. As long as a reasonable number of people are still using older browsers, it's hard to make that jump.

On the other hand, it's probably sensible to detect browsers and send a version that makes good sense. Since the differences between the two languages will be moderate, it will probably be feasable to transform an HTML5 page to HTML4 with additonal class and styles depending on user agent, perhaps with a little server side xslt. That said, I doubt I'd be the one to invent that technology, although I'd use it if or when it becomes available.

TokenMacGuy
As long as the only part of HTML 5 you are adopting is the semantic tags, simple Javascript can bring support to older browsers: document.createtag('header'); document.createtag('footer'); document.createtag('section'); document.createtag('aside'); document.createtag('nav'); document.createtag('article'); document.createtag('figure'); document.createtag('time');
Kerrick
It can bring a lot to browsers that support javascript, yes, but it does nothing for, say, RSS readers or mobile browsers. Again, I hope that someone wiser than me creates a library for transforming information rich HTML5 to whatever is most suited to the actual user agent.
TokenMacGuy
+1  A: 

Keep in mind that the cite element is not appropriate for a person's name: HTML5 states "A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names." Also, the trailing slash in <meta charset="UTF-8" /> isn't necessary.

Ms2ger
The trailing slash is not a bad idea. At a glance, you immediately know not to expect an end tag. Also, all the examples use it, http://www.w3schools.com/html5/tag_meta.asp
bobobobo
If you do any serious HTML writing, I'm pretty sure you'll know that from the fact that it's a meta tag, regardless of any trailing slash, though.
Ms2ger
+4  A: 

It won't be 10+ years. That time period is for "final completion", all browsers support all parts of the spec. It's due to become a candidate late this year, early next, and hopefully approved by 2011/2.

I'm phasing it it in where I can, right now. How much I use depends on audience, but since IE share has been falling constantly, what they don't support is no longer a killer, especially as John Resig's "HTML5 shiv" lets the semantic tags play even in IE6 with js turned on.

More importantly, I'm starting to shift my thinking into HTML5 lines, using classes today for what will become HTML5 tags tomorrow (div class="nav"). That way I'll be more used to thinking in HTML5 terms when the opportunity arises.

Arlen
Well then, those dates make it rather awesome! I think you've got the right idea when it comes to the transition.
Kerrick