Getting Started With HTML5: Part 1
It’s time to get to work on our HTML5 chops. We’ve had plenty of theory. Now let’s get to it.
Here is the code that we are going to work with. Take a minute to copy and paste it into a text editor and give it an html extension. Once you’ve done that, go ahead and give it a spin… Looks nice doesn’t it. That’s your proof of concept. It works. Now let’s go through it section by section.
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Demo</title>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<style>
header,nav,section,article,aside,footer {display:block;border:1px solid #bbb;padding:1em;}
header,nav,section,article,aside,footer {border:1px solid #bbb;padding:1em;}
header{background-color:#EFFBFF;}
h1,h2,nav li {font-family:helvetica,arial,sans-serif;}
nav{margin:1.5em 0;}
nav li {display: inline;list-style-type: none;padding-right:1em;}
article,aside{float:left;margin-bottom:1.5em;}
article {width:60%;}
aside {width:28%;margin-left:1em;}
footer {clear:both;}
.identifier {background-color:#FFF79F;font-style:italic;}
</style>
</head>
<body>
<header>
<p class="identifier">header</p>
<h1>HTML 5 Demo</h1>
</header>
<nav>
<p class="identifier">nav</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<article>
<p class="identifier">article</p>
<h2>Terminology and Usage</h2>
<section>
<p class="identifier">section</p>
<ul>
<li>The header element represents a group of introductory or navigational aids.</li>
<li>The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.</li>
<li>An article element is "independent" in the sense that its contents could stand alone, for example in syndication.</li>
<li>The section element represents a generic document or application section...[it] is not a generic container element.</li>
<li>The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.</li>
<li>The footer element represents a footer for its nearest ancestor sectioning content. </li>
</ul>
</section>
</article>
<aside>
<p class="identifier">aside</p>
<h2>Attribution</h2>
<section>
<p class="identifier">section</p>
<p>The main article on this page is comprised of excerpts from the HTML 5 draft.</p>
</section>
</aside>
<footer>
<p class="identifier">footer</p>
<p>By Dustin Boston</p>
</footer>
</body>
</html>
DOCTYPE
The doctype is easy now. Just specify the technology that should be used to render the page. For now all you need to use is html. It’s still a pain in the ass to serve a page as xml so forget that.
Script
We don’t need a full script tag anymore either. The default type is Javascript, yay. So what is that big block of Javascript then? It’s for the IE’s go figure. Unfortunately IE won’t recognize those as CSS elements unless we do that. Stupid, I know, but relatively painless.
Style
Did you notice anything different about the style tag? Right. No type. Guess why. Right. The type defaults to CSS. Thank the W3C for making our jobs at least a little more efficient. That first line of CSS is important. You have to set the HTML5 elements to display:block or they will render as inline (at least for now). All that other stuff is just there for your benefit but it isn’t required, so we’ll skip it.
Part 1 Conclusion
The W3C has done a great job of simplifying syntax in HTML5. Apart from the various IE fixes it’s quicker to write than ever before. Now go, go and look at your HTML5 page and be in awe.
Want an avatar? Get a gravatar! • You can link to this comment
Rather than the script block, just include this shim hosted on google code: http://html5shiv.googlecode.com/svn/trunk/html5.js
It adds support for all the new HTML5 elements, not just those few you’ve added.
Also, the css reset found here: http://html5resetcss.googlecode.com/files/html5-reset-1.4.css
works really well.
I’d recommend using both these in your head so that you don’t have to worry about any issues. Obviously the reset will make everything look boring and plain, so remember to specifically style each element on your page.
Want an avatar? Get a gravatar! • You can link to this comment
Rich, awesome recommendations! I will certainly be using the html5.js script rather than the script block.
Want an avatar? Get a gravatar! • You can link to this comment
Is it too geeky of me to have gotten excited over seeing HTML5 in action? I like your “just do it” attitude, Dustin- looking forward to Part 2!
Want an avatar? Get a gravatar! • You can link to this comment
Certainly not too geeky Lorraine, I’m pretty excited too. Is it too geeky of me that I find the article, section, aside, and footer tags sexy in some way… lol
Great article, thanks… I love all the HTML5 goodness I can get
Want an avatar? Get a gravatar! • You can link to this comment
I like how this is becoming simplified. Often we see fluff, such as the body tag. For that matter, a browser will display html without the html tag also.
Nice to see this here.
Want an avatar? Get a gravatar! • You can link to this comment
Great starting point for HTML5, will show some of the guys in the office.