HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Jul 6th in HTML & CSS by Mads Kjaer

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

Author: Mads Kjaer

Mads is a web designer and standards aficionado. He creates beautiful websites using HTML, CSS, jQuery, PHP and WordPress. Despite his young age, he has been involved in web development since the days of Netscape 4. Follow him on Twitter.

What We Are Going to Build

This is what our page is going to look like when finished:

Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer. Nothing too special. Let's get building.

HTML 5

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let's get started marking up the blog page.

Basic Structure

Before we begin marking up the page we should get the overall structure straight:

In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. First, take a look at the markup and I'll explain afterwards:

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

It still looks like HTML markup, but there are a few things to note:

In HTML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. It simply tells the browser that it's dealing with an HTML-document.
The new tag header is wrapped around introductory elements, such as the page title or a logo. It could also contain a table of contents or a search form. Every header typically contains a heading tag from <h1> to <h6>. In this case the header is used to introduce the whole page, but we'll use it to introduce a section of the page a little later.
The nav-tag is used to contain navigational elements, such as the main navigation on a site or more specialized navigation like next/previous-links.
The section-tag is used to denote a section in the document. It can contain all kinds of markup and multiple sections can be nested inside each other.
aside is used to wrap around content related to the main content of the page that could still stand on it's own and make sense. In this case we're using it for the sidebar.
The footer-tag should contain additional information about the main content, such as info about who wrote it, copyright information, links to related documents and so on.

Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. They will make it a lot easier for search engines and screen readers to figure out what's what in a page.

Marking Up the Navigation

The navigation is marked up exactly like we would do it in HTML 4 or XHTML, using an unordered list. The key is that this list is placed inside the nav-tags.

<nav>
	<ul>
		<li><a href="#">Blog</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Contact</a></li>
		<li class="subscribe"><a href="#">Subscribe via. RSS</a></li>
	</ul>
</nav>

Marking Up the Introduction

We have already defined a new section in the document using the section tag. Now we just need some content.

<section id="intro">
	<header>
		<h2>Do you love flowers as much as we do?</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</section>

We add an id to the section tag so we can identify it later when styling. We use the header tag to wrap around the introductory h2 element. In addition to describing a whole document, the header-tag should also be used to describe individual sections.

Marking Up the Main Content Area

Our main content area consists of three sections: the blog post, the comments and the comment form. Using our knowledge about the new structural tags in HTML 5, it should be easy to mark it up.

Marking up the Blog Post

Go through the markup and I'll explain the new elements afterwards.

<section>
	<article class="blogPost">
		<header>
			<h2>This is the title of a blog post</h2>
			<p>Posted on <time datetime="2009-06-29T23:31:45+01:00">June 29th 2009</time> by <a href="#">Mads Kjaer</a> - <a href="#comments">3 comments</a></p>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
	</article>
</section>

We start a new section and wrap the whole blog post in an article-tag. The article tag is used to denote an independent entry in a blog, discussion, encyclopedia, etc. and is ideal to use here. Since we are viewing the details of a single post we only have one article, but on the front page of the blog we would wrap each post in an article-tag.

The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. This tag is also new to HTML 5 and is used to mark up a specific place in time. The contents of the datetime attribute should be:

Diagram describing use of the datetime HTML attribute

The year followed by a figure dash (a minus sign to you non-typography nerds)
The month followed by a figure dash
The date
A capital T to denote that we are going to specify the local time
The local time in the format hh:mm:ss
The time zone relative to GMT. I'm in Denmark which is 1 hour after GMT, so I write +01. If you were in Colorado you would be 7 hours behind GMT, and you would write -07.

Marking up the Comments

Marking up the comments is pretty straight-forward. No new tags or attributes are used.

<section id="comments">
	<header>
		<h3>Comments</h3>
	</header>
	<article>
		<header>
			<a href="#">George Washington</a> on <time datetime="2009-06-29T23:35:20+01:00">June 29th 2009 at 23:35</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
	<article>
		<header>
			<a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T23:40:09+01:00">June 29th 2009 at 23:40</time>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
	</article>
</section>

Marking up the Comment Form

Several enhancements to forms have been introduced in HTML 5. You longer have to do client-side validation of required fields, emails, etc. The browser takes care of this for you.

<form action="#" method="post">
	<h3>Post a comment</h3>
	<p>
		<label for="name">Name</label>
		<input name="name" id="name" type="text" required />
	</p>
	<p>
		<label for="email">E-mail</label>
		<input name="email" id="email" type="email" required />
	</p>
	<p>
		<label for="website">Website</label>
		<input name="website" id="website" type="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" id="comment" required></textarea>
	</p>
	<p><input type="submit" value="Post comment" /></p>
</form>

There are new two new types of inputs, email and url. Email specifies that the user should enter a valid E-mail, and url that the user should enter a valid website address. If you write required as an attribute, the user cannot submit an empty field. "Required" is a boolean attribute, new to HTML 5. It just means that the attribute is to be declared without a value.

Marking up the Sidebar and Footer

The markup of the sidebar and footer is extremely simple. A few sections with some content inside the appropriate aside- and footer-tags.

You can view the final, unstyled markup here. Now for the styling.

Styling with CSS 3

CSS 3 builds upon the principles about styles, selectors and the cascade that we know so well from earlier versions of CSS. It adds loads of new features, including new selectors, pseudo-classes and properties. Using these new features it becomes a lot easier to set up your layout. Let's dive in.

Basic Setup

To start off with we are going to define some basic rules concerning typography, background color of the page, etc. You'll recognize all of this from CSS 2.1

/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

First we reset margin- and padding-styles with a simple rule. In a production environment I would use a more complete CSS Reset such as Eric Meyer's (for CSS 2.1) but for the scope of the tutorial this will do.

We then tell the browser to render all the new HTML 5 elements as block. The browsers are fine with elements they don't recognize (this is why HTML 5 is somewhat backwards compatible), but they don't know how those elements should be rendered by default. We have to tell them this until the standard is implemented across the board.

Also note how I've chosen to size the fonts in pixels instead of ems or %. This is to maintain the progressive nature of the tutorial. When the major browsers one day are completely finished implementing HTML 5 and CSS 3 we will all have access to page zooming instead of just text resizing. This eliminates the need to define sizes in relative units, as the browser will scale the page anyway.

See what the page looks like with the basic styling applied. Now we can move on to styling the rest of the page. No additional styles are required for the header, so we'll go straight to the navigation.

Styling the Navigation

It is important to note that the width of the body has been defined as 940px and that it has been centered. Our navigation bar needs to span the whole width of the window, so we'll have to apply some additional styles:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("nav_background");
}

We position the nav-element absolutely, align it to the left of the window and make it span the whole width. We'll center the nested list to display it within the boundaries of the layout:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

Now we'll define some additional styles to make the navigation items look prettier and align them to the grid the layout is based on. I've also included a style for highlighting the page the user is on, and some custom styling for the subscription-link.

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("rss.png") left center no-repeat;
		}

Styling the Introduction

The markup for the introduction is pretty simple: A section with a heading and a paragraph of text. However, we'll use some new CSS 3 tricks to make it look more appealing.

#intro {
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	background-size: 100%;
	border-radius: 22px;
}

We are using two new properties. The first one is background-size, which allows you to scale the background-image. In our case, we scale it to 100% on both axes. If the box expands as we add more content to it, the gradient background will scale as well. This is something that was not possible in CSS 2.1 without non-semantic markup and miscellaneous browser issues.

The second new property is border-radius, which applies rounded corners to the element. The radius of our rounded corners are 22px in every corner. You could specify different values for each corner or choose to only round individual corners.

Unfortunately, neither of the properties are fully implemented into the major browsers. However, we can get some support by using vendor-specific attributes. Background-size is supported by newer versions of Safari, Opera and Konqueror. Border-radius is supported by newer versions of Safari and Firefox.

#intro {
	...
	/* Background-size not implemented yet */
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	-khtml-background-size: 100%;

	/* Border-radius not implemented yet */
 	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
}

Since we have a background-color defined, there will be no major problems in browsers that don't support background-size, such as Firefox. Now we just need to style the heading and the text.

#intro h2, #intro p¬†{
	width: 336px;
}

#intro h2 {
	padding: 0 0 22px 0;
	font-weight: normal
	color: #fff;
}

#intro p {
	padding: 0;
	color: #d9f499;
}

The flower image can be added easily by giving #intro a second background image, something that CSS 3 supports.

#intro {
	...
	background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
			url("intro_flower.png") top right (653px 100%) no-repeat;
	...
}

We give the two background images explicit dimensions to ensure that they don't overlap, and we're set. Note the shorthand notation of background-size.

Unfortunately, no browser reliably supports this yet, so we'll have to do it the old-fashioned way: by including an inline image and positioning it using CSS. See the final example to see how it was done.

Styling the Content Area and Sidebar

The content area and sidebar are going to be aligned beside each other. Traditionally you would do this by using floats, but in CSS 3 we are going to use tables!

"What?! Tables?" you might ask and look confused. You probably learned years ago that using tables for web layout is a big no-no, and it still is. You should never use the table-element to mark up a layout. However, in CSS 3 we can make elements behave like tables without it ever showing in the markup! To start off with, we're going to need some divs to group the sections in a little more logical manner.

<div id="content">
	<div id="mainContent">
		<section>
			<!-- Blog post -->
		</section>
		<section id="comments">
			<!-- Comments -->
		</section>
		<form>
			<!-- Comment form -->
		</form>
	</div>
	<aside>
		<!-- Sidebar -->
	</aside>
</div>

Everything still makes sense semantically, but now we can style it. We want the #content div to behave like a table, with #mainContent and aside as table-cells. With CSS 3, this is very easy:

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

That's all! No more floating, faux column background images, clearing or collapsing margins. We've made the elements behave like a table, and this makes it much easier for us to do layout.

Styling the Blog Post

The styling of the post header is rather trivial so I'll skip to the fun part: the multi-column layout.

Multiple columns

Multiple columns of text was previously impossible without manually splitting the text, but with CSS 3 it's a piece of cake, although we have to add a div around the multiple paragraphs for this to work with current browsers.

<div>
	<p>Lorem ipsum dolor sit amet...</p>
	<p>Pellentesque ut sapien arcu...</p>
	<p>Vivamus vitae nulla dolor...</p>
	...
</div>

Now we can add two simple properties and call it a day.

.blogPost div {
	column-count: 2;
	column-gap: 22px;
}

We want 2 columns and a gap of 22px between the columns. The additional div is needed because there is currently no supported way of making an element span more than one column. In the future, however, you'll be able to specify the column-span property, and we could just write:

.blogPost {
	column-count: 2;
	column-gap: 22px;
}

	.blogPost header {
		column-span: all;
	}

Of course the column-count and column-gap properties are only supported by some browsers, Safari and Firefox. We have to use the vendor-specific properties for now.

.blogPost div {
	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}

Box shadow

If you look closely at the image in the blog post you'll see a drop-shadow. We are able to generate this using CSS 3 and the box-shadow property.

.blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
}

Illustration describing how the browsers render the box-shadow CSS property

The first "3px" tells the browser where we want the shadow to stop horizontally. The second "3px" tells it where we want the shadow to stop vertically. The last "7px" is how blurred the border should be. If you set it to 0 it will be completely solid. Last but not least we define the base color of the shadow. This color is of course faded, depending on how much you blur the shadow.

It probably comes as no surprise that this property is not implemented in all browsers yet. In fact, it only works in Safari, and you have to use the vendor-specific property.

.blogPost img {
	margin: 22px 0;
	-webkit-box-shadow: 3px 3px 7px #777;
}

Zebra-striping the Comments

Zebra-striping, or highlighting every second element in a series, has traditionally involved selecting all the elements via javascript, then looping through them and highlighting all the odd elements. CSS 3 introduces the pseudo-class "nth-child", which makes it ridiculously simple to do this without javascript. We'll use it to zebra-stripe the comments.

section#comments article:nth-child(2n+1) {
	padding: 21px;
	background: #E3E3E3;
	border: 1px solid #d7d7d7;

	/* Border-radius not implemented yet */
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}

The weird value "2n+1" is actually pretty simple if you understand what it stands for:

2n selects every second item. If you wrote 3n it would select every third item, 4n every fourth item, and so on.
The +1 tells the browser to start at element 1. If you are familiar with programming you probably know that all arrays start at 0, and this is also true here. This means that element 1 is actually the second element in the series.

Alternatively, you could simply write:

section#comments article:nth-child(odd) { ... }

Since the standard includes the two most used values as shorthand, odd and even. The rest of the comment styling should be simple to understand with your new knowledge.

Styling the Comment Form, Footer and Sidebar

A couple of CSS 3 techniques are reused in the styling of the comment form, footer and sidebar. In the comment form and the footer I've used the same type of table layout technique used in the main layout. In the sidebar border-radius is used to add rounded corners to the different sections.

The Final Design

See the final design with all styling applied.

Compatibility

The page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only rendering engine that supports all of the CSS 3 techniques we have used. Firefox 3 has some problems applying rounded corners to our flower image and it doesn't support background-size, but besides that the layout works. I've chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work. You could also define some more rules and get everything working across major browsers, but all of this is outside the scope of the tutorial.

Conclusion

When HTML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to build websites. We'll finally be able to stop using floats for layout (which they were never meant to be used for), and we will spend considerably less time writing javascript to scale our background images or zebra-stripe our tables. Hopefully we will use all this extra time to study some long-neglected areas of web design, like front end optimization and proper information architecture.

Check out some more great tutorials and articles that you might like

11 Classic CSS Techniques Made Simple with CSS3 HTML & CSS
5 Super Helpful Web Development Video Quick Tips Screencasts
Object-Oriented CSS: What, How, and Why HTML & CSS

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Mohammad Atif July 6th

this one is really useful. Thanks
( Reply )
1. bill July 7th
  
  Not really. I applaud the intent but this is just a case of putting the cart before the horse. As the author points out himself, HTML5 and CSS3 aren’t ready for prime time and the overwhelming majority of browsers don’t support them. While it’s nice to get a look into what’s to come I don’t think that anyone is going to start creating sites that are HTML5 valid just yet.
  ( Reply )
  1. Montana Flynn July 7th
    
    Not very useful, but a great tutorial none the less. I believe it is good practice to use progressive techniques in my projects, it makes it easier to adapt when the time comes and makes your portfolio shine that much more for clients who appreciate web design and semantic markup.
    
    I used a lot of CSS 3 for my blog, which still works in all browsers http://blog.complimedia.com
  2. Brian Temecula July 8th
    
    Also, the fact that there is nothing that can’t be done with our current CSS/XHTML technology just creates more work for us, or something new to learn at best.
  3. Josh Minnich July 9th
    
    I agree that HTML 5 and CSS 3 are going to be great. But if your doing work for anyone but yourself, you might as well ignore all the hype. I’m guessing there won’t be global HTML 5 and CSS 3 support for at least another 5 years. Great article non-the-less.
  4. Jash Sayani July 11th
    
    @bill: I am almost done with my HTML 5 Portfolio and its great!
    
    Though, I agree that most will start using HTML 5 after some time….
  5. iFadey September 6th
    
    We must not remain close minded. We must accept and keep learning new technologies even before its proper release to become a great developer.
2. awake July 15th
  
  You might also find this useful…
  
  http://www.zeldman.com/2009/07/13/html-5-nav-ambiguity-resolved/#comment-44699
  
  it’s a heated discussion on HTML 5
  ( Reply )
Stacey July 6th

Nice tutorial, but it seems as though you aren’t supposed to use header, section or h tags inside a footer tag

http://html5.validator.nu/?doc=http%3A%2F%2Fnettuts.s3.amazonaws.com%2F373_html5%2Ffinal%2Findex.html

http://dev.w3.org/html5/spec/Overview.html#the-footer-element
( Reply )
Developnew July 6th

Is it possible, I don’t think..

Demo is working in FF3, Chroma

But its not working in ie6 and ie7

????? Should we use it.
( Reply )
1. Mads Kjaer July 8th
  
  Read the section about compatibility. This tutorial was designed to demonstrate how one can use HTML 5 and CSS 3 techniques when they are fully implemented. IE6 and IE7 don’t support either. Luckily there is some backwards compatibility, and you could serve them alternate stylesheets and whatnot, but on the bottom line you’d have to write twice the amount of code to get it working in IE.
  ( Reply )
2. Joe July 10th
  
  ITS NOT WORKING IN IE8!
  ( Reply )
  1. noski July 28th
    
    Fuck IE
kiziel July 6th

Nice tutorial, i like the new html structure. But I dont think we’ll soon be using it. Not yet :[ .
( Reply )
1. shoves July 10th
  
  Nice tutorial….. like the fact it works well in FF but unfortunately we have to design for the “other” browsers as well.
  
  Good to get up to speed with this markup in the meantime until it comes into full swing.
  
  Thanx for the tutorial btw!
  ( Reply )
Vincent July 6th

The current mainstream Html 4.01 is drafted in 1999. Html5 is a big improvement, but it is not here quick enough. Not to mention even in Html5 there are still some huge semantic limits of how we freely write documents – a meaningful, content-behavior-presentation separated future of web still has a long way to go.

Sorry, just a regular depressed Tuesday in the office.
( Reply )
Carlos P July 6th

Nice tutorial. Amazing quality as always!
I can’t wait till we can finally use HTML5/CSS3.
( Reply )
Ryan July 6th

Nice write up, very helpful for seeing the future. Do you think it is time to start making websites in the fashion now?
( Reply )
chris July 6th

Was really looking forward to a tut like this
( Reply )
Stefan July 6th

Nice tutorial man, i totally agree with new HTML 5 Structure, but because browsers didn’t implemented HTML 5 then HTML 6 could be blue-printed so maybe, but i say maybe HTML 6 would be better to implement in browsers(i don’t have idea how HTML 6 should look in a way of syntax). Thanks
( Reply )
insic July 6th

How soon is soon? Developers and designers is now coping up HTML5 and CSS3 but most browsers dont support it yet. How about the F! IE? Is there another hack/trick so that i will render html5 and css3?

Nice tut by the way.
( Reply )
1. insic July 6th
  
  typo: Is there another hack/trick so that it will render html5 and css3?
  ( Reply )
  1. Mads Kjaer July 7th
    
    You can use both HTML 5 and CSS 3 right now if you wanted! There are multiple sites already implementing them (see http://html5gallery.com/)
    
    IE will render the new HTML 5 elements covered in this article if you specify display:block; in your stylesheet. Of course there is no direct support for and such tags, but you can serve alternate content to those browsers.
    
    Many CSS-properties degrade gracefully (don’t break browsers that don’t support them). This is for example true for the border-radius property. If the browser doesn’t support border-radius, it will just render the corners as squares. You layout will not break, it will just look slightly worse.
2. Rajan August 27th
  
  This is Very nice article. Its Html5 and css3 samples or very fine. but ie8 not support some selectors like radius.
  ( Reply )
Paul Chater July 6th

All I can say is bloomin’ awseome. This’ll definitely help me out when CSS3 / HTML5 gets implemented PROPERLY across all browsers. Hopefully with no hacking required.

I’ve noticed how IE8 is becoming a much better browser render wise too. Sure it hasn’t got CSS3 yet, but rendering actual layouts requires far less hacking than it did before.
( Reply )
Harro July 6th

My Firefox 3.5 on the mac seems to have some issues with the introduction

The images aren’t aligned properly.

The rest seems fine
( Reply )
1. Andrew July 8th
  
  Nah, it looks more like a color profile thing to me… It’s substantially brighter in Firefox than in Safari.
  
  They may need another tutorial on getting color spaces/profiles playing nice on all of these new browsers that support it now.
  ( Reply )
Boye July 7th

@insic: to answer your question concerning HTML5 rendering in IE: yes there is…take a look at Remy Sharp’s blog for more detailed info: http://remysharp.com/2009/01/07/html5-enabling-script/

Cheers
( Reply )
sam July 7th

A pity we can’t really start using this at least for another 2-3 years
( Reply )
1. Chris Simpson July 7th
  
  yep, at least
  ( Reply )
2. Rob July 7th
  
  Hmm. OK. I’ll stop now then. And take down my two sites that do.
  ( Reply )
3. crysfel July 7th
  
  … or maybe more :S
  ( Reply )
4. Duluoz July 7th
  
  There’s no reason you can’t use them both now with the understanding that new HTML 5 elements and CSS3 properties will not be backwards compatible.
  ( Reply )
5. Lane July 7th
  
  Depends on what you’re building. I have the flexibility to build our internal apps using the latest stuff, because I can force my coworkers to upgrade their browsers (which they usually do, without me asking).
  ( Reply )
Apoorv Vaidya July 7th

Great tutorial, I should start learning this stuff myself. Do you recommend any specific resources, or should I just google it?
( Reply )
hongmop July 7th

Great tutorial,let me try!
( Reply )
CSSfairy July 7th

Really great article! Thanks.
Btw the link to the authors twitter account is broken.
( Reply )
1. Mads Kjaer July 8th
  
  Until it is fixed you can follow me at http://twitter.com/mads
  ( Reply )
Jérôme Coupé July 7th

ahem …

should not be used blindly to mark a sidebar.

http://html5doctor.com/understanding-aside/

Styling zones with display:table; and display:table-cell; is not really the way to go IMHO. This technique is source order dependent and you also loose the ability to position items absolutely within relative blocks.

http://alastairc.ac/2006/06/css-tables-verses-layout-tables/
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/comments/
( Reply )
Stefan July 7th

I wouldn’t be so pessimistic, the web that we know will be history when P2P browsers start working many extensions and engines will come with that, to simplify there will be no firefox , ie, opera etc but only one universal browser without need to make compatibility css files that is the future.
( Reply )
1. Steve July 7th
  
  +1
  ( Reply )
2. Nick July 7th
  
  Agreed, that will be the future, but there that is a long long way off. For now people like the fact that there are different browsers; people with different tastes use different browsers. At least in the non developer community anyway.
  In the developer / designer community i think there is more of an ideal for one browser to cut times that we spend with IE hacks and such, developing for one browser would be the simplest way to ensure a look that isn’t browser dependant
  ( Reply )
3. Duluoz July 7th
  
  Will never happen. Theres no incentive to consolidate when you have such lucrative business models as the various vendors have now.
  ( Reply )
  1. Stefan July 7th
    
    I know it will be hard way to come to this, but eventually after 20 years it could happened.
Niklas July 7th

Interesting article. I really don’t like the article tag, I understand the meaning of it but to me “record” or “entry” or even “post” would be a better name than article.

The first example with an actual article in the tutorial is very nice but when using the article tag in the comments section just confuses me. All the other tags makes so much more sense (header, footer, nav etc). I’m not saying the tutorial confuses me, the article tag is. Maybe just me…
( Reply )
1. Benjamin July 7th
  
  I read it like this, if that helps
  
  “an individual object, member, or portion of a class; an item or particular: an article of food; articles of clothing.”
  
  Courtesy dictionary.com
  ( Reply )
pixelsoul July 7th

I like the structure of HTML5. So simple any moron can write mark up now. I remember when knowing HTML was so something special lol.

I don’t think that we will be able to expect the majority of browsers out there to support HTML5 anytime soon, which makes me sad.
( Reply )
Shane July 7th

Interesting tutorial. I’m looking forward to working with HTML5.
( Reply )
Muhammad Adnan July 7th

when we can use HTML5 in our projects ? when browsers will support ?
( Reply )
1. Mads Kjaer July 7th
  
  Newer browsers, such as Safari 4 and Firefox 3.5, are already supporting HTML 5. You can get older browsers to render the structure tags (header, section, footer and so on) by specifying display:block; in your stylesheet, as covered in the tutorial.
  ( Reply )
Volly July 7th

The “required” in the input-fields confuses me – that’s no valid XML.
Is the fall-back to XML-Syntax required=”required “?
( Reply )
1. mdmadph July 7th
  
  But isn’t that why this is HTML and not XHTML?
  ( Reply )
Ricantails July 7th

Great Tutorial! i’m looking forward to see more HTML5 tutorial, expecially something with the “eventsource” tag, witch seems to be really interesting in future development
( Reply )
guru July 7th

you css tags not working html . what can i do
( Reply )
Falco July 7th

HTML 5 Won’t Be Ready Until 2022. Yes, 2022…

http://www.webmonkey.com/blog/HTML_5_Won_t_Be_Ready_Until_2022DOT_Yes__2022DOT
( Reply )
1. John Faulds July 7th
  
  That’s a spurious argument. CSS2.1 is still only a candidate recommendation with the W3C but is mostly supported by all the major browsers.
  
  HTML5 might not reach final recommendation until 2022 but browsers are implementing parts of the spec already and as Mads Kjaer pointed out, there’s lots of examples of sites already using HTML5 in the HTML5 Gallery.
  ( Reply )
Benjamin July 7th

This strikes me as a little daft – don’t get me wrong, the article is great and I’m looking forward to designing in HTML 5 & CSS 3, but it’s just going to be another headache

Think about it, we’re still having to design for IE6, how the hell long is it going to be before /everyone/ is able to render these new technologies and ‘backward-compatiblity’ can the die the swift death it deserves?

Until that day developers have to account for an ever increasing number of ‘half-way’ browsers with various levels of support for these fancy features; if these are suppose to be time saving (dynamic rounded corners, for example) they’re not doign a great job
( Reply )
Mike July 7th

Looks like you haven’t quite got the hang of it yet. 9 errors on the page, surely validation is still important.
( Reply )
1. mark rushworth July 7th
  
  hahahaha
  ( Reply )
2. Mads Kjaer July 8th
  
  Since the specification is not finalized I didn’t think it would make sense to validate just yet, but here is a short explanation of the errors the validator outputs:
  
  1. No character encoding. This was left out to keep the HTML document very basic, but it can be fixed by simply inserting a META-tag describing the character encoding, like you would in previous versions of HTML.
  
  2. It seems there cannot be sections within a footer-tag. From the spec (editor’s draft):
  
  “The footer element is inappropriate for containing entire sections. For appendices, indexes, long colophons, verbose license agreements, and other such content which needs sectioning with headings and so forth, regular section elements should be used, not a footer.”
  
  I’m pretty sure I read somewhere that section-tags could be nested within most block-level elements, but the spec makes sense.
  ( Reply )
Amir July 7th

Nice tutorial, but you shouldn’t use aside as a sidebar element as we know it today.

should only be used to visually separate text from the main content.
( Reply )
1. mark rushworth July 7th
  
  html used to ‘visually separate’ eh? what about the semantic web?
  ( Reply )
2. John Faulds July 7th
  
  That’s right and you can read up more on that issue at http://html5doctor.com/
  ( Reply )
  1. data October 18th
    
    You guys are mistaken, as the W3C _explicitly_ states that aside can be used for sidebars:
    http://dev.w3.org/html5/spec/Overview.html#the-aside-element
    
    But seeing that there is still a last RFC out for this tag there might be some semantic changes to come.
3. Ben July 7th
  
  Is there a better solution then for marking up a sidebar? Using another section tag just seems so boring! It just seems to me that something as common as a sidebar should have it’s own markup the same way that header, footer, and nav do.
  
  Great article Mads! Definitely gonna play around with this now
  ( Reply )
  1. John Faulds July 8th
    
    Doesn’t look like it. I’m feeling a bit the same way too.
  2. Rob July 9th
    
    My understanding of “Aside” is its more for related content to the article. In typical website layouts, you have a content area and a sidebar with generally unrelated items, ads, login/admin, blogrolls, etc.
    
    Aside is for content related to the article, such as a photo, related links, associated audio, maps etc. I see Aside as an floated element within the article tags:
    
    So my markup would be:
    
    headline
    
    related content
    
    body
    
    comment code, extras like “Tweet this”
    
    ads, blah
    
    footer stuff
    
    As for its usability today, there is some javascript and CSS defaults to make the elements stylable in older browsers. I’m building my own WP theme that will be HTML5/CSS3 and we will see how it goes.
Snorri-Css July 7th

O WOW! how nice it would be to use HTML5 / CSS3 in our work
people are asking how long until we can start using it.
not for a LONG TIME! i say
as long as we have IE6 that will never DIE and after he is dead we have IE7 and 8 that not support this but we can probably make it work with some tweaks and workarounds but full support and no HACKS! in all browsers i am not seeing that happen any time soon.
are you ?
( Reply )
John July 7th

How soon? Anything between 4 to 12 years and while you must be thinking “wow thats a long time but i’m sure theres a reason for that” i’ll bet you anything that in 12 years after all this work we’ll still be banging our heads trying to make stuff cross-browser compatible and fixing IE bugs
( Reply )
Stefnao July 7th

This doesn’t want to be a criticism, but if you try to validate the demo at http://validator.w3.org/#validate_by_uri+with_options
it gives back 9 errors, is the page wrong or it’s the validator that is still in experimental?

Great tut anyway, i found it very interesting to start working with html5
( Reply )
Stefano July 7th

Oh i didn’t see someone already reported this
( Reply )
mark rushworth July 7th

lol great doesnt work in opera 10 – guess i wont be using this so soon in reality
( Reply )
Hung Bui July 7th

oh dear.. I need them now.. cannot wait for 4560 days (@http://ishtml5readyyet.com)

Nicely written article. Cheers,

Bui
( Reply )
Ahmad Alfy July 7th

That new syntax scares me…
I don’t think I’ll be using HTML5!

XHTML2.0 FTW!
( Reply )
1. Dan Harper July 7th
  
  Actually, the W3C will be ending development of XHTML 2 by the end of 2009, and moving all resources to HTML5.
  
  While I preferred certain aspects of XHTML 2, it’s better to have one standard than two!
  ( Reply )
  1. Ahmad Alfy July 7th
    
    I feel like XHTML is more consistent!
    
    what’s the chances XHTML5 will be parsed like an xml docs?
  2. Mads Kjaer July 7th
    
    @Ahmad Alfy
    
    If you need to parse your documents as XML, you can still specify the proper “application/xhtml+xml” MIME-type in your HTML 5 document. This turns it into XHTML 5 (yes, the terms are getting confusing).
  3. Duluoz July 7th
    
    @Mads Kjaer
    
    You’re correct. You can still write using XHTML syntax. Though to save bytes, improve maintainability, and simplify things even more – write in HTML syntax, omit optional closing tags and optional attributes, and let’s put more focus on creating happier end-users at all accessibility levels. The only caveat should always be cost(time) vs. maintainability.
2. A. Scott July 7th
  
  @Ahmad Aify – Read Henri Sivonen’s Unofficial Q&A about HTML5 and the XHTML2.0 cancellation. It comes across slightly bitter, but helped clear up my understanding of HTML5.
  ( Reply )
David Parsons July 7th

Interesting article, thanks.

Although should you really be going back to using tables for the content? Seems like a step backwards, or is it just me?

“That’s all! No more floating, faux column background images, clearing or collapsing margins. We’ve made the elements behave like a table, and this makes it much easier for us to do layout.”
( Reply )
1. David Parsons July 7th
  
  …and I know it’s the styling and not the markup, but it still seems a little awkward. Okay, probably just me *lol
  ( Reply )
  1. Shaun July 13th
    
    Nope, not just you. A lot of us in the development community have called shenanigans. Not like it matters, this won’t be mainstream for another +15 years anyway, lol
Sankar July 7th

The way you explained it is awesome. Great explanation. Starting building a page with your instructions.

Thanks
Sankar
( Reply )
Aayush July 7th

I hope all the developments work faster for CSS3 & HTML5….wish I could use all this already….but it’s still a couple of years to that….
( Reply )
goldfries July 7th

oh interesting. looks like it’s time to pick up more things!
( Reply )
Amal July 7th

nice post. we are waiting for this. it will be more easier for us to dealing rounded corner and shadow.
( Reply )
Tony July 7th

Can’t wait for these babies =) great article
( Reply )
jose pacheco July 7th

Nice article…. we can see how to use some new markups. Keep us posted!!!
( Reply )
Jaspal Singh July 7th

wonderful article on css3, thanks for sharing.
( Reply )
Sean Delaney July 7th

Very very helpful indeed. I found this to be a great a read.
( Reply )
Don July 7th

I have a question. I thought the tag was intended for the top, in most cases header area of the site, like the tag is for the bottom and not to wrap around ALL already known H1,H2, H3, etc tags. Is this not correct? The H1, H2 etc tags are already known header tags.
( Reply )
1. Don July 7th
  
  OK. Wordpress replaced the tags in my comment as I knew it would, sorry.
  
  I have a question. I thought the HEADER tag was intended for the top, in most cases header area of the site, like the FOOTER tag is for the bottom and not to wrap around ALL already known H1,H2, H3, etc tags. Is this not correct? The H1, H2 etc tags are already known header tags.
  ( Reply )
  1. Mads Kjaer July 7th
    
    The header-tag is intended for the top of the page, and to describe individual sections.
    
    In the tutorial I have wrapped a header-tag around a single h2 or h3 tag multiple times. It is not really needed. As you say, the h1-h6 tags are semantic by themselves, and they don’t need an entire header around them. However, I added them for clarity. It is still proper markup.
  2. badcat July 7th
    
    Running this through http://validator.w3.org actually comes back with a few errors and warnings re: putting Sections (IDs) and H3 type content in the footer div/tag.
    
    w3.org also seems to want character encoding type added to pass the HTML5 experimental doctype. Otherwise it’s assumed utf-8.
    
    I’ve also seen variants of the nav lists using rather than , fwiw.
    
    thanks for the tut!
  3. badcat July 7th
    
    Meh. my code vanished… It was supposed to read:
    
    I’ve also seen variants of the nav lists using NL (navlists) rather than UL (unordered lists), fwiw. Referring to the nav tag lists.
Dylan Parry July 7th

There’s a fair bit of pessimism in the comments I’ve read so far. From what I’ve seen, a lot of HTML5 can already be used, although for IE you need to use a little bit of Javascript to get it working—perhaps there’s a HTC solution out there? If you can live with that, then HTML5 is pretty much usable now.

As it is, you won’t be able to use the API stuff such as required fields on forms, but that’s not a problem either. Use Javascript to add that functionality to browsers that don’t currently support it, and validate your inputs on the back-end as you should already do so now.

The solutions to the problem of IE remind me somewhat of Dean Edwards novel “IE7” solution—implement everything that IE doesn’t support by using Javascript instead. I know I’ll certainly be having a go at getting the most out of HTML5 as it currently stands.
( Reply )
Jônatan Fróes July 7th

Will ‘divs’ die?
( Reply )
1. Mads Kjaer July 7th
  
  Most of them, yes. They are not deprecated in HTML 5, and they still have their uses. Use them to describe a division in the page where there is no explicit section, like they were used in the tutorial to layout the main content area.
  ( Reply )
haRacz July 7th

Aside is related to content so it should look like

some text
and there is aside from section text

And not like in this example.

>> what’s the chances XHTML5 will be parsed like an xml docs?
http://www.w3.org/QA/2008/01/html5-is-html-and-xml
( Reply )
haRacz July 7th

lol my code has disappeared

section open
some text
aside open (and there is aside from section text) aside close
section close
( Reply )
wayno007 July 7th

Thanks for the look into the future. I’ve bookmarked this and set a reminder to check back in 10 years.
( Reply )
1. Jason Kempshall July 7th
  
  HAHA
  ( Reply )
  1. Anthony James Bruno July 7th
    
    The man speaks the truth.
2. Meshach July 8th
  
  @Anthony:
  
  Agreed.
  ( Reply )
Benjamin Reid July 7th

Looking at the new markup and different solutions to current problems, I can not wait for HTML5 & CSS3, it really couldn’t come any sooner.

I’ll be bookmarking this for when it gets implemented across the board.
( Reply )
SadHTMLDeveloper July 7th

Navigation markup in HTML5 is fail. Why the hell we can’t use href attribute on every element? Why not `li` with `href`? why not `h1` with `href`?

neverending story. sad story just because XHTML2 is to complicated?
( Reply )
Lee Theobald July 7th

Great article – extremely helpful. Time to be super picky though and please feel free to slate me for pointing this out because it is *really* picky.

The timezones defined in the time tag aren’t offset from GMT (as state in the explanation image), they are offset from UTC (Coordinated Universal Time). It just happens that GMT & UTC are effectively the same. Just wanted to point it out incase someone bases their times off British time and ends up choosing a time in BST (British Summertime – what we switch to from GMT in the summer).
( Reply )
Martyn Web July 7th

There has been so much talk regarding HTML 5 / CSS3 it is nice to see it finally be put into practice.

Shame its going to take awhile before it really takes effect but some elements I can start to use.
( Reply )
Kanzeon July 7th

Sorry but on firefox 3.5 the shadow don’t work. how is it possible?
( Reply )
Myfacefriends July 7th

another wonderful and great tuts! thanks guys!
( Reply )
Jason Kempshall July 7th

“I’ve chosen to ignore Internet Explorer as it requires a bit of hacking to get HTML 5 to work.”

Why doesn’t this surprise me……*Roll’s Eyes*
( Reply )
DemoGeek July 7th

Why does it take till 2022 to get this on to the major browsers? I just can’t understand if they can roll out huge alterations to operating systems in short span of time why does adhering to a standard takes years and years to get it out of the door? Would really love to have these available to the developers as sure it (and other features as well) will make dev life easier.
( Reply )
1. mdmadph July 7th
  
  Because every company wants to have their own unique standard and thus have control over their market. It’s very hard to get profit-driven companies interested in working together.
  ( Reply )
Al July 7th

works in FF3, not IE7, on my machine

Al

p.s. perhaps a warning should be posted about which browsers this will work on, I expected to see something like this in the article.
( Reply )
1. JamieS July 7th
  
  The article does point out what browsers support html 5. Pretty much at the end of the article you’ll find compatibility along with many references to the work arounds you’ll need for the css3 in the styling section.
  
  This is a very interesting article and I look forward to the day where we can get some way toward a basic implementation of what seems to be a very logical mark up language. Still, only one browser with 0% support, not too bad considering…. then again that browser has the largest user base of them all. Ah well, wishful thinking.
  
  Kudos on a great article Mads. I look forward to reading more from you.
  
  Jamie
  ( Reply )
Stephane July 7th

Nice tutorials, been playing with HTML5 for a couple of month and many more with CSS3 and I still learn a few tricks.

I would change one thing, ASIDE should not be used as a sidebar mecanism, as stated in the w3 spec “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. Such sections are often represented as sidebars in printed typography.”.

In the example, the ASIDE would be related to the page article and it’s clearly not the case as it’s relate to the whole website.

The problem is the use of the term sidebar which in print form as nothing to do with what we do in webdesign. The sidebar of print is mostly information directly related to the article, like: facts, citation, pull quote, etc. As such, information regarding the whole website is way off the scope of ASIDE.

Keep in mind that the new tags are there to help with machine specific semantic and not for us human, putting ASIDE in a website like the example would really mess-up a screen reader.
( Reply )
Daniel July 7th

Excellent tutorial, thank you!
( Reply )
tpayne July 7th

Great tutorial. Unfortunately, it doesn’t work in IE6, 7 or 8 without some sort of hack. And since our client sites need to work in as many browsers as possible, we won’t be implementing this any time soon.

So sad…
( Reply )
Steve Lambert July 7th

Is thinking it will take a long time for this to implement, considering the amount of time current standards have taken !

Could very well be e never ending cycle of never having a set standard and always being between them!
( Reply )
WPGPL Team July 7th

Let’s get started
( Reply )
Helen July 7th

Very nice. Didn’t know that the new tags can be used like divs, because many pages using html5 put additional divs inseide the the new tags. Making IE 8 understand them could be done in the next update 8.1. What is so difficult with it?
( Reply )
Nirma July 7th

it’s = it is
( Reply )
Craigsnedeker July 7th

Yes! Been looking for something like this for a while.

I CANT WAIT FOR ALL BROWSERS TO SUPPORT THIS!!!!!
( Reply )
bullardino July 7th

Nice article and lovely result
( Reply )
Ben Carroll July 7th

This was a pointless article. HTML5 isn’t going to be finalized until 2022! And with both formats with very little browser support I don’t see the need in learning it just yet.
I just we had a better organization for the standards of the web, one that forced browsers to adopt new formats and didn’t take 30 years to develop a new standard…
( Reply )
Brett July 7th

Great Tut, nice to see some live examples of HTML 5 in combination with CSS3!
( Reply )
r_jake July 7th

I can’t wait to get using this on a regular basis – it looks so much quicker and from a ‘presentation’ standpoint less hopping backwards and forwards between image and text editors.

The general consensus seems to be that this will be the norm within two years, But I’m wondering… If Webkit and Gecko browsers are pretty much there already in terms of support, but IE isn’t and may not be for a very long time – are we going to see a ‘browser divide’ much like that of the Navigator/IE split of the late 90’s early 00’s?

A return to ‘this site is best viewed with…’? Please, no!

I haven’t looked properly at the hacks to get this to work in IE, but I can’t believe a dropping a bit of JS in will make it all magically work.
( Reply )
Mark Cavins July 7th

Nice Tutorial but let’s get real. HTML 5 and CSS3 have been talked about since 1998 and it hasn’t been moved up from the “Talking about” phase since then. While I personally would love to see the W3C get oof their collective butts and get ball rolling let’s be honest…… It ain’t gonna happen any time soon.
( Reply )
Jesse July 7th

Thanks for this. I dunno, I might start redesigning my own little website or a small client site in HTML5 just for the fun of it. I say go for it, and don’t wait for the browsers to catch up. Excellent overview!
( Reply )
Joseph Taylor July 7th

Great information! I haven’t had time to go through HTML5 and CSS3 too much yet, so this is a great post to bookmark until browsers upgrade a little across the board!

The new CSS3 tricks are awesome! Hopefully they find they’re way into all browsers soon.

I won’t hold my breath since they haven’t even fully implemented CSS 2.1 yet, but it is a better universal environment for implementation now compared to a few years ago!
( Reply )
Nikhil July 7th

The BEST TUTORIAL EVER…..

Really Really great, fantastic, awesome…..

Thanks for sharing.
( Reply )
Adam Webster July 7th

Really nice post. Now only if we could get all of the browsers working in a standard way with CSS3
( Reply )
Meshach July 7th

I don’t like HTML 5, I like XHTML 2.0 though, it makes more sense.
( Reply )
1. John Dyer July 7th
  
  XHTML 2.0 got canceled in favor of HTML 5
  ( Reply )
  1. Meshach July 8th
    
    That makes me mad!
jhoysi July 7th

Great article, and a very interesting read. I’m excited to see the web transition toward semantic markup. Not only will it require better planning to implement the website, it will only enhance the accessibility when done correctly.

V. exciting stuff!
( Reply )
Kyle July 7th

Good write-up, though I must be “that guy” and also point out that your markup doesn’t validate according to HTML5 — apparently, you aren’t allowed to put header / section / h3 inside a footer tag:

W3C HTML5 Validator results

@Meshach — What is it about XHTML 2.0 that makes more sense to you?
( Reply )
1. Shaun July 13th
  
  Thanks for pointing this out! Hopefully the article is corrected.
  ( Reply )
nietzsche July 7th

The only worthwhile additions to the markup world–when considering HTML5 and CSS3–is CSS3. I read praise and excitement for HTML5, yet the only difference from its predecessor is that it’s going to be more semantic because of the new tags. It’s overblown. I rarely discover Web pages that are semantically correct and coherent. Discussing the poor display of W3C validation standards in pages available on the net is, moreover, a lesson in futility. In spite of all the pining over HTML5, I only see more available means of writing poor code. The truth is, not even a quarter of you will write semantic code, and less than a quarter of that bunch will write valid code.

CSS3, on the other hand, has introduced some very cool properties, which I have enjoyed hacking with. Modifying a border’s radius will, for one example, save developers from creating rounded border images, and on the server end save multiple requests made for the server. CSS3 is markup to be excited about.
( Reply )
Jeroen July 7th

I really love the new CCS3 features, but I can’t deliver anything to my clients that won’t work on IE6 / IE7. When I integrate rounded borders for newer browsers only, my client complaints that he wants them on the most common browser also.
( Reply )
1. Ed July 28th
  
  http://www.dillerdesign.com/experiment/DD_roundies/
  ( Reply )
Binny V A July 7th

This is much better than what we are doing now. Cant’ wait for HTML5/CSS3 to be implemented on all browsers.
( Reply )
John Dyer July 7th

You can make it work (mostly) in IE by using this super-simple script:
http://remysharp.com/2009/01/07/html5-enabling-script/
( Reply )
Webhostright July 7th

Thanks, i got excited then experienced a bit of an anticlimax when nearing the end of the tutorial and reading all of the comments.

Nice to read that some will experiment with it though.
( Reply )
Enrique Ramírez July 7th

Wouldn’t it be way better to use blockquote and cite tags for the comments? I know this is an example made for clarity, but we should start reinforcing proper and semantic use of the tags we have available and, since this is one of the very first examples of HTML5 it should have the best use of the markup available.

Also, and I’m not trying to be rude, please don’t think so, but you should check/validate your markup before final submission. You cannot use header tags (be it the HEADER tag or any H# tag) inside the footer tag. It kinda makes sense, but brings up the question of what is the best tag for “headings” inside the footer (perhaps a strong? I don’t know).

As for the pessimistic comments, HTML5 and CSS3 are here. The terms “Graceful Degradation” and “Progressive Enhancement” are here to stay. Start using HTML5 now. There’s no shame on that. But choose were to use it wisely. Not all projects, websites or apps are ready for it.

Finally, what about a Microformats + HTML5 post next time? It’s been driving me nuts for the past week. How would one apply it? Will it work? Would it add semantic value? There are a couple of examples on the microformats.org blog, but it’d be nice to have a real life example.
( Reply )
Adam Hermsdorfer July 7th

Unbelievable tutorial. Are you serious about 2022? There’s no way…

Excited to use this clean markup in the future.
( Reply )
MATT. July 7th

cool, probably won’t use it untill 2 or 3 years, but it’s nice to hear about it a bit in-depth
( Reply )
Michael Rice July 7th

I <3 border-radius.
( Reply )
1. Kent July 7th
  
  I loved border-radius already though I’ve only used it for plain divs with color backgrounds. It’s incredible that it can be used for background images too!
  ( Reply )
2. Shaun July 13th
  
  Then you may want to look into jQuery if you want to use it before 2022
  ( Reply )
Carlo Laitano July 7th

I’m wondering what made the author choose HTML 5 over XHTML 2. Personally I prefer XHTML 2’s specs but hearing from other people on the spot would be nice
( Reply )
Lars July 7th

Nice tut. It is clear that the author put in some real effort to give us all this into to the new stuff hitting the web arena some time in the future.

FYI: I found that the twitter link in the author box is broken.
( Reply )
Mirek July 7th

“We’ll finally be able to stop using floats for layout (which they were never meant to be used for)”

Could you please elaborate?

1. ‘display: table’ is part of CSS2 spec (http://www.w3.org/TR/CSS2/visuren.html#display-prop), there is nothing new with this.

2. If you want a table, use a table. Yes, there is a significant difference between table tag and display: table, but still, it’s using tables for layout and that’s not right way IMO.
( Reply )
1. Mads Kjaer July 7th
  
  Floats were meant for floating inline elements such as images and blockquotes, so text could flow around them more naturally. The property was used for layout, because it made a lot more sense than positioning everything by hand.
  
  1. I actually thought that the table-value was new to CSS 3. I will have to do some more research but there must be a reason to why the “display: table”-technique has only come up in the last 6 months or so.
  
  2. I don’t see your point. Using tables for layout is wrong because the tables have to be implemented directly in the HTML code, essentially throwing semantics out the window. Tables are meant for marking up tabular data, not for layout. CSS, however, purely describes styling, and not semantics. It is therefore perfectly okay to make the semantic elements behave like a table using CSS. I know there are some issues concerning the order of the markup, but the HTML document still retains its semantics.
  ( Reply )
  1. Mirek July 7th
    
    1. Probably because of the lack of support in IE (http://www.quirksmode.org/css/display.html)
    
    2. My point is that if you consider CSS to be purely the tool to make something fit somewhere, there is no difference between float and display: table. If float is meant to be used on images and blockquotes, then I suppose display: table is meant to be to used as default behaviour of table element. Display: table is definitely better than table tags, I just don’t like to use display: table because a) as you wrote, I’m somehow limited in the order of the markup, and b) it doesn’t seem right to me, that this way, I’m affecting more elements rather than one. I probably can’t express myself clear, sorry for that. I mean, I can remove float property from CSS for one particular element, but if I want to remove display: table-cell, I will probably have to edit other affected elements too (display: table-row for parent etc.). I just don’t see behefits. I know, same-height columns, but I can usually find a different way.
2. Jérôme Coupé July 8th
  
  As said in comment above. I don’t think styling zones with display:table; and display:table-cell; is the way to go.
  
  Here are the reasons why:
  
  1. This technique is source order dependent (try to put your sidebar before your content in your code, which is a sensible approach in some contexts > secondary nav)
  
  2. you also loose the ability to position items absolutely within relative blocks.
  
  Sources and discussions on the topic:
  
  http://alastairc.ac/2006/06/css-tables-verses-layout-tables/
  http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/comments/
  ( Reply )
Eric July 7th

No offense to smashingmagazine, they’re great – but this is way better than their most recent tutorial on this. Thanks for this!
( Reply )
Chris Phillips July 7th

FYI, The final product linked too looks pretty good on my Palm Pre (which I’m on now). Your site looks all squished to the left though… Good stuff though. Looking forward to playing with it soon
( Reply )
Daniel Wang July 7th

Browsers just support CSS3 would be awesome! HTML5 is not in a hurry.
( Reply )
SEO Kid July 7th

Wow – HTML5 looks very nice and clean. I like nice and clean. Designers will have a much easier time designing. Most I know are still using table design.

Struggling with DIVs and CSS for layout can be a real challenge. Multiple browser implementations make it worse.

I guess we’ll all still be employed for awhile lomger.
( Reply )
alessandro July 7th

I think the double column tecnique inside the post content is quite stylish but it doesn’t seem very useful… cause i need to scroll twice the page… Don’t you?

Amazing tut!
( Reply )
Devon Young July 7th

Maybe this was already asked in the comments, I didn’t have time to look through them all…. but shouldn’t the sidebar in this case be a nav element instead of an aside? After all, it’s navigation in that sidebar.
( Reply )
Banhawi July 7th

Awesome features , but i think we can’t use anytime soon .
People still using ie6 …. WTF
( Reply )
wavded July 7th

Firefox 3.5 also supports box-shadow.
http://hacks.mozilla.org/2009/06/moz-box-shadow/
( Reply )
grimdeath July 7th

great read, I have started hearing more and more about html5 and css3 and it is nice to see what the buzz is about. the site demo looks beautiful in Chrome, Safari 4, and Firefox (probably Opera too?). For a good laugh I check it out in IE8…*sigh* lol
( Reply )
Willy July 7th

Does anyone have an HTML 5 and CSS 3 syntax highlighter for notepad++? It’d be so nice.
( Reply )
Montana Flynn July 7th

If the search engines start rewarding content provided in semantic form, the browsers will adapt to HTML 5 and (hopefully) CSS 3. Google has been advocating for HTML 5 for quite some time.

For the time being, you can use two tools to create cross-browser progressive HTML 5 / CSS 3 that will even work in IE6 if they have JS enabled.

http://www.modernizr.com/

“Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.”

HTML5 enabling script
http://remysharp.com/2009/01/07/html5-enabling-script/

“The html5.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them – so it can’t sit in the footer of the page, i.e. below the elements in question).”
( Reply )
Daquan Wright July 7th

Planning is all about the future, it doesn’t have to be out right now because it’s a very insightful tutorial.

I appreciate this, just to see how powerful CSS will become in the future (cries).
( Reply )
Synergy Informatics July 7th

hi,

really a great tutorial..

I’m wondering, if we can use for creating new sites, and whether IE & firefox supports it?

Thanks

Krunal
Synergy Informatics
( Reply )
hot.toto July 7th

Thanks
( Reply )
Marcus July 8th

No container divs?
( Reply )
piervix July 8th

There is confusion in using. HELP ME!

http://html5doctor.com/understanding-aside/
( Reply )
Parag July 8th

tables are best, you can not beat tables
( Reply )
Aslam A Memon July 8th

really help ful n really well written
( Reply )
Abdurrahman Gemei July 8th

That’s great! Can’t wait to use HTML5!
( Reply )
Andy July 8th

It’s interesting to see the ignorance of so many developers regarding this.

No, I’m not going to point out all the mistakes in the comments.

I’m not going to do your job, people. Which is to keep informed about these developments.

I’ll just say this: subscribe to ajaxian.com and read the HTML 5 spec.
( Reply )
Gareth Hardy July 8th

It will be another ten years before Microsoft catches on no doubt lol.

Thanks for sharing.
( Reply )
Rich Clark July 8th

Mads this is a really well written article and explains HTML5 implementation well, however i have to disagree with your use of aside, it should be tangiently related to content it isn’t meant to be used as sidebar, I would advise using a section with an ID for this.

We have written up several of these elements in more details over at – http://html5doctor.com/ more will be added soon.

Also as Kyle points out you need to be a bit wary about what you put in your footer.
( Reply )
piervix July 8th

This is my second comment, the first was deleted… I explained my doubts in the use of aside (like Rich)… there is confusion!

http://html5doctor.com/understanding-aside/

Someone could explain me how to use this element?
( Reply )
1. Mirek July 8th
  
  IMO you should use aside for anything related to the content of an article, such as examples, blockquotes, charts, graphs, links with further reading. To me it’s on the same level as figure. That’s how I understand it (at least right now )
  ( Reply )
  1. namename July 8th
    
    For an example, chart, or graph I’d think [figure] makes the most sense. For a blockquote shouldn’t you just use [blockquote]? Why the need to wrap it in an [aside]? Callouts, links with further reading and maybe editors comments/notes could work for aside…. maybe. I’m confused too. Maybe links to other articles in the same category would work as a [ul] wrapped in a [nav] wrapped in an [aside]… but then that’s 3 layers of tags where you might visually be able to use just 1 depending on your design.
hannon July 8th

I just hope that all browsers implement this the same way!
( Reply )
namename July 8th

If only you could use css gradients as well
( Reply )
namename July 8th

What if you want the sidebar to be on the left instead but without having to edit the markup? Could you still use display:table-cell?
( Reply )
bob July 8th

Now everything on the internet will look the same. I thought it was bad now, but just wait!
( Reply )
e11world July 8th

For some reason I’m not that excited about this.. I don’t think all browsers will catch up to this and CSS hacks will always be around. Just new ones after this.
( Reply )
Lev July 8th

This is greate.
It will make our work much simpler.
I love the structure element and some of new tags will be much more usfull.
Less coding…..

Greate totorial this one si VERY USEFUL

Thanx
( Reply )
Lee Munroe July 8th

Nice step by step tutorial. I’m sure I’ll be coming back to this soon once I start marking up in HTML5/ Cheers
( Reply )
Diego SA July 8th

Uhn, ok! Hope HTML 5 and CSS 3 become normally used as soon as possible. These new features, mainly the pseudo-class nth-child are so useful and great for blogs.
Well, we’ll have to wait until a decent browser come. Safari 4 is really awesome to support newer resources, but unfortunately there’s a lot of people who still use IE. Firefox lately is going down in my opinion. It’s still excelent but the version 3.5 has some problems with supporting.
Anyway, this tutorial gives us a excellent preview of using HTML5 and CSS 3. Useful and excellent!
( Reply )
me July 8th

Nice tutorial, but XHTML 2, nothing compares to you… Every time I see some HTML 5 code I’m thinking this could be improved… ah, wait they did that already, it was XHTML 2. The problem with XHTML 2 was that they wanted it all in one big step, if they had taken baby steps, we would probably be looking ant an XHTML 2 tutorial right now…
( Reply )
Terrance-OXP July 9th

Well, it could take quite a while before it became stable for release. Definitely much easier for future generation to pick up programming language.
( Reply )
Jason Grant July 9th

Here’s yet another way to do the same thing we were doing before in a different way. That’s all this page outlines. That’s pretty much all that HTML5 is bringing to the table.

is the only useful element in this whole example I reckon.

Nothing new will be really possible with HTML5.
( Reply )
Liam J Moore July 9th

Absolutely loved this tut.

Very informative
( Reply )
Adrian July 9th

That’s not even using Media Queries: http://www.w3.org/TR/css3-mediaqueries/
( Reply )
Derek Herman July 9th

I think this article is about a year or two early and I’m actually not happy that HTML5 is being talked about as the new upcoming standard when it’s not even supported nor will be for many years.

HTML5 to me is just another way to make my life harder and find ways for browser support issues. I mean, we are just now getting to the point that we are phasing out IE6 and now are going to have to deal with a whole other set of problems. Not happy at all! I really wish the W3C would just stop trying to mess with how we build sites. XHTML 1.0 strict is a great doctype and to abandon it is an absolute mistake.

I honestly don’t think HTML5 will be that beneficial to me as a wed designer and knowing that XHTML 1.0 strict is supported by all major browsers is enough for me to say screw this movement, I just got over the last one and am not willing to spend time learning something not being supported fully till 2020.
( Reply )
Volomike July 9th

FF 3.5 now supports box shadow as:

-moz-box-shadow
( Reply )
Stefan Drakulich July 9th

Just wanted to say that the link to the demo doesnt work anymore!
( Reply )
Ryan S July 9th

We really need Microsoft to join the rest of the browser world with updated standards.
( Reply )
1. Sergey July 10th
  
  Yes you right. Microsoft have to improve his brosers.
  ( Reply )
  1. Nathaniel July 13th
    
    microsoft have to improve a lot of things…
Radu July 9th

Dude, where’s my legend?

It stroke me that you’re showing off next-generation markup but you’re still using a header element for the form title instead of a legend

Otherwise it’s a good round-up — can’t wait to get a chance on experimenting with these new toys
( Reply )
Raphaël July 9th

I’m starting to get good with html and css and now I have to learn it all over again…with new things to remember…. OMG…It’s a bit difficult to understand…I hope that there will be lot’s of tutorials!
( Reply )
Oleg July 10th

That’s powerful!!! Can’t wait to use HTML5 combined with CSS3!
( Reply )
Jose Daniel July 10th

What happend with the div tags!?
( Reply )
Márcio A. Toledo July 10th

I think that this is evolution… I don’t care if I’ll have to learn new things, it’s part of the process for a better web. Browser competition has created many useful things for the users and I can’t imagine a ONE BROWSER ONLY WORLD as a good thing. We, webdevelopers, need to accept that new things will be created and that only the really good ideas will survive… all we need to do is use the new possibilities without forget about graceful degradation (GD is all about usability).

I see a big bright side, much brighter than the possible bad signals of HTML5
( Reply )
robb July 10th

nice article there.
this is my first time reading HTML 5 + CSS 3 tutorial.
keep it coming.
( Reply )
Joe July 11th

Great tutorial! Only wish I could use it sooner
( Reply )
Alex July 12th

If we don’t raise awareness and get developers to push hard for new technology then html5 and css3 will always be a step away. The whole point of this article is to raise that awareness and excitement level. Its up to the readers of this blog to push for these things, your the developers! Don’t whine or be indifferent, do something.
( Reply )
The Open Sourcerer July 12th

Thanks,

Informative and helpful.

Looking forward to decent browser support in the years to come
( Reply )
Peter July 12th

Wow great Tut thank u
( Reply )
Taylor Satula July 13th

For IE we need:

document.createElement(”one of the HTML5 elements”)

+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+_+

This will fix up the theme till microsoft gets off their fat ass
( Reply )
Can Berkol July 14th

Very good summary of some the cool features. Thanks!
( Reply )
pravash chamling rai July 15th

lets see if these things works out !!! fingers are crossed !!! it cool anyway !!!
( Reply )
Stef July 15th

Thank you for your time writing this nice tutorial, usefull stuff in there i didn’t knew about; very exciting.

Just an error though, like another said, the tag is pretty restrictive and header can’t be included in it (like a ton of other things).

A link with more infos

http://boblet.tumblr.com/post/134276674/html5-structure2
( Reply )
Matteo July 16th

Yea, as this step is really helpful for all of us web designers, we all should push on that way even if IE doesn’t support any of the past and future great improve !!

FF support it
Chrome support it
Safari support it
Opera will surely support it…

So Let’s Go on!!
( Reply )
Pascal Hartig July 17th

Hm, there is still one mistake in it. You are not allowed to put a element in the according to the current draft.
( Reply )
Mujtaba July 17th

i found out yesterday that Goooogle has already started using HTML 5, check out th google.com homepage source code….
( Reply )
ben chen July 17th

if all brower support it i will use it
( Reply )
tinyang July 18th

Wonderful article! I have a question though. In the “Styling the Content Area and Sidebar” section of this article, why would one use a div to assign an id? Ex:

instead of giving as ID to the section? Ex:

I’m sorry if it seems like a dumb question, but it’s all so new to me. Thanks.
( Reply )
1. tinyang July 18th
  
  Oops! I lost my examples due to tag marks, let me try again here:
  
  Wonderful article! I have a question though. In the “Styling the Content Area and Sidebar” section of this article, why would one use a div to assign an id? Ex:
  div id=”mainContent”
  instead of giving as ID to the section? Ex:
  section id=”mainContent”
  I’m sorry if it seems like a dumb question, but it’s all so new to me. Thanks.
  ( Reply )
Emily July 18th

“Also note how I’ve chosen to size the fonts in pixels instead of ems or %. This is to maintain the progressive nature of the tutorial. When the major browsers one day are completely finished implementing HTML 5 and CSS 3 we will all have access to page zooming instead of just text resizing. This eliminates the need to define sizes in relative units, as the browser will scale the page anyway.”

I’m sorry, but we should be setting type in points or ems. Percentages are more useful for nesting, but largely redundant.

I’m tired of seeing websites with type set in 10 pixels or smaller. I don’t bother trying to read them most of the time. Users should not be expected to manually resize every site they visit. Expecting that is like saying you don’t care about your visitors. And browser zooming usually looks awful for any bitmapped images.

Please don’t encourage people to set type in pixels. We’re not all using the same screen size, so it’s not appropriate. Not using relative units for your type seems misinformed.

Also, scaled PNG images in IE tend to look pixelated. SVG is better, when possible.
( Reply )
1. Mads Kjaer July 18th
  
  I thoroughly explain my reasoning in the very paragraph you’re quoting. ALL major browsers today have implemented page zooming, where the browser handles all scaling of text, images, etc. When HTML 5 and CSS 3 are eventually implemented, the market share of browsers not capable of page zooming will be very, very low.
  
  You point out that “we should be setting type in points or ems” and that “percentages are more useful for nesting, but largely redundant”. First off, why points when you’ve just picked on the use of pixels? They are both absolute measurements. The only difference is that points are sized according to the dpi of the screen on which they are viewed. Furthermore, there is no difference in the behavior of ems and percentages. Ems are just as good for “nesting” as percentages. They are both relative, 1.2em = 120%
  
  Browser zooming only looks awful with bitmapped images on systems that don’t have anti-aliasing turned on. Scaled PNG images in IE look pixelated because of the scaling techniques that IE uses. In Firefox / Safari on Mac OS X, the images look just fine when scaled up. And how would you expect me to use SVG on photographs?
  ( Reply )
  1. Emily July 18th
    
    I still don’t think page zooming should be expected of the visitor. We should be making the effort to choose a readable size in our code.
    
    You say points are absolute, but the reason I suggest them as an option is exactly what you said – they are sized relative to resolution. 10pt will be the same physical size as resolution increases, pixels will not. Points should only be used when you have a very specific target audience and you know that the size you choose will be readable for them. Yes, ems are better. But points aren’t absolute in the way that pixels are.
    
    Ems are generally accepted as the most user-friendly option. Percentages are less common, and they do behave like ems for type size, as you say. There’s no real advantage to using percentages for type size overall. I can see it being useful for nesting if you want to be able to change one value and have that cascade through everything else, but a font-size set to percent in the body tag seems a bit strange as there’s no advantage to doing that instead of ems. That’s what I meant by redundant.
    
    Browser zooming with text only is a newer feature. Previously, everything would be zoomed. Still, we shouldn’t be expecting most of our visitors to have to use that feature. Most visitors would rather leave.
    
    As for scaling images, I know for PNGs the problem is with IE, but I do think it’s worth knowing when designing a site to be viewed in multiple browsers. And I never said to use SVG for photos. I said to use SVG when possible. Obviously that’s restricted to images where the source is a vector.
    
    While I thought there were good points in your article, you really don’t need to get so angry when I point out a flawed recommendation. If you disagree, that’s fine. Go ahead and keep setting type in pixels and expecting visitors with larger monitors to resort to page zooming. I will continue to feel there are more user-friendly options.
Cristian Gorrino July 31st

this is awesome, I have been using a little bit of css3 in my project, coda for mac has a lot of it built in to their css editor (kinda like a wysywyg)
( Reply )
Mohammed Alaa August 3rd

This Article is Amazing. the Question now is what’s supported so far and for what browsers?
( Reply )
Shabbir Lakdawala August 4th

Yes When will this be supported by the browsers?
The major problem is that the developers will also have to adjust to the structure of its HTML 5 .
They still cant code properly in HTML 4.01 how they will be able to code in HTML 5.
( Reply )
Larry August 7th

I see a lot of “Nice but browser are not ready yet…” posts. FUCK the browser. Start implementing this massively and FORCE for once the bloody developers to conform to a standard because it is widely used NOW.

And FUCK IE once and for all… Jesus I hate that piece of shit.
( Reply )
nib August 11th

Better to do for all browsers!
On these sites, an html, but different css:
(The structure of one, a different design)
http://www.beauty-brides.com/
http://www.tornado-of-love.com/
http://www.order-brides.com/
This is – the commercial projects.
( Reply )
Isaac Seymour August 11th

Great tutorial, and I look forward to the day when 90+% of people are using an TML5/CSS3 browser, but I can’t see that happening too soon.

One note – is it really necessary to explain 2n+1 ? It’s an unbelieveably simple mathematical equation. They teach that to all 12/13 year olds here in the UK, so I should hope that developers visiting this site should be competent in that level of maths!

Isaac
( Reply )
Nardyello August 11th

There’s too many people complaining about this new technology. Most of it has to do with the compatibility issues.

In my honest opinion, HTML 5 and CSS 3 were created to make coding more simple, effective and straight forward. These two new technologies will enable the designer (you and I) to have more control over our designs, which is, more often then not, a better thing.

So many people are complaining about IE. Forget about IE. It is losing popularity. More and more people are using Firefox and Safari, which are two browsers that support most of the current technology.

Sites like this (tutsplus) are catered to individuals who are aware of such benefits of these browsers and rarely (if ever) use IE as their main source of navigation. We all here use Firefox or Safari. I really doubt any of us who is here to learn about the new technologies are using IE (unless for testing).

Unless your business is catered to the less informed crowd (tech/computer smart-wise) I would definitely suggest to skip the headache of coding for IE.

It is ridiculous that Microsoft has willingly rejected CSS and HTML standards throughout the years. I don’t think we should suffer because a Giant decides they don’t want to bother with such “nonsense”.

Do like I’ve done, IE is only for testing (if necessary). Firefox is the main browser and I’ve taught everyone in my household to use only it. I encourage even my friends and people I do work for to switch, and most of them have done so.
( Reply )
CSS3 Gallery August 13th

Great article on html5 and CSS3, im loving our tuts plus membership! if you know of any worthy sites using css3 please feel free submit them on our new CSS3 Gallery
( Reply )
Bert August 14th

Wow, really interesting. I’m looking forward to CSS3. How long would it take to learn all these new HTML5-tags???
( Reply )
elton August 19th

Good to see something about CSS3 and HTML5 on the tutsplus network. I try and use CSS3 on everything I do and have a separate stylesheet (plus a few extra divs) to get ’similar’ results for IE.

I don’t get the argument about everything having to look the same for every browser – it’s NOT economically possible. As long as it’s ‘consistent’ who cares. Is the client missing out because they can’t see a text shadow on a heading?

Anyone who doesn’t start storing this stuff in their memory banks now is taking the first step towards doing them selves out of work in the future.
( Reply )
青柠檬 August 20th

wow~~，wonderful ,
the Generic Syntax is very beautiful
why i use it ,it effect don’t like yours.
( Reply )
Egypt Web Design September 2nd

an adorable collection … thank you so much for sharing it
( Reply )
ajax web styles September 8th

yes thats the great job. CSS3 has very nice features
( Reply )
Mario Vargas September 8th

Very good introduction to some of the exciting features of HTML 5 and CSS 3.

My only negative comment is that the article had some inconsistencies with the code in the tutorial and final version. This made me pull some hairs while trying to figure out why my version looked so different from the demo in this article.

*Watch out the part where it tells you to style the HTML 5 elements as blocks. The section tag is missing from that list.*

Other than that, it was a great read article!
( Reply )
เพชรร่วง September 11th

should i start using it now?
( Reply )
HTML 5 Tutorials September 16th

Excellent to see so many people interested in HTML 5, lets hope the transition is sooner then the 2022 timeframe people are talking about, i can’t see it taking this long, There is a free HTML 5 template if your are interested in sharing it with your visitors/members here is the link: http://html5tutorial.net/downloads/free-html-5-template.html this is a good starting point to learn some basics.
( Reply )
AtiKuSDesign September 23rd

I really need to start looking into HTML5+CSS3 and I thank you for this post.

I think I will have a go at building a test portfolio site using these techniques.
( Reply )
Travis September 25th

Despite only barely getting my feet wet… I’ve been reading a lot on CSS3 so I can sort of have a heads up on when things roll out. Thanks for the knowledge.
( Reply )
Joe October 11th

Awsome!
( Reply )
se October 13th

is there a way to wrap text around an image within the table-cell?
( Reply )
love October 14th

just let love be
( Reply )
Shaz October 15th

forwarned is forearmed, i like to know what is ahead and start to get my site backups ready. Thanks Heaps L)
( Reply )
saroj October 21st

hi

how can we start html 5 and css 3
( Reply )
PSD to HTML October 30th

Learnt some new things about HTML 5 and CSS. However, the author’s name is not clickable
( Reply )

Add Your Comment

( GET A GRAVATAR )

Your Name
October 30th

Cancel

Tuts+	Tutorials & Resources
Psdtuts+	Photoshop & Graphics
Nettuts+	Web Design & Development
Vectortuts+	Vectors & Illustration
Audiotuts+	Music & Sound
Aetuts+	AfterEffects & Motion
Activetuts+	Flash Tutorials
Cgtuts+	Computer Graphics
Phototuts+	Photography

ActiveDen	Flash Marketplace
ThemeForest	Web & CMS Themes
GraphicRiver	Graphics, Vectors & Icons
VideoHive	Motion Graphics & Projects
AudioJungle	Loops & Effects

FreelanceSw	Freelance Jobs & Community
Rockable	Books & How-To
Creattica	Design Community
Mac.AppStorm	Mac Apps
Web.AppStorm	Web Apps
WorkAwesome	Be Awesome At Work
Envato	About Us