HTML5 Logo
I’m tired of people getting confused. The W3C hasn’t done the best job at explaining what HTML5 is or means to a lot of people either. In fact, they went out of their way to say that, accompanying the HTML5 new branding, CSS3 and the JS API’s ( Geolocation, Websockets etc.), that are floating around with their own specs, are lumped into one and the same. So what is HTML5? And what does it offer me? Well, I’m going to tell you.

First off, HTML5 != (not equal to) CSS3. For the past 2 years CSS3 has picked up the pace and has become more standardized both in it’s spec and within browsers. People were yapping about CSS3 long before this HTML5 talk sprung up. A great example of this would be the fact that over 5 years ago John Resig was working with CSS3 selectors which spurred on the creation of jQuery (you’ve just been learnd!).

Secondly, HTML5 != (not equal to) Javascript API’s. The Javascript API’s that are being thrown around for things like video, audio, aren’t HTML5. HTML is a markup language and with the introduction of HTML5 we have the ability to use semantic tags like video, audio, canvas, header etc. and many of these elements come with specifications about how browsers should render them and what kind of interaction points they have, with Javascript. So again, HTML5 isn’t a slew of Javascript API’s even if those API’s are written to be specifically used with HTML5 tags. I know, this is probably the most confusing aspect. Without much of the Javascript specifications none of these new elements would function. If you’re not planning to modify the default browser functionality of with these elements though, then things should “just work” for you.

So, what is HTML5?

xHTML Logo
HTML5 is HTML. WOW! *Lights go off* I hope everyone right now is saying “ooooh I get it now” because I can’t make it more clear then that. HTML5 is, by all means, the next version of HTML. After a split happened between native HTML and xHTML there had been a definitive divide in the way browsers would render each said type of HTML. This brought along with it a slew of doctypes and unnecessary conventions that were specific to one or the other. Now that xHTML has all but died many of it’s features and it’s ideas have come back into the native HTML strain. What’s this mean? Far more semantic and near XML like tags in HTML5. As well as documentation / standardization for browser vendors to follow, when rendering said tags, and some sweet new attributes to some of our old favorite input elements.

So why is HTML5 important?

Well, if you have just become a web developer in the past 2-3 years you won’t remember the dark times we had before then. Browser vendors made the rules and, to some extent, still do (many of them are involved in creating and documenting the W3C’s specifications HTML5, CSS3 etc.). Long ago every vendor decided, on their own, how to render an HTML page. Making crucial decisions for the user when there was an error or ill-formatted code on the page. Unlike XML, browsers have always rendered HTML in some way even with errors in the code (XML refuses to render if there’s an error). Many have said this is in bad taste but really there wouldn’t have been an issue if there had been a standard way to treat errors and rendering way back when. Well, thank god for smart people! The big guys (Microsoft, Google, Mozilla Corporation etc.) are getting on the same page and making our lives simpler day by day. So be happy you live now and not in the days of uppercase, lowercase, “strict”, “transitional”, DTD’s and all that madness.

So what’s HTML5 look like?

I get asked this a lot and the best way to answer is to point them to Paul Irish’s HTML5 Boilerplate (found here: http://html5boilerplate.com/ ). Problem with this is that Boilerplate only shows off 2 or 3 of the new semantic HTML5 tags (no fun). So I’ve put together a quick example of a HTML5 blog post page template I’m working on (it shows off at least twice as many tags!!!). 

<!doctype html>
<html>
<head>
<title>Default HTML5 Template</title>
</head>
<body>

<!-- container -->
<div id="container"> 

    <!-- header -->
    <header>

        <!-- nav -->
        <nav>
            <ul>
                <li class="active"><a href="#" title="">Link</a></li>
                <li><a href="#" title="">Link</a></li>
                <li><a href="#" title="">Link</a></li>
                <li><a href="#" title="">Link</a></li>
            </ul>
        </nav>
        <!-- /nav -->

    </header>
    <!-- /header -->

    <!-- body -->
    <div id="body">

        <article>

            <!-- article header -->
            <header>
                <time pubdate="2006-02-14">February 14th, 2006</time>
                <h3>My Post</h3>
            </header>
            <!-- /article header -->

            <!-- article content -->
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed.
                Etiam id dui dolor. Suspendisse nec metus est, et iaculis lectus.
                Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed.
                Etiam id dui dolor. Suspendisse nec metus est, et iaculis lectus.
                Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed.
                Etiam id dui dolor. Suspendisse nec metus est, et iaculis lectus.
                Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at.
            </p>
            <!-- /article content -->

            <!-- article footer -->
            <footer>
                <cite>By <a href="#" title="">Lance Pollard</a></cite>
            </footer>
            <!-- /article footer -->    

            <!-- comments -->
            <dialog>

                <!-- comment single -->
                <dt>
                    <cite><a href="#" title="">Nick La</a></cite>
                    <time datetime="2009-08-11T12:35:54">13 minutes ago</time>
                </dt>
                <dd>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed.
                    </p>
                </dd>
                <!-- /comment single -->

                <!-- comment single -->
                <dt>
                    <cite><a href="#" title="">Darcy Clarke</a></cite>
                    <time datetime="2009-08-11T12:35:54">20 minutes ago</time>
                </dt>
                <dd>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Curabitur rhoncus euismod libero, ut euismod tellus aliquam sed.
                        Etiam id dui dolor. Suspendisse nec metus est, et iaculis lectus.
                        Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at.
                    </p>
                </dd>
                <!-- /comment single -->

                <!-- comment single -->
                <dt>
                    <cite><a href="#" title="">Wes Bos</a></cite>
                    <time datetime="2009-08-11T12:35:54">1 hour ago</time>
                </dt>
                <dd>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Aliquam imperdiet pulvinar lectus, non dictum ante faucibus at.
                    </p>
                </dd>
                <!-- /comment single -->

            </dialog>
            <!-- /comments -->

        </article>
        <!-- /article -->

        <!-- sidebar -->
        <aside>

            <!-- sidebar widget -->
            <section>

                <img src="my_ad.jpg" alt="A Sidebar Ad">

            </section>
            <!-- /sidebar widget -->

            <!-- sidebar widget -->
            <section>

                <ul>
                    <li><a href="http://twitter.com/" title="Twitter">Twitter</a></li>
                    <li><a href="http://facebook.com/" title="Facebook">Facebook</a></li>
                    <li><a href="http://github.com/" title="Github">Github</a></li>
                    <li><a href="http://vimeo.com/" title="Vimeo">Vimeo</a></li>
                    <li><a href="http://youtube.com/" title="Youtube">Youtube</a></li>
                </ul>

            </section>
            <!-- /sidebar widget -->

        </aside>
        <!-- /sidebar -->

    </div>
    <!-- /body -->

    <!-- footer -->
    <footer>
        <p>
            -insert name here- &copy; 2011. All content is the property of -insert name here-
        </p>
    </footer>
    <!-- /footer -->    

</div>
<!-- /container -->

</body>
</html>

If you’ve seen HTML before this shouldn’t look too different. Again, this is barebones HTML not including links to CSS or JS files. You’ll notice I’ve tried to be as semantic as possible and use the new HTML5 tags where necessary. Things like <time>, <aside> and <article> should really get you excited to write HTML again without a thousand classes and id’s. I’m definitely an Object Oriented CSS guy myself but being semantic where it counts helps a lot.

Wrapping it up

If you’re still confused then you need to dig deeper or just remember HTML5 === HTML. Make sure to read all the W3C specifications linked in this post as well. I know they’re long but they are very insightful and will make you that much better a person. Since there isn’t a really credible “web developer” degree out there (believe me, there isn’t) at least you can say you’re up-to-date with the standards of the industry you work in.

Note: Send your marketing friends to these W3C specs too. I’m tired of hearing the tools of my trade turned into buzz words. They need to get learnd before they step on our turf. Word?

tags: / / / / /

4 comments

  • André

    Posted: Feb 26, 2011

    Great post!

    A little confusing with the body id and body though.

    Respectfully.

    André aka Webdroid

  • kamal

    Posted: Mar 25, 2011

    i’d like a lot the way u explain the HTML5, i’m now happy to know the new tags…
    Thanks

  • thankyouformakingapoint

    Posted: Oct 3, 2011

    hi
    I am very thankful that at least someone has the backbone to clarify the html5 acronym
    I almost thought i was the only one not really understanding the hype about it. (don’t want to try to put you in my shoes^^;)
    great article
    thank you!
    if a browser can embed video by definition why not other “plugins” like pdf, silverlight, bubu, … if it is doable without other specification then i really hope they will do it, metro winrt hyperventilationscript

  • Jean

    Posted: Nov 18, 2011

    Finally someone brought the peace to the html5 definition storm … (:

"w3fools.com - because friends don't let friends use w3schools" ~ dan heberden
themify
Learning JavaScript