Feature
Post

Category
Code


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.


  1. By Rich posted on August 27, 2009 at 5:20 pm
    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.

  2. By Dustin Boston posted on August 27, 2009 at 7:48 pm
    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.

  3. By Lorraine Nepomuceno posted on August 28, 2009 at 9:00 am
    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!

  4. By Bryant Smith posted on August 28, 2009 at 3:28 pm
    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 :)

  5. By Alaska Web Design posted on September 1, 2009 at 3:12 pm
    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.

  6. By Sam Logan posted on September 2, 2009 at 3:45 pm
    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.

  7. TrackbackGetting Started With HTML5: Part 1 | DevloungeStrange things are afoot + Links of interest « Ramblings of a WebWench