Coding An HTML 5 Layout From Scratch

Advertisement

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications1 does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:

  • Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
  • Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
  • Use HTML5 alongside a rising technology: Microformats.
  • Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

It’d be a good idea to have a read at some of these articles first:

I’ll also assume you know the basics of HTML and CSS. Including all the “old school” tags and the basic selectors and properties.

Before we begin…

There’s a couple of things you have to bear in mind before adventuring on the new markup boat. HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavours you’ve got available as tools: use the right one for the right job. Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.

There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it does not understand it as of yet. This may also apply to other software such as screenreaders and search engines.

Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done. With the immense amount of feedback and all the hype around it, the current draft5 is bound to change and it’s impossible to predict how much.

So if you’re ready to do the switch, are not afraid of using technology that in the near future will be way more meaningful and can easily change whatever piece of code that might get broken, then keep reading.

A word on Progressive Enhancement and Graceful Degradation

So what are these two terms all about? Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice.

Both technologies usually go hand in hand and have been part of the ways we do things for years. It’s just the terms that are not that well-known. And now, both of these practices need to evolve due to the new languages that are approaching. If you want to go deeper into both of these terms, check a related article on accessites.org6.

1. The Design

This will be the sample layout we’ll be coding:

Smashing HTML5! template7

A very basic layout brilliantly named Smashing HTML5! which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

2. The markup

As a very basic start to our markup, this is our html file skeleton:

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
 
<link rel="stylesheet" href="css/main.css" type="text/css" />
 
<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
 
	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
 
<body id="index" class="home">
</body>
</html>

A few highlights:

  • 3 different Conditional comments8 for IE. First one includes html5 shiv9 code directly from Google Code for all versions of IE. The second one includes IE8.js10 for better backwards compatibility for IE7 and below as well as an ie.css file which will sove IE7 and below CSS bugs. Third one is just a CSS file to fix IE6 bugs.
  • The use of an “index” id and a “home” class on the <body> tag. This is just a habit I’ve developed over the past year that has simplified the coding of inner-sections of overly complicated websites.
  • A simplified version of the charset property for better backwards compatibility with legacy browsers.
  • I’m using XHTML 1.0 syntax on a HTML5 document. That’s the way I roll. It’s a habit that I really like and since I can still use it11, I will. You can, however, use normal HTML syntax here. That is, uppercase attribute and tag names, unclosed tags and no quotes for wrapping attributes’ values. It’s up to you.

This is a very basic and solid startup for all and any HTML5 projects you might do in the future. With this, we can start assigning tags to the different sections of our layout.

If we had an x-ray machine designed for websites, this would be our page’s skeleton:

Smashing HTML5! template x-rayed

The header

Smashing HTML5! Header block

The layout header is as simple as it gets. The new <header>12 tag spec reads as follows:

The header element represents a group of introductory or navigational aids

Thus it is more than logic that we use this to markup our header. We’ll also use the <nav>13 tag. The spec reads:

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. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.

There’s a lot of buzz regarding the spec of the nav element since “major navigation blocks” is not a very helpful description. But this time we’re talking about our main website navigation; it can’t get any major than that. So after a couple of id’s and classes our header ends up like this:

<header id="banner" class="body">
	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
 
	<nav><ul>
		<li class="active"><a href="#">home</a></li>
		<li><a href="#">portfolio</a></li>
 
		<li><a href="#">blog</a></li>
		<li><a href="#">contact</a></li>
	</ul></nav>
 
</header><!-- /#banner -->

Featured block

Smashing HTML5! Featured block

Next is the featured block. This is best marked up as an <aside>14 since it’s spec says:

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.

That pretty much sums up our featured block, so let’s go for it. Now, inside of this block there’s a lot going on. Firstly, this is an article, so alongside the <aside> tag, we should be using <article>15 right away.

We also have two consecutive headings (‘Featured Article’ and ‘HTML5 in Smashing Magazine!’) so we’ll be using yet another new element: <hgroup>16. This is a wonderful tag used for grouping series of <h#> tags which is exactly what we have here. It exist to mask an h2 element (that acts as a secondary title) from the outline algorithm, which will save developers some headaches in the future.

The last element on this block is the Smashing Magazine logo to the right. We have yet another new tag for this element: <figure>17. This tag is used to enclose some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document. This tag allows us to use a <legend> tag to add a caption to the elements inside. Sadly, this last feature is broken on some browsers as they try to add a <fieldset> around and it is impossible to override it with simple CSS rules. Therefore, I’d suggest leaving it aside and just use <figure> for the time being.

Featured block code will look like this in the end:

<aside id="featured" class="body"><article>
	<figure>
		<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
	</figure>
	<hgroup>
 
		<h2>Featured Article</h2>
		<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
	</hgroup>
	<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
 
</article></aside><!-- /#featured -->

The layout’s body

Smashing HTML5! Body block

Next is our document’s body, where all the content will be. Since this block represents a generic document section and a section is a thematic grouping of content, this one is without a doubt a <section>18 tag.

For the posts, we’ll use the old <ol> tag since, well, it’s an ordered list of articles. Each <li> should have an <article> tag and within this, we’ll have a <header> for the post title, a <footer> for the post information and a <div> for the post content. Yes, a <div>.

The reason for using a div is simple: we’ll be using the hAtom 0.1 Microformat19 and it requires the content entry to be wrapped by an element. Since no other tag applies to this (it is not a section, it is not a full article, it is not a footer, etc.) we’ll use a <div> since it provides no semantic value by itself and keeps the markup as clean as possible.

With all these tags, and the hAtom microformat in place, the code shall look like this:

<section id="content" class="body">
 
	<ol id="posts-list" class="hfeed">
 
		<li><article class="hentry">	
			<header>
				<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
			</header>
 
			<footer class="post-info">
				<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
					10th October 2005
				</abbr>
 
				<address class="vcard author">
					By <a class="url fn" href="#">Enrique Ramírez</a>
 
				</address>
			</footer><!-- /.post-info -->
 
			<div class="entry-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
 
			</div><!-- /.entry-content -->
		</article></li>
		
		<li><article class="hentry">
			...
		</article></li>
 
		
		<li><article class="hentry">
			...
		</article></li>
	</ol><!-- /#posts-list -->
 
</section><!-- /#content -->
 

For the mighty ones: yes, I did not use the <time>20 element. This tag is rather new, and it is not compatible with the current microformat implementations out there. Since I’m indeed using hAtom it made little point to have both an invalid microformat and a yet-incomprehensible tag. If you’re not using a microformat, I’d suggest using <time> instead.

The extras block

Smashing HTML5! Extras block

The extras block is yet another section of our document. You might struggle for a while deciding whether an <aside> or a <section> tag would be best for this section. In the end, this section could not be considered separate from the main content since it contains the blogroll links and some social information of the website. Thus, a <section> element is more appropriate.

Here we’ll also find another use for the <div> tag. For styling needs and grouping’s sake, we may add two divs here: one for the blogroll section and one for the social section.

For the rest of the block there’s nothing much to decide. It’s the everyday <ul> accommodated set of links on both sections, which in the end may look like this:

<section id="extras" class="body">
	<div class="blogroll">
		<h2>blogroll</h2>
		<ul>
 
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>
 
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>
 
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>
 
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>
 
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
			<li><a href="#" rel="external">Smashing Magazine</a></li>
 
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
			<li><a href="#" rel="external">Wikipedia</a></li>
 
		</ul>
	</div><!-- /.blogroll -->
 
	<div class="social">
		<h2>social</h2>
		<ul>
 
			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
			<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
			<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
 
			<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
			<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
			<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
 
		</ul>
	</div><!-- /.social -->
</section><!-- /#extras -->

The About and footer blocks

Smashing HTML5! About and Footer blocks

The footer has no real difficulty. We’ll use the brand new <footer>21 tag to wrap both the about and the copyright information since the spec reads:

The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Since the nearer ancestor of our <footer> tag is the <body> tag, is more than right to wrap both elements here since we’re adding information about the website’s owner (and thus, author).

For the about block we’ll use an <address> tag, which contains contact information for it’s nearest <article> or <body> element ancestor. We’ll also use the hCard Microformat22 to enhance the semantic value. For the copyright information we’ll go with a simple <p> tag so the code ends like this:

<footer id="contentinfo" class="body">
	<address id="about" class="vcard body">
		<span class="primary">
			<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
 
			<span class="role">Amazing Magazine</span>
		</span><!-- /.primary -->
		
		<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
		<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
 
	</address><!-- /#about -->
	<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

Summing it all up

So, after all this mess, the complete code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
 
<link rel="stylesheet" href="css/main.css" type="text/css" />
 
<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
	<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
 
<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>
 
<body id="index" class="home">
 
<header id="banner" class="body">
	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
 
	<nav><ul>
		<li class="active"><a href="#">home</a></li>
		<li><a href="#">portfolio</a></li>
 
		<li><a href="#">blog</a></li>
		<li><a href="#">contact</a></li>
	</ul></nav>
 
</header><!-- /#banner -->	
 
<aside id="featured" class="body"><article>
	<figure>
		<img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
	</figure>
	<hgroup>
 
		<h2>Featured Article</h2>
		<h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
	</hgroup>
	<p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
 
</article></aside><!-- /#featured -->
 
<section id="content" class="body">
	<ol id="posts-list" class="hfeed">
		<li><article class="hentry">	
			<header>
				<h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
 
			</header>
 
			<footer class="post-info">
				<abbr class="published" title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
					10th October 2005
				</abbr>
 
				<address class="vcard author">
 
					By <a class="url fn" href="#">Enrique Ramírez</a>
				</address>
			</footer><!-- /.post-info -->
 
			<div class="entry-content">
 
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
			</div><!-- /.entry-content -->
		</article></li>
 
		<li><article class="hentry">
			...
		</article></li>
 
		<li><article class="hentry">
			...
		</article></li>
 
	</ol><!-- /#posts-list -->
</section><!-- /#content -->
	
<section id="extras" class="body">
	<div class="blogroll">
		<h2>blogroll</h2>
 
		<ul>
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
 
			<li><a href="#" rel="external">Smashing Magazine</a></li>
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
 
			<li><a href="#" rel="external">Wikipedia</a></li>
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
 
			<li><a href="#" rel="external">Smashing Magazine</a></li>
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
 
			<li><a href="#" rel="external">Wikipedia</a></li>
			<li><a href="#" rel="external">HTML5 Doctor</a></li>
			<li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
 
			<li><a href="#" rel="external">Smashing Magazine</a></li>
			<li><a href="#" rel="external">W3C</a></li>
			<li><a href="#" rel="external">Wordpress</a></li>
 
			<li><a href="#" rel="external">Wikipedia</a></li>
		</ul>
	</div><!-- /.blogroll -->
 
	<div class="social">
 
		<h2>social</h2>
		<ul>
			<li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
			<li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
 
			<li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
			<li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
			<li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
 
			<li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
		</ul>
	</div><!-- /.social -->
</section><!-- /#extras -->
 
	
<footer id="contentinfo" class="body">
	<address id="about" class="vcard body">
		<span class="primary">
			<strong><a href="#" class="fn url">Smashing Magazine</a></strong>
 
			<span class="role">Amazing Magazine</span>
		</span><!-- /.primary -->
		
		<img src="images/avatar.gif" alt="Smashing Magazine Logo" class="photo" />
		<span class="bio">Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
 
	</address><!-- /#about -->
	<p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
 
</body>
</html>
 

Say, isn’t that readable? It’s also way more semantic than a bunch of <div>s all over the place.

3. The CSS

Just like our markup, the CSS will also have a very basic start. Call this a frameworks of sorts which I’ve been using for a long time and works fairly well. Here’s the code for our main.css file:

/*
	Name: Smashing HTML5
	Date: July 2009
	Description: Sample layout for HTML5 and CSS3 goodness.
	Version: 1.0
	Author: Enrique Ramírez
	Autor URI: http://enrique-ramirez.com
*/
 
/* Imports */
@import url("reset.css");
@import url("global-forms.css");
 
/***** Global *****/
/* Body */
	body {
		background: #F5F4EF url('../images/bg.png');
		color: #000305;
		font-size: 87.5%; /* Base font size: 14px */
		font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		line-height: 1.429;
		margin: 0;
		padding: 0;
		text-align: left;
	}
 
/* Headings */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}	/* 14px */
 
h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}
 
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #C74350;
	padding: 0 1px;
	text-decoration: underline;
}
a:hover, a:active {
	background-color: #C74350;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}
 
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
 
strong, b {font-weight: bold;}
em, i {font-style: italic;}
 
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
 
/* Lists */
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}
 
ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}
 
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
 
/* Quotes */
blockquote {font-style: italic;}
cite {}
 
q {}
 
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
 
	/* Thead */
	thead th {padding: .5em .4em; text-align: left;}
	thead td {}
 
	/* Tbody */
	tbody td {padding: .5em .4em;}
	tbody th {}
 
	tbody .alt td {}
	tbody .alt th {}
 
	/* Tfoot */
	tfoot th {}
	tfoot td {}
 

This is our first step into getting the layout together. We can style most of the basic elements from here, so feel free to do so. Here’s a few highlights:

  • For optimum coding, a few basic information on the .css file is at the top in comments form.
  • 2 imports at the beginning of the file. The first one is Eric Meyer’s CSS reset23 file. Second one is a personalized global forms file which I’ll discuss more deeply later on.
  • Very basic styling for the default tags.

Explaining some properties

For this very part, there’s little to be mentioned. Firstly there’s the text-shadow24 CSS3 property. To explain it, here’s a sample:

	text-shadow: 1px 5px 2px #333;

This will give us a #333 shadow on our text that’s 1px to the right, 5px down and with a 2px blur. Simple, right? You can use hex and rgba values plus any CSS unit25 (except %) here.

We also have this little baby:

	* p:last-child {margin-bottom: 0;}

This line will remove the margin bottom of any <p> tag that’s the last child of it’s parent. Useful when using boxes (like we’re doing) to avoid large vertical gaps.

Lastly, we have a couple of selectors:

	::-moz-selection {background: #F6CF74; color: #fff;}
	::selection {background: #F6CF74; color: #fff;}

::selection is a CSS3 selector26 that lets us style how the text selection looks. It only allows color and background CSS properties, so keep it simple. ::-moz-selection needs to go here since Mozilla haven’t implemented the ::selection selector.

Enabling HTML5 elements

Now, as I’ve stated before, browsers do not understand HTML5 as of yet. And since HTML5 is still in development, little has been discussed about the default styling the new elements will have. Thus, being tags that do not exist for the browser, it does not display any styling in them.

Perhaps it’s fair to assume that most browsers apply something like display: inline for all unknown tags that they might encounter. This is not what we want for some of them, such as <section>, so we need to tell explicitly to the browser how to display these elements:

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
	display: block;
}

There! Now we can magically style our tags as if they were <div>s!

Limiting our blocks

Some of you might have noticed how I added the class="body" attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I’ve never been a fan of the big wrapping <div> to do that. So we’ll use the basic block centering technique using margins for this. I’m also adding a couple of generic classes to this section that might be used for a post side content.

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

Header styling

We’ll begin with our header. This one is fairly easy. We just want a couple of spacing and a few text styling here and there. Nothing we haven’t done before.

/*
	Header
*****************/
#banner {
	margin: 0 auto;
	padding: 2.5em 0 0 0;
}
 
	/* Banner */
	#banner h1 {font-size: 3.571em; line-height: .6;}
	#banner h1 a:link, #banner h1 a:visited {
		color: #000305;
		display: block;
		font-weight: bold;
		margin: 0 0 .6em .2em;
		text-decoration: none;
		width: 427px;
	}
	#banner h1 a:hover, #banner h1 a:active {
		background: none;
		color: #C74350;
		text-shadow: none;
	}
 
	#banner h1 strong {font-size: 0.36em; font-weight: normal;}

We now pass on to the navigation. Pretty much the same as before, nothing really new here. The regular horizontal list, a couple of colour edits. Nothing fancy.

	/* Main Nav */
	#banner nav {
		background: #000305;
		font-size: 1.143em;
		height: 40px;
		line-height: 30px;
		margin: 0 auto 2em auto;
		padding: 0;
		text-align: center;
		width: 800px;
		
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
	#banner nav li {float: left; display: inline; margin: 0;}
	
	#banner nav a:link, #banner nav a:visited {
		color: #fff;
		display: inline-block;
		height: 30px;
		padding: 5px 1.5em;
		text-decoration: none;
	}
	#banner nav a:hover, #banner nav a:active,
	#banner nav .active a:link, #banner nav .active a:visited {
		background: #C74451;
		color: #fff;
		text-shadow: none !important;
	}
	
	#banner nav li:first-child a {
		border-top-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-webkit-border-top-left-radius: 5px;
		
		border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}

We’re using another CSS3 property here: border-radius. This new CSS3 property lets us add rounded borders to our blocks without the need of unnecessary, non-semantic tags that will clutter our code or a million of images and clever background-positioning. No, that’s all a thing of the past. With this we just need to set the radius of our border and that’s it.

Of course, border-radius is not widely adopted yet, and thus, we need to use the equivalent properties for Mozilla- and Webkit-browsers. There are a lot of variations to this property27, and can make your code a little big, but if you want rounded corners on most of the current browsers, you might as well add them.

You might as well notice the use of !important28. This is basically to override the default styles (text-shadow) without complex specificity selectors. In this example it’s here mostly for educational purposes.

Featured block and Body styling

Here’s the CSS code for both blocks. Note that this is not the styling for the posts’ list. Just the major content block. As both of these blocks have no real special CSS properties, I’ll let you guys figure it out.

/*
	Featured
*****************/
#featured {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
#featured figure {
	border: 2px solid #eee;
	float: right;
	margin: 0.786em 2em 0 5em;
	width: 248px;
}
#featured figure img {display: block; float: right;}
 
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
 
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
 
/*
	Body
*****************/
#content {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px 20px;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Again, this is our everyday coding style. Backgrounds, margins, colours and text styles we’ve been using for years. Perfect example of how styling HTML5 is not that different from current markup languages. It’s just as easy to style as it’s always been.

Extras block styling

Here things begin to get interesting. We’ll begin with basic styling for the block itself:

/*
	Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}
 
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
	color: #C74350;
	font-size: 1.429em;
	margin-bottom: .25em;
	padding: 0 3px;
}
 
#extras a:link, #extras a:visited {
	color: #444;
	display: block;
	border-bottom: 1px solid #F4E3E3;
	text-decoration: none;
	padding: .3em .25em;
}
 
	/* Blogroll */
	#extras .blogroll {
		float: left;
		width: 615px;
	}
 
	#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
 
	/* Social */
	#extras .social {
		float: right;
		width: 175px;
	}

As you can see, I’m doing a 3 column layout for the blogroll block by floating the <li>s and a 1 column layout for the social block by merely changing its width. This already works very well by itself, but there’s one thing that bothers me. The borders I’ve added for separating each of the links:

Smashing HTML5! Extras block border issue

The highlighted row is the one troubling me. The borders I’ve added are actually on two elements. Each <li> and <a> tag have a border-bottom of 1px, which I don’t want on the last row. So we’ll remove the borders for the last 3 elements on blogroll, and the last element on social.

First we’ll remove the borders on the last <li> of each block. By using the CSS3 :last-child29 selector, we can target the last <li> of it’s parent <ul>.

	#extras li:last-child, /* last <li>*/
	#extras li:last-child a /* <a> of last <li> */
	{border: 0}

That will remove the border from the last link on both of our blocks. Now we have a new problem. How are we going to remove the border on the other two elements on the blogroll block?

Smashing HTML5! Extras block border second issue

Well, meet :nth-last-child()30.

#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}

Phew! Looks pretty hard, uh? Not really. This basically targets the second (2) and third (3) elements starting from the end. Exactly the ones I want to remove the border from.

As expected, this will not work on IE, though IE8.js31 does support :last-child, it does not support :nth-last-child, thus, borders will appear on IE. This is NOT a major design problem, information is still accessible, thus it is pointless to try to achieve the same effect on IE.

Adding icons to social

Now we’ll spice things up a little. We all love how little icons look besides each link. We’ve seen that design technique everywhere. There’s a million ways of applying them, but we’ll use some advanced CSS3 selectors to do this.

Let’s begin with a little introduction. a[n='b'] will target all <a> that has an n attribute value of b. So, for example, if we use this: a[href='picture.jpg'] we’ll be targeting an element like <a href="picture.jpg">. This is great, but not exactly what we want, since the follow-ups of the URL might have a different value. Here’s a couple of other selectors that might come in handy:

  • a[n] will target all <a> that has an n attribute, regardless of its value.
  • a[n='b'] will target all <a> that has an n attribute value of b.
  • a[n~='b'] will target all <a> that has an n attribute which one of its space-separated values is b.
  • a[n^='b'] will target all <a> that has an n attribute that starts with b.
  • a[n*='b'] will target all <a> that has an n attribute that has b somewhere within its value.

Note that neither of these is restricted to the <a> tag. This last one fits us perfectly. So we’ll search for an <a> tag that has a piece of text somewhere within its URL. So this is our code:

#extras div[class='social'] a {
	background-repeat: no-repeat;
	background-position: 3px 6px;
	padding-left: 25px;
}
 
/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}

The first bit lets us add a padding to the social links, where the icon will be. It’ll also set the default background settings so we don’t have to repeat ourselves. You might be wondering why I’m using div[class='social'] rather than the normal div.social. Simply because, for the browsers that don’t support this kind of selectors (*cough* IE *Cough*), we don’t want a white gap on the left of our links. Thus, using the same selector used for the background icons will keep me safe. IE won’t have a padding nor a background image, while the rest will do.

The second section uses the selector explained above to target each social network and add the proper icon.

This CSS technique is nothing new32, and as powerful as it might be, it is not widely used (I’ve even seen JavaScript used to achieve this same thing). Yet another CSS feature that goes unnoticed and shouldn’t be.

Footer Styling

Lastly, we have our footer. As other examples above, this has just basic styling here and there. Besides the border-radius property, there’s nothing new in here.

/*
	About
*****************/
#about {
	background: #fff;
	font-style: normal;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	text-align: left;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
 
#about .url:link, #about .url:visited {text-decoration: none;}
 
#about .bio {float: right; width: 500px;}
 
/*
	Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}

The Posts List

There’s only one last element to style. Once again, basic styling here, but this time, we’ll add a quick effect for when the user hovers over the post.

 
/* Blog */
.hentry {
	border-bottom: 1px solid #eee;
	padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
 
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
 
.hentry .post-info * {font-style: normal;}
 
	/* Content */
	.hentry footer {margin-bottom: 2em;}
	.hentry footer address {display: inline;}
	#posts-list footer address {display: block;}
 
	/* Blog Index */
	#posts-list {list-style: none; margin: 0;}
	#posts-list .hentry {padding-left: 200px; position: relative;}
	#posts-list footer {
		left: 10px;
		position: absolute;
		top: 1.5em;
		width: 190px;
	}

Some basics. I’m removing all margin and padding for the last post entry (so I don’t end up with a big gap at the bottom of my box). I’m also using the > selector which basically targets a direct child. For example, #content > .hentry will target a .hentry element that’s directly inside the #content. If the .hentry is inside, let’s say, an ordered list, this rule will not apply since it’s a grandchild and not a direct child of #content. This is to target the single post view once we get onto that.

Continuing with our code, we’ll get this:

#posts-list .hentry:hover {
	background: #C64350;
	color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
	color: #F6CF74;
	text-shadow: 1px 1px 1px #333;
}

This code will change the <li> background color, text color and its <a> color when the mouse is directly above the <li>. This is nothing new and has been possible since forever, but we’re adding it for a simple reason.

HTML5 lets users wrap block-level elements with <a> tags to create block linking areas33. Basically, we’ll be able to wrap the entire <hentry> contents with an anchor and have it behave as a proper link. However, after some testing, I’ve figured that Firefox 3.5.1 is not ready for this. Perhaps because of the non-understandable new elements inside of each .hentry, everytime I added an anchor to wrap the contents, everything inside started to behave in weird manners. Safari, Opera and even IE6 work properly. Take a look at the test page34. Below are a couple of screenshots for all of you single-browser users.

Opera 9.64:

Opera block level anchors render35

Safari 4.0.2:

Safari block level anchors render36

Internet Explorer 6:

IE6 block level anchors render37

Firefox 3.5.1:

Firefox block level anchors render38

So block level anchors are really broken on Firefox, yet we can add a nice :hover effect to the <li>. So we can enhance our user experience visually, though not from the accessibility point of view.

Fixing IE6

Finally, we need to do some fixing for IE6. Below is the complete ie.css and ie6.css file. Each line has a comment on its right side or on the top explaining what it’s fixing. Pretty straightforward. This is ie.css:

#banner h1 {line-height: 1;} /* Fixes Logo overlapping */

And this is ie6.css file:

#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */
 
/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}

4. The aftermath

So, how does everything look now? It has been tested on IE6, Firefox 3, Firefox 3.5, Opera 9.64 and Safari 4.0.2. They all behave properly. Below are a series of screenshots of every browser.

Final Version Safari Screenshot39
Final Version Firefox Screenshot40
Final Version Opera Screenshot41
Final Version Internet Explorer 6 Screenshot42

It is now safe to say that you can achieve an HTML5/CSS3 layout today that will work on past, current and future browsers without a problem. We are still far away from the time we can fully implement much of HTML5′s coolest features43, but we can begin using it today.

Further Resources

There’s a lot of hype and websites dedicated right now to the HTML5 wonder. Here’s a couple:

Footnotes

  1. 1 http://www.w3.org/TR/CSS2/
  2. 2 http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
  3. 3 http://remysharp.com/2009/01/07/html5-enabling-script/
  4. 4 http://html5doctor.com/understanding-aside/
  5. 5 http://dev.w3.org/html5/spec/Overview.html
  6. 6 http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
  7. 7 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/index.html
  8. 8 http://www.quirksmode.org/css/condcom.html
  9. 9 http://remysharp.com/2009/01/07/html5-enabling-script/
  10. 10 http://code.google.com/p/ie7-js/
  11. 11 http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths
  12. 12 http://dev.w3.org/html5/spec/Overview.html#the-header-element
  13. 13 http://dev.w3.org/html5/spec/Overview.html#the-nav-element
  14. 14 http://dev.w3.org/html5/spec/Overview.html#the-aside-element
  15. 15 http://dev.w3.org/html5/spec/Overview.html#the-article-element
  16. 16 http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element
  17. 17 http://dev.w3.org/html5/spec/Overview.html#the-figure-element
  18. 18 http://dev.w3.org/html5/spec/Overview.html#the-section-element
  19. 19 http://microformats.org/wiki/hatom
  20. 20 http://dev.w3.org/html5/spec/Overview.html#the-time-element
  21. 21 http://dev.w3.org/html5/spec/Overview.html#the-footer-element
  22. 22 http://microformats.org/wiki/hcard
  23. 23 http://meyerweb.com/eric/tools/css/reset/
  24. 24 http://www.w3.org/Style/Examples/007/text-shadow
  25. 25 http://htmlhelp.com/reference/css/units.html
  26. 26 http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
  27. 27 http://www.css3.info/preview/rounded-border/
  28. 28 http://www.w3.org/TR/CSS2/cascade.html#important-rules
  29. 29 http://www.w3.org/TR/css3-selectors/#last-child-pseudo
  30. 30 http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo
  31. 31 http://code.google.com/p/ie7-js/
  32. 32 http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
  33. 33 http://html5doctor.com/block-level-links-in-html-5/
  34. 34 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/block-level-links.html
  35. 35 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/opera-big.png
  36. 36 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/safari-big.png
  37. 37 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/ie-big.png
  38. 38 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/firefox-big.png
  39. 39 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-safari.png
  40. 40 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-firefox.png
  41. 41 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-opera.png
  42. 42 http://coding.smashingmagazine.com/wp-content/uploads/images/smashing-html5/files/final-ie6.png
  43. 43 http://dev.w3.org/html5/spec/Overview.html#video
  44. 44 http://html5doctor.com/
  45. 45 http://dev.w3.org/html5/spec/Overview.html
  46. 46 http://html5gallery.com/
  47. 47 http://perishablepress.com/press/2009/07/19/power-of-html5-css3/
  48. 48 http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/
  49. 49 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/

↑ Back to topShare on Twitter

Enrique Ramírez is a Mexican front-end developer with over 9 years of experience and hundreds of websites coded. When he's not coding, he enjoys eating tacos, playing video games, listening to music or drinking a casual cold beer.

Advertising
  1. 1

    I’m diving in this article right now. Looks very impressive…

    6
  2. 2

    knowledgeable article!

    1
  3. 3

    Huh…

    html lang=es ? Espagnol ?

    Ariba Ariba! Abrazar Smashing HTML 5!

    2
  4. 4

    Interesting read. I’m going to give it a go. Thanks!

    -10
  5. 5

    Great article! Why the lang=”es” though? “en” seems more appropriate, or have I completely misunderstood everything?

    0
  6. 6

    Nice layout, i will have to go trought this tutorial.

    -6
  7. 7

    Big Thanks, very helpfull for me

    -2
  8. 8

    Ok, seriously not cool.

    Why give classes and ids to every tag when HTML 5 is about a better semantic separation between code, one of the consequences of this being the lack of need for said classes and ids.
    It’s as pointless as and in my opinion serves to further propagate classitis and iditis, both diseases related to the more famous divitis.

    If you’re using CSS3 wouldn’t it be a much better choice to use > + etc. to style the specific element in relation to those around it, rather than use the “old”, css 2.1 way?

    5
  9. 9

    Meh. For starters:

    * title tag should be preceded by the meta charset tag.
    * Scripts to the bottom of the page to make sure they do not hinder parallel downloads.
    * Header text should probably not be a heading.
    * Navigation should not be part of the header for the sake of both semantics and (future re-)styling.
    * The heading of the main section of the page should be the first-level heading.

    2
  10. 10

    its wrong to advise to “code for firefox” then tweak for IE, especially as you point out that ff3.5 can’tt deal with block-level anchors, which IE6 deals with easily.

    you should never code to specific rendering engines, as they all have bugs. code to the standards, then tweak for browsers.

    other than that, decent article.

    bruce (another html5 doctor)

    -1
  11. 11

    @Nathan I agree that a list inside a ‘nav’ is additional markup but navigation links should be delimited by more than white-space for accessibility.
    There should be a nav item element, otherwise ‘nav’ acts as a wrapper for the ‘ul’ which is already a block element so is a waste of time.

    -1
  12. 12

    Wow! Very nice article.

    18
  13. 14

    GREAT article!

    -1
  14. 15

    good tutorial, not sure weather or not to start coding in HTML5 or not yet tho! :/

    6
  15. 16

    Awesome! Going to give it a go later tonight.

    -1
  16. 17

    Hi

    Good write up & thanks for the links to the HTML 5 Doctor & HTML 5 Gallery, hope you find them useful. A few things I feel that I should point out to make use of even more HTML 5 are.

    * You can use the <time> element rather than <abbr> for the entry date, it’s more semantic and can still be used for microformats
    * The 2005-2009 paragraph would be more semantic in the now non-presentational <small> element
    * If you so wished each article could have a <h1> for it’s title
    * <figure> could include a <legend> (though until this is implemented in browsers you will have to use a <p class="legend"> replacement, see http://html5doctor.com/legend-not-such-a-legend-anymore/

    Hope that helps your readers.

    Cheers

    Rich Clark (a HTML 5 Doctor!)

    10
  17. 18

    great work! thanks for the insight.

    1
  18. 19

    Enrique Ramírez

    August 4, 2009 10:15 am

    Wow, nice feedback. Just what I expected!

    The first mission of this article was to show that HTML5 can indeed be used today with no visual differences for any browser (which was one of the main reasons HTML5 is being held back right now). Most of the issues commented above are precisely a “feature” and not a “bug” on this article.

    Take the figure, for example. I know I sould use a ‘legend’ tag inside, but as I said, it’s impossible to style it properly. a paragraph tag with a legend class on it will help with that, of course, didn’t think about it. Also, it is not missused, but badly exemplified. The featured box is meant to be a featured article which has an illustration with a caption. I couldn’t think of any other image but the smashing magazine logo, but that image should be an image relevant to the post. For example: if the featured article is about a newborn panda in China, that image could be a photo of the panda with a caption “Roger, the newborn panda next to his mother”. Sorry for not being clear about that.

    XHTML serialization was used to show that it is NOT needed to “adjust” your coding habits to yet another markup. You can write your markup the same way you’ve always done it. If you’re used to the HTML4 markup, go ahead. Come from an XHTML strict world? You’re welcome too! It does not matter. XHTML serialization gives some advantages that, to me, are very important (predictable, easier to understand code for example). But that was out of the main point of this article.

    Sorry about the “es” lang. Totally slipped my mind. You should change it to whatever language the document is in (in the example, it should’ve been “en”).

    As for all the other comments, thank you. You’ve made this article what I wanted it to be in the first place. Truth is, HTML5 is still under development, and it’ll be a while until we fully understand how and when to use each new element we have. This article here gives some ideas, but what really is worth gold are all your comments. No one is never completely right nor completely wrong, so share your thoughts!

    Finally, take heed of both Richard Clark’s (#4) and bruce’s (#19) comments. They both have cleared up stuff I’ve passed by or got wrong. :)

    -1
  19. 20

    Wow, this is very interesting! Great article.

    -3
  20. 21

    Just AWESOME! Thanks!

    -5
  21. 22

    Agree with Rich Clark (Comment #4); however this is still a good tutorial for anyone wishing to learn HTML5 and how to use it with progressive enhancement.

    Due to high penetration of non-compliant browsers, progressive enhancement techniques are going to play vital role for several years even if HTML5 recommendations are finalized today.

    2
  22. 23

    Very useful and interesting, loads of new things to learn – thanks for that one!

    -4
  23. 24

    I agree with sickdesigner (#13).

    0
  24. 25

    The header wrapping a single h2 in the articles is probably redundant as header is meant to represent “a group of introductory or navigational aids” (from the HTML5 spec).

    -5
  25. 26

    Teddy Zetterlund

    August 4, 2009 2:25 am

    sickdesigner: You might want to consider how that’ll effect the performance though.

    Enrique Ramírez: Instead of the “body” class, why not just use the body element as the page wrapper?

    2
  26. 27

    Great work expects some more !!!!

    -1
  27. 28

    “Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.”
    Ok, my website is HTML4.01 Transitional compliant – do I have to switch to HTML5? NO.
    There are no real needs to change any website to HTML5… and if there are any, XHTML webpages should be the first candidate to be “re-coded” to HTML5.
    A lot of useless/well-known information, good for beginners, not so good for intermediate and very bad as HTML5 presentation.

    -8
  28. 29

    5 thanks…

    1
  29. 30

    I agree with bruce, there should be a standard to write a code.

    0
  30. 31

    “The tag defines some content aside from the article it is placed in. The aside content should be related to the article’s content.” _ w3school

    You shouldn’t use an article tag in an aside one but the opposite.
    The aside and article tags you used for the sub-header part of the page may should be replaced by a unique section tag.

    -1
  31. 32

    Are you sure :last-child works with IE8.js. I use that script all the time to bootstrap CSS2/3 support in IE6 & 7 and was positive it didn’t work. And as far as I know IE8.js doesn’t work correctly with IE8 (the browser) so for that reason I’ve abandoned using :last-child but use first-child instead. You just need to think backwards – even though you might want a border or spacing to appear after an element, add it before and use :first-child, which has better browser support, from the first element.

    (Another alternative is to use the :not selector, e.g. elementName:not(:first-child), but again its support is lacking in IE, even up to IE8.)

    -1
  32. 33

    @shaggy

    Were you told you will need to change to html 5? NOOOOOOOOO!

    This article if faaaaaaaar from useless, if you think you know more – go ahead and prove it! ;)

    Great article.

    4
  33. 34

    Vinícius Borriello

    August 4, 2009 4:42 am

    Guess shaggy is far away from SEO future.

    Very well explained article. Great!

    -1
  34. 35

    Thanks for this article ! A great way to start with html 5 for me. There will always be people who know things better than anyone and who can’t help but criticize… Thanks for the work and thanks for sharing.

    0
  35. 36

    Just what I need to introduce myself to HTML5 and CSS3, great article cheers!

    0
  36. 37

    I just don’t think it’s wise to start using HTML 5 or CSS3 until it’s completely finished and supported in the browsers. If people start developing in the new code it’s probably going to cause a lot of issues later on…there seems to be a lot of hacks and unknowns by glancing at the code and reading over this post. Although, I think this was very informative.

    -6
  37. 38

    OMG, theres no way I can keep up with this stuff, I’m still trying to wrap my head around CCS 1 lol ^_^ Good article though!!

    0
  38. 39

    nice article, btw can i convert to blogger (blogspot) template?

    -1
  39. 40

    Good stuff… HTML 5 is great…easy…

    1
  40. 41

    Thanks! Really looking forward to all of the great HTML5 stuff to come.

    1
  41. 42

    @Aaron – HTML 4 isn’t properly implemented yet in IE, but I bet you have ‘already’ started using it?

    I would have liked to see a better explanation for why the author decided to use the XML serialisation here, other than just ‘because I prefer the way it looks’ – it means extra bytes on the page, so what advantage is gained?

    -1
  42. 43

    I feel the <figure> tag is misused to enclose the images, as in this case they are just logo graphics and do not really meet the criteria of a figure. Is there any reason why you have put them in <figure> tags, other than to have a container to which you can apply styles–or perhaps just to illustrate the use of the tag?

    -1
  43. 44

    James, I can’t speak for the author but I can for myself. XML serialization is easier to validate and takes the guess work out of coding for the developer. It’s also supported by most of the editing tools. Should the developer have to remember that he has to close a div but doesn’t have to close a p tag or shouldn’t it just be best practice to close all tags and carry a few extra bytes down the pipe?

    -1
  44. 45

    Thank you for share your knowledge with us…..

    3
  45. 46

    I’m curious about HTML 5 and SEO. I know there are major benefits from the improved semantics, yet they are not picked up yet by screen readers/ search engines, at least not now.

    If I start using HTML5 will there be a decrease/increase in the SEO of my sites?

    I’d like to make the switch yet SEO is very important to my clients and am a little weary. Does anyone have some info/sources about HTML 5 and current SEO?

    0
  46. 47

    Rich Clark, how is small no longer non-presentational. What does the search engine do with small? Doesn’t small just tell the renderer the same thing it always has, make this text small? Or can we now use it to distinguish characteristics of an object like I have a <small>dog</small>?

    0
  47. 48

    can give us

    0
  48. 49

    can give us all source files

    0
  49. 50

    Amazing article, got me really thinking about HTML5 in my future.

    0
  50. 51

    Surely the definitions of “progressive enhancement” and “graceful degradation” given here are misleading and contradictory?

    I’ve always understood graceful degradation to mean craftng your markup to make some semantic sense on lower-end / simpler user agents, with CSS doing the heavy lifting of making it look right on any modern browser – for example the habit of making nav bars out of ul lists. This is quite different from coding for modern browsers and fixing bugs as they appear – it’s all about making logical tag selections.

    Then progressive enhancement is the building of a site to work on a basic browser, but adding additional functionality such as AJAX form field enhancements, popup help or whatever to any browser with advanced CSS and/or scripting – write markup which fundamentally works for everyone, but add improvements for those that can.

    In essence then, the reference point for both is a fairly standard working browser, with PE allowing users of better browsers to have an improved experience and GD ensuring that simpler readers can still make some sense of it all. Forgive me if I have misunderstood, and it really is all about coding for the most advanced browsers and the least capable ones at the same time, and then bug fixing and improving afterwards…

    -2
  51. 52

    Why ad an unordered list to the nav ? The idea behind nav is to eliminate unordered lists as navigation.

    nav
    a
    a
    a
    a
    /nav

    is much smaller and easier to read. If you need to wrap the anchors you can add

    0
  52. 53

    Wahoo…
    Very impressive and useful post !
    I didn’t know html5, now, with your help, I understand a little bit more :)
    Thanks for sharing !

    1
  53. 54

    I wonder if using css reset would help with some of the gaps / extra margin / extra padding.

    Also, is it true that if you code in XHTML Strict that you don’t really have to use HTML 5?

    0
  54. 55

    Mateusz Gwóźdź

    August 4, 2009 8:29 am

    Hello everyone!
    it doesn’t make any sense for me… why to use for ex. tag instead of simple . It is not that I don’t want to change my techniques, cause I am always happy to learn more, but when it makes a point. We should discuss this actually… I ve been reading most of smashing articles, and I appreciate this one as well, thanks.
    What about some smashing chat/forum/skype group etc? Just an idea…
    and one more thing, u r describing all of these techniques for making nice websites so why not to apply some of them to yours? :) and one more idea is… “comments rss” for every article, so ppl who discuss can just subscribe instead of checking in browser “has anybody replied to my comment?”
    Thanks again! I truly love this website!

    -1
  55. 56

    Great tutorial Enrique!

    I’ll definitely be coming back to this one as I start to delve into the HTML5 wonder.

    0
  56. 57

    Doesn’t seem like you have used HTML5 to its full potential. It almost seems that you wrapped HTML4 with extra tags and annoyance rather than using the new features of HTML5. Its like an XML schema horribly designed.

    CSS3 looks amazing though, talk about flexibility.

    0
  57. 58

    Outstanding article, thanks so much !
    (Anyway, I agree with sickdesigner)

    1
  58. 59

    Jeffrey Sambells

    August 4, 2009 12:56 pm

    Nice. I’ll have to go update my blog with all this HTML5 goodness and get ahead of the curve.

    0
  59. 60

    Enrique Ramírez

    August 4, 2009 1:27 pm

    @sickdesigner (#13), @skube & @Tomás Camusso – Classes and IDs are still as important as they were before. More semantic tags doesn’t mean they won’t serve for different purposes on a website.

    Take the header tag, for example. I have one for the main page header and one for each article. I need a way of defining different uses of the same tags, and the best way continues to be ID’s and/or classes. Theorically we could use the role attribute, but styling it would be hard because of lack of cross-browser support for some CSS selectors.

    Also, for the time being, we need classes for microformats (at least until the “item” and “itemprop” attributes can be used).

    Yet, I agree I could’ve used less classes for the markup, but I tried to do it as straightforward and easy to understand as possible.

    2
  60. 61

    Shane - Inspiring Your Success

    August 4, 2009 1:32 pm

    Impressive. I never knew any of this! Still not sure why and are better than ?

    -1
  61. 62

    Useful, thanks.

    0
  62. 63

    I don’t understand using Content

    The H2 is already widely known as a heading element. I feel the same way about the tag. It is no different than . I think we have completely over complicated the issue with HTML 5 to some degree. I get that we are trying to specify what each element is to help setup the page structure, but this feels very limiting and focused more on developing a language for blogging.

    It seems that we have advanced in some respects with HTML5, but I feel a lot of what I’m seeing will be quickly depreciated once we get less development by community and more development by innovation.

    0
  63. 64

    Thank you for this great article.

    I can’t wait to get rid of IE6 (and 7 if we’re at it) and start using more very nice CSS 2/3 selectors.

    Keep on the good work..
    Greets

    0
  64. 65

    Would love to see this linked to a PDF – prints out horribly in both FF and IE8, and I’d love a hard copy to be able to peruse on the bus ride at night. Otherwise a fantastic article and well worth reading.

    0
  65. 66

    Like Brett #38, I am wondering how far Google has got in terms of getting its bots to interpret the meaning of all the new tags, and how this would affect SEO?

    As far I as can see, the main reason to want to start using HTML5 and having to put in extra markup to ensure all browsers are supported would be the additional semantic value offered by the new elements. However these are not a great deal of use if Google isn’t (yet) recognising them in a crawl, so what’s the point?

    -2
  66. 67

    @r_jake #65 – What I’ve found out about the current state of SEO, HTML5, and search engines is that even though HTML5 offers far more means for defining content with mark-up it will be a long time before search engines recognize the new mark-up and actually start basing search results off of the new markup. Yet what I’m wondering I guess is if I do start using HTML 5, will tags like header, nav, aside, and so on just be equal to say a div tag as far as semantics go, until the search engines recognize the markup? I would love to know, hear, learn more about this issue.

    -1
  67. 68

    Progressive enhancement:

    building first for the less capable, outdated browser and then enhance for the latest technologies

    Don’t forget that we should be building for accessibility too – design and code from the beginning not only for outdated browsers but also for other devices, such as assistive technologies. Too often we worry about what a design looks like in a browser – i.e. to a sighted person. Plenty of blind people use the web too and the Progressive Enhancement ideology, when applied properly, can make a website useable for them too.

    2
  68. 69

    This is a great article. The future looks bright with HTML5, CSS3 and advancements in PHP, Ruby and JQuery. At this point, which browsers support HTML5 and CSS3 designs like this?

    -2
  69. 70

    I think this article has good value – it’s an introduction to HTML5, rather than a definitive usage guide.

    I do agree with posts 13 18 19 23 35 48 – perhaps there’s scope for a follow up where these are taken into account. The point about not adding id and class attributes everywhere is valid and if you are more restrained here, your CSS becomes easier to maintain.

    I tested HTML in a load of browsers and found that much of the “IF IE” stuff can help on some other fringe browsers too – and it doesn’t harm any of them. For that reason, I don’t conditionally add the JavaScript and CSS shims, I just add them as standard. This gets things working in a few more browsers.

    I’m not planning on using HTML 5 on a client’s website for some time, but I am using it on my own website already in order to try it all out and keep up to speed (www.stevefenton.co.uk).- I know where my site appears in Google at the moment so I’ll keep an eye on that to see if anything changes. Knowing how Google operate, I imagine they are already ahead of the curve on HTML5 – not just in recognising the semantics but also in terms of spotting search-engine spammers who stuff rubbish into heading tags etc!

    0
  70. 71

    The definition for graceful degradation is totally wrong.

    Graceful degradation means you build a site using progressive enhancement so that it will degrade gracefully in less modern browsers, thereof the name “graceful degradation”. It doesn’t have anything to do with how you build the site.

    It just means that if you progressively enhance a site, meaning you use the most basic markup, supported by all browsers and then progressively add more advanced code, like JavaScript for instance, it will still look good in a browser that doesn’t support JavaScript or for users that have it turned off. They will just see the “lower level” of the site.

    I’m sure my explanation has flaws and is not very clear but Enrique Ramirez, you have no idea what you are talking about. SM, get some writers that have their facts right.

    -3
  71. 72

    Enrique Ramírez

    August 5, 2009 1:14 am

    @Andy (#67) – Totally agree. Good coding practices will inevitably lead to accessible code, and with the increasing use of assistive technologies to bring the web to more users, this is a really important matter.

    @Snookerman – I feel you, and I think I could’ve explained it way better than what I did. Main problem is that it’s not even an explanation, but a quick, single-lined example on both terms. Should have explained that by “technologies” I didn’t mean “browsers”, even though that was the example I used. Even though I didn’t go deeper on either of them, I left a link to a really nice article about them for further reading and to clarify any doubts anyone might have about the terms. Sorry if I confused anybody, but that link should save lifes. :)

    0
  72. 73

    Plenty of food for thought here – both in the article (huge thanks) and in the comments!

    0
  73. 74

    @Enrique Ramírez – Fair enough, that was just the first part I read and I just had to say what I said. Now having read the article, I have to say it’s pretty good.

    -3
  74. 75

    Thank you very much, Mr Enrique Ramírez!
    Great article, but where we (your audience) are able to read about all the new HTML 5 tags, changes and news?

    -2
  75. 76

    damn!!! this is wonderful… i tried some of these new css techniques and came out really well.
    thanks SM!

    0
  76. 77

    Cor van Noorloos

    August 6, 2009 1:13 am

    Great article!

    Does someone know which social bookmarking icons are used within this example?

    0
  77. 78

    HI,

    Great and good tutorial. Will spend some time on this once i get free time. Anyway thanks for the useful article.

    Thanks, Srinivas

    0
  78. 79

    You guys had me at “Graceful Degradation”. I was wondering about how to start implementing html5′s features but still be able to view in legacy browsers. I love you Smashing Magazine. I would totally do you. Stay sexy. ;D

    0
  79. 80

    @Bruce…I totally agree!

    0
  80. 81

    I was hitting a dry spell in my Web Design, but after reading this article I’ve started again. Thank you Smashing Magazine! gratefully!

    2
  81. 82

    Richard Eagleton

    August 9, 2009 10:18 pm

    Just wanted to say thanks for giving a good rundown of the HTML5 semantic elements.

    One question, though, is about the global-forms.css file. You said in the article you would go into it more but never did. So what is the purpose of it?

    Incidentally, in the code you have above for the social icons, you end up with a background for LastFM in IE7. I checked the final page code which works properly and the code above for Line 11 should be
    .social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
    ie. an extra dot after lastfm in the second selector. I also found that you missed including the ie.css file in the code above too (sorry, just a few things I discovered as I followed your code step-by-step)

    3
  82. 83

    Have u tested in Firefox 2? It does not work! =(

    0
  83. 84

    You can find a german article about how to build a html 5 layout from scratch here:
    http://www.cssguru.de/html-5-layout

    0
  84. 85

    Daniel De Aguiar

    August 12, 2009 8:18 am

    Great article. I agree with Teddy (#17) in regards to the usage of the ‘body’ class.

    0
  85. 86

    I put together a page based on this code that validates as html5 and a link to the files available for download at: ( the files are in a link at the bottom of the page ). I added a div and a background image, a few changes to colors, etc. Thank you to Enrique and everyone for the comments. I will be adding other pages soon based on this work and will keep following the comments.

    0
  86. 87

    Hi,

    There are a couple of bugs on the demo page for this tutorial.

    1. On the demo page your second heading “HTML5 in the year 2009″ floats over the top of the main heading “Smashing HTML5″.

    2. Across the top of the heading “Smashing HTML5″ the letters are chopped off.

    I am veiwing the page with the ie7 browser.

    Kind regards,

    Graeme

    0
  87. 88

    Is it just me or this isn’t working on IE8?
    It’s as if IE8 didn’t use “html5.js” :-(

    Anyone gets the same behaviour?

    0
  88. 89

    can i use this html / css code for my website, slightly modified? if yes, what are the terms ?

    0
  89. 90

    Nice Tutorial for beginners, how to create complete layout design using html5 and css3. Thanks for sharing.

    0
  90. 91

    really helping and giving latest tips about HTML5 even beginners also get help from this training.

    1
  91. 92

    Regarding graceful degradation and HTML 5- how can you achieve this graceful degradation in Internet Explorer if it has Javascript turned off? I realize that’s a very small percentage of the overall browsing public, but it should be considered. Once I switch off Javascript all of the HTML 5 elements lose their styling (and place in the DOM). The end result appears far from graceful.

    0
  92. 93

    Nice tutorial, or should I rather say example?
    Seems to round it up nicely…
    Thank’s for sharing!

    0
  93. 94

    I’m sorry I have to say this, but the example has nothing to do with HTML5. Except for the fact that there are custom (which are used in HTML5) tags.

    Example :
    The in HTML5 is a replacement of the , and tags especially for navigation purposes. So the use of the extra tag is useless.

    Besides that, HTML5 supports the use of custom tags (since there is no dtd), so why still use id’s and classes??? The only thing you have to do is add them with the IE-HTML5-fix, which is a lot nicer.

    Just my two cents, but if you do it, do it good.

    3
  94. 95

    I agree with this. Graceful degradation does not mean that in the article.

    0
  95. 96

    Nice Article!
    What will be the doctype for HTML 5?

    1
  96. 97

    Hello Sunita,

    the doctype for HTML 5 will probably be as used in the article. You find a detailed description in the current HTML 5 draft (http://dev.w3.org/html5/spec/Overview.html#the-doctype).

    1
  97. 98

    Genial…!!! Muchas gracias, he usado esta plantilla (me gusta mucho) para mi blog. Ahora intento ordenar mi antigua blogroll y bloques.

    Saludos.
    Helena.

    0
  98. 99

    I was about to start markup of a website in HTML5 and couldn’t find the place to start from. I was looking for EXACTLY something like this article from where I can make a start and move on, thank you for such a nice article :)

    2
  99. 100

    Thanks for a great article!

    One thing you forgot to do in stylesheets is to define :focus styles. Currently the page is inaccessible using keyboard because user can’t see what element is selected.

    1
  100. 101

    is there way to tie this into a WordPress, Blogger, or another CMS? It looks like it can display dynamic content but do we just insert the php handlers right into the template?

    0
  101. 102

    You missed the 52framework.com which allows you to build websites like the one listed on top of our completely cross browser framework! check it out http://www.52framework.com

    -2
  102. 103

    Late to the party but this:

    img.right figure.right {float: right; margin: 0 0 2em 2em;}
    img.left, figure.left {float: right; margin: 0 0 2em 2em;}

    Is bad form. There shouldn’t be any presentation description in the class or id names. What if you decide later you want the img on the right in the center, and the one on the left on the right? You shouldn’t have to edit the html to do a simple design change, just the css.

    0
  103. 104

    which code to centering all the content in your css?

    0
  104. 105

    Robert Wakeford

    March 10, 2010 3:08 pm

    I certainly agree that html5 should not be used in production environments yet, however, I’ve been in this game for over ten years now, and bitter experience has shown me that you need to start getting yourself aquainted new technologies, as soon as they appear on the horizon otherwise you suddenly discover that the competition has adopted them and you’re seriously out dated, and playing catch-up.

    I will certainly be creating sample html5 layouts to explore the new features.

    -1
  105. 106

    Robert Wakeford

    March 10, 2010 3:18 pm

    I certainly agree that html5 should not be used in production environments yet, however, I’ve been in this game for over ten years now, and bitter experience has shown me that you need to start getting yourself aquainted new technologies, as soon as they appear on the horizon otherwise you suddenly discover that the competition has addopted them and you’re seriously out dated, and playing catch-up.

    I will certainly be creating sample html5 layouts to explore the new features.

    2
  106. 107

    Divyesh Ardeshana

    March 11, 2010 11:28 am

    Nice help. I will apply ASAP :)
    I am sure I will success in it.
    Thanks

    -2
  107. 108

    I really can’t wait to get started in using HTML5, I’m really gonna enjoy using the video tag =]

    0
  108. 109

    nav
    a
    a
    a
    a
    /nav

    An unordered list is simply just a LIST. And all it’s doing is sorting the info that belongs the the set of links. STOP THINKING OF APPEARANCE WHEN WORKING WITH HTML!!! I recommend getting in the regular habit of disabling styles when browsing the web. In most cases, it doesn’t interfere with the functionality of the site you’re in, UNLESS YOUR HUMAN. That’s right, I said human. It’s important to remind ourselves that we humans are sharing the internet with search bots, who are MUCH MORE efficient at reading it if they can do so WITHOUT ALL THE WINDOW DRESSING.

    In Firefox, go to View > Page Style > No Style. It’s AWESOME!!!

    I like to toggle CSS on an off with a keyboard shortcut, which is (control – shift – S) when you have the Web Developer 1.1.8 extension installed.

    -5
  109. 110

    The first book in the world on the topic HTML5 is ‘deploying HTML5′ http://adityayadav.com/DeployingHTML5.aspx Let me know if something else should be covered I will post extra chapters on the website. There are 5-6 other books on Amazon available for pre-order but will ship only in 2-3 months.

    Do write in if you would like to share your experiences with HTML5.

    0
  110. 111

    Great post. This will be more helpful for web designers

    0
  111. 112

    LARS, STOP SHOUTING. YOU’RE HURTING MY EARS.

    7
  112. 113

    great tutorial. I found this from CSS heroes app on iPhone which is the best web-developer App I could find for the iPhone. Daily useful info here and on css heroes – Thanks and keep up the good work

    0
  113. 114

    SohoInteractive

    May 4, 2010 12:43 pm

    very useful article.
    we are using it on a project

    0
  114. 115

    Great article, finally had the time to read through it. Thumbs up.

    0
  115. 116

    Nice article, but did you drink a bit too much before you wrote

    The extras block is yet another section of our document. You might struggle for a while deciding whether an or a tag would be best for this section. In the end, this section could not be “considered separate from the main content” since it contains the blogroll links and some social information of the website. Thus, a element is more appropriate.

    It would be absurd to think that people visit the page just to see the blogroll and social networking links. I’m sure you didn’t intend to suggest that, so I can’t see how you can suggest that this is a section of the main content. Unless I’m badly mistaken, it is under no circumstances, and under no possible interpretation of the spec a section of the main content. The main content is the body of the (very good!) article. It’s what we came to the site to read. The extras are absolutely and unequivocally not a section, and fairly clearly an aside. I’m not splitting hairs. This is as clear as it could possibly be. (Even if you argued that it’s not an aside but, say, oh, maybe nav, then it’s still not a section of the main content.)

    -2
  116. 117

    I’m not too crazy about HTML5 :(

    I find it that it adds to much markup! For articles for example, adding the “article” tag inside “li” tag … I mean why is there a need for a list when they already added the “article” tag … can’t they just make an additional tag and write the markup like this: “article list” and “article”? Or why is there a need to put “nav” and then inside a list? I mean I hope they will work this further and simplify the markup! many of the new tags are useful, but at the moment I find it it also adds up too much markup instead of reducing it..

    0
  117. 118

    pretty good article but seem like some place wrong like the use of address tag in footer.

    0
  118. 119

    Just want to say a quick thanks for writing this article.

    I used it as a reference point to build our HTML5 front end for HiddenStyles.com, keep up the good work guys.

    Thanks

    0
  119. 120

    This is a really helpful tutorial.

    I have redesigned my website using HTML5.

    Have a look at samay.info

    :)

    Thanks
    Samay

    0
  120. 121

    As there’s only one stylesheet language for the web, CSS, you can use :)

    0
  121. 122

    {link rel="stylesheet" href="css/main.css" /}
    Alos into the aside part:
    {hgroup}
    {h1}Featured Article{/h1}
    {h2}...{/h2}
    {/hgroup}

    0
  122. 123

    Wow, an impressive and very useful tutorial for creating a modern html5 and css3 layout.
    There are so much new possibilities for us. And even the old s***ing browsers are supported like IE6 and less. I’m glad to read this article. So I’m able to develop my own new website!

    Thanks a lot Smashing’s

    0
  123. 124

    lang=”es” … :) Great article Enrique. I’ve worked my way through the tutorial. I agree with your comments about the drawbacks of HTML5 – as I write it is an un-tuned guitar not ready to go on stage but the potential for killer music is not far away…

    0
  124. 125

    Thank you SO much for this article!

    It is seriously, the EXACT thing I was looking for! I can’t wait to test this out with my own site, and thanks so much again!

    0
  125. 126

    This is a great tutorial to show you about HTML5. One big problem i didnt see until quite far into redoing my website, it isnt cross-browser safe. Chrome and Firefox have very different font sizes. but a simple conditional statement sorted it out.

    Setting standard font size to 62.5% and chrome/safari to 87.5%

    0
  126. 127

    That was a nice article. But it has made me realise that working in HTML5 will be an exercise in hackery. For my sanity’s sake I think I will wait until later when browser support has matured. There are enough quirks as it is when working with HTML4. If you take the shiv approach to HTML5 development, can you imagine the diabolical issues which await you in some browsers once your page becomes mildly complicated?

    1
  127. 128

    It’s startling how crazy this looks in FireFox 2. Was that browser always worst than IE6?! Its market share is next to nil thankfully. http://www.w3schools.com/browsers/browsers_firefox.asp

    0
  128. 129

    this is great – it is so simple but yet powerful

    0
  129. 130

    is not needed in html5. It can be:

    Instead

    0
  130. 131

    Create a #registration #form using #HTML5 and #CSS3 http://bit.ly/brbTDz

    0
  131. 132

    prakash kumar bhola

    August 3, 2010 9:01 am

    Hey. good work. really nice tutorial for us….

    0
  132. 133

    Great! thanks for sharing!

    0
  133. 134

    The CSS for this is a nightmare, good luck trying to change anything. Also the html5 tags have an id and a class as well. What’s that about? Styled 3 times that’s what. Confusing as hell.

    -1
  134. 135

    very good artical ! thinks for working

    0
  135. 136

    Awesome detail in this article. Great resource. The big question is when to dive into HTML5 completely. Great article.

    1
  136. 137

    wow, very nice article, thanks .

    2
  137. 138
  138. 139

    Thanks for the article.
    When i am validating your example code it shows me the 2 warnings tell me how to solve these warnings.

    1
  139. 140

    I was wondering, this is a fantastic article and clearly HTML5 specifications are still being refined but will it be updated with the new rules of how <section> are to be used?

    http://html5doctor.com/the-section-element/

    0
  140. 141

    very nice thanks to shar this article

    2
  141. 142

    What if the Feature block was bigger on the home page. I mean this is the home page, how is the Featured news article just something meh off to the “aside” and not really completely related to the rest of the home page? If you look at the section of 3 articles, that section is also tangentially related but separate from the Featured content too. So it can be an aside to the featured news if you look at it from another angle. So does it depend on the mindset of the operator of the site? If I consider my featured news block the most important and main thing on my home page I should label it section and the rest of other articles called the aside?

    2
  142. 143

    Nice tutorial! It works great!

    0
  143. 144

    Very Nice. Big Thanks!

    How About Compatibility for All Browsers with Html5 ?

    0
  144. 145

    Don´t forget this 12 Incredible HTML5 Experiments

    Check this out: http://www.dreamincoloronline.com/12-incredible-html5-experiments/

    2
  145. 146

    very impressed with html 5.0,thanks to share some good things about html5.0.

    0
  146. 147

    Well thats was was one of the most informative and easy-to-read web articles I have read in ages. Thanks… it most certainly has helped me (a seasoned web coder). 10/10 !

    0
  147. 148

    Very good, but you’ve overlook the advanced hierarchy of h1, h2, h3 tags that HMTL5 allows.
    Although your approach is valid, it may have been preferable to use h1 and h2 in your aside and article headers rather than h2 and h3.
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections

    0
  148. 149

    in the paragraph “Limiting our blocks”, line 4 of the code listing, did you mean float:left?

    0
  149. 150

    wrap content on Firefox 3.6 is still the same as Firefox 3.5.

    Thanks for your good article.

    3
  150. 151

    christopher cuizon

    January 2, 2011 6:50 pm

    Can’t wait for this feature to be launch oh yeah m/ no more scripting on ie
    very useful
    hehehe…….

    2
  151. 152

    The tag is meant to be used for small text and side comments. Personally, I’d use it for copyright and small print – since they’re not massively important unless someone is looking for them.

    0
  152. 153

    Please explain that import.reset.css file more and what it is suppose to do. I have no idea what it is and does it have to be in the css?

    1
  153. 154

    Graceful degradation eh?

    If someone wishes to use this in a serious webpage, i’d advise to load the final product link above in ie 7 or 8 with javascript disabled….

    That not what i call graceful degradation…

    -3
  154. 155

    please remove this article from the internet as it is years old and now stale as of Feb 2011

    “Smashing Magazine
    Coding A HTML 5 Layout From Scratch”

    -3
  155. 156

    Really nice article. I would suggest that anyone who wants to know more about HTML5 goes out and buys Smashing Magzines book on it.

    Why the use of @import in your css? Using @import has a performance impact…. I know this was just an article about coding HTML5 and not about ultra efficient html/css.

    Groumphy Smurf – W3schools is such a helpful site but I would take anything the site with a grain of salt, that site is grossly inaccurate especially when it comes to HTML5. See this http://w3fools.com/ to see why.

    sickdesigner – Using of > + etc. to style the specific element in relation to those around it, is from CSS 2.1. Browsers have been slow to implement some of it. Also what is wrong with lots of ID’s – using #element in a style sheet is quicker for rendering than selecting an actually element. Though i understand where you are coming from, I hate divitis and get annoying when people use heaps of divs instead of semantic elements,

    (What a ranter I am)

    0
  156. 157

    after i have studied this article ..i have successfully implemented as above for single column layout but when i tried the 2 column layout i’m stocked, confused.. how to float aside portion and section portion in the body. do i need different class like float-left or i have to use div again?

    0
  157. 158

    awesome article …Learned alot ! HTML 5 rocks…..

    0
  158. 159

    great interesting and i find it very useful

    0
  159. 160

    I noticed the CSS on this page and the CSS on the final product page differ. In particular with the #content tag.

    The article is still informative as some of the item used are explain on this page, but using the rendered example page opens questions.

    0
  160. 161

    Great, now i can update my website

    3
  161. 162

    /* Main Nav */
    #banner nav {
    background: #000305;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 2em auto;
    padding: 0;
    text-align: center;
    width: 800px;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
    #banner nav li {float: left; display: inline; margin: 0;}

    #banner nav a:link, #banner nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 1.5em;
    text-decoration: none;
    }
    #banner nav a:hover, #banner nav a:active,
    #banner nav .active a:link, #banner nav .active a:visited {
    background: #C74451;
    color: #fff;
    text-shadow: none !important;
    }

    #banner nav li:first-child a {
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }

    0
  162. 163

    In the sentence “That’s were Progressive Enhancement and Graceful Degradation come into play,” ‘were’ needs to be replaced with ‘where’. Just a humble suggestion :)

    5
  163. 164

    Very Very nice and knowledgeable and gr8 article

    0
  164. 165

    For featured article block, “section” is more suitable than “aside”.
    Because, “aside” is more of for supportive content, while, “Featured Article” block is kind of major content.

    0
  165. 166
  166. 167

    HTML5.. Next generation of web.. truly said. although its in speed to bang everywhere in the web..
    in my words its not a new boat for us.. its just enhanced version of the same markup. So why should we fear to use? lets Rock with it.

    Thank you very much for all the discussions over here.
    Mufeed Ahmad

    3
  167. 168

    Really informative article and so well written. Thanks!

    0
  168. 169

    Above given HTML5 example is too good as they have try to figure out its coding output and all. Thanks for the same.

    -5
  169. 170

    I don’t understand something:
    html5 seems to be still in progress and not valid.
    For instance there is a change proposal in w3C to suppress mainly because it leads to complexity regarding h1-h6 elements
    Then starting with Html5 seems to be dangerous
    ????????????

    0
  170. 171

    previously I talked about hgroup element

    0
  171. 172

    Nice Article!
    This is a really helpful tutorial.
    thanks to share some good things about html5.

    Thanks
    irfan

    0
  172. 173

    i’ve got a question. sometimes you use “em”, in some other cases “px”.. what are the differences? is it crucial to use them appropriately?

    by the way.. thanks for this tutorial. it’s amazing. xD

    0
  173. 174

    SM
    This article is more contemporary now than ever.
    Thanks for detailed explanation. I have been writing HTML5 and CSS3 for over an year but still found this article having vivid explanation and usage of new tags and techniques.

    0
  174. 175

    Marvelous!! It’s such articles that make one move from novice to a pro in an overnight! :)

    0
  175. 176
  176. 177

    Hi all,
    I don’t want to be pedantic but … the html 5 article is great and I for one am all in favour of correct grammar and semantic html, etc … however, can we please get the semantics of the article Title in correct English please

    it is ‘AN’ html 5 layout NOT ‘A’ html 5 layout

    just does not look right…

    1
  177. 178

    Is missing the heading at aside, section and nav… if you use the outliner you´ll check that thoose parts are “Untitle Section”, “Untitle nav”…

    -1
  178. 179

    Thanks …

    1
  179. 180

    Cool article.

    You could also abuse the body tag to center the content:

    body { margin: 0 auto; width: 800px; }

    Then you can eliminate the .body classes..

    1
  180. 181

    …for someone like myself who’s a novice and learning web design, some of the comments are a bit overwhelming! this would seem like a great tutorial but there seems to be quite a few comments that give another method of doing things! with web design there’s a million ways to skin a cat (figuratively speaking, not literally!) but is the tutorial not just one way of doing things? as i am in the process of trying to learn web standards to make my work more accessible, i wonder if i should try html5 or leave alone for now? it’s all a learning curve i s’pose….

    1
  181. 182

    Useful article, at least for me. Thanks for sharing.

    0
  182. 183

    Not working rounded corners, shadows in ie6,7,8

    -1
  183. 184

    You wouldn’t happen to have a direct link to the source files for this example?

    Many Thanks

    Max

    -1
  184. 185

    Why we use ” with some of the fonts. e.g. ‘Trebuchet MS’

    1
  185. 186

    Article needs some proofing. Title should be, “Coding An HTML 5 Layout From Scratch” and “aftermath” is one word.

    0
  186. 187

    Thank you for the tutorial. It would be nice if the source files are available. The images would help in determining if you were to practice writing HTML5

    0
  187. 188

    Anita Clark Realtor

    January 5, 2012 5:38 pm

    For an html rookie like me, this is a very good resource. The code is easy to follow and I like that you provided a snapshot of what the page would look like from a web standpoint.

    0
  188. 189

    this tutorial royally SUCKS it doesn’t conclude with source files… things are all over the place.. and above all the CSS does not work :(

    -1

    -3
  189. 190

    Thanks for this page, but your markup and css don’t render as advertised.
    It would be great if you could deliver html and css that actual render as expected
    so I could be confident in your competence. I’m left not trusting anything you
    presented.

    Jack

    -3
  190. 191

    Thanks for the article. I can learn a lot not only about HTML5 and CSS3, but also about the standard of coding html and css that should keep in mind.

    Anyway THANKS again.

    Gokul

    0
  191. 192

    Hi, I am going make application like twitter but my own application do not want to use api of twitter so can you please tell me if i Use HTML 5 to develop application does it good idea? and if you know any sample Twit application but not twitter can you please suggest me. Thanking you in advance

    1
  192. 193

    Awesome write up, this is huge! I’ve been out of the loop of things for way too long when it comes to HTML and CSS, this was a great bump to bringing me up to speed, also reintroduced me to better habits such as using globals. I’ve looked into CSS pre-processor frameworks, yet I’ve been too busy with client work to give them a shot. I think I’m going to try converting this over to using “less” as my “Hello World” into CSS pre-processor f-work. Do you use them at all?

    0
  193. 194

    really nice. keep it up

    0
  194. 195

    Ava Richardson

    May 17, 2012 2:34 pm

    Wow this is quite a beginning tutorial! Great job!

    A group of student teachers at my university produced a series of HTML5 how to videos to introduce others to the basics of HTML5 coding and CSS style sheets. Our free videos include instructions and examples so you can follow along at home with the online instructor. Check it out at:
    HTML5 &CSS3 Video Tutorials by myCSULA

    Thanks!

    0
  195. 196

    How can I create an interactive map like this: http://se.deltasd.bc.ca/vision/ while using HTML5?

    0
  196. 197

    This guy got the point. It’s an aside where IT HAS TO BE an aside, blogroll or social links are not related to the content. Related to the site? Yes! The content? Hell No!

    Why did this guy got -1?

    0
  197. 198

    If you do a Globalogiq search for “<!DOCTYPE HTML>” (case insensitive) you can get a bunch of examples of sites with working HTML5. It should be enough to get you started.

    0
  198. 199

    I tried to change my profile picture, i selected a random image and it started loading but it never completed. Yes, i’m talking about my Avatar/Profile picture which doesn’t responds. Even if the loading gets completed, the profile picture does not shows..
    Help me please

    0
  199. 200

    wooow,,,,good job (y)
    whether it can run on blogspot?

    1
  200. 201

    Best tutorial !!! Thanks !!!

    0
  201. 202

    Great article! Don’t forget the ARIA landmark roles for accessibility :-) http://www.flickr.com/photos/odmag/8467120722/

    0
  202. 203

    Great stuff.Id like to suggest taking a look at things like cheese. What do you think?http://nguontien.com {Loans|fast cash loans|pawn|pledge|car loan repayment}

    -2
  203. 204

    Rajanix Acharya

    May 19, 2013 3:44 am

    Nice layout

    0
  204. 205

    Maybe I am missing something here but you mentioned that you would be discussing the global forms css a bit later. You jumped right into styling for the various sections (which I thought were to be added to the framework skeleton of the main css). Where is this discussion and do you have a summed up version of the css like you did on the markup?

    0
  205. 206

    Anurag Birthare

    June 27, 2013 6:16 am

    Hi,

    It is really explained nicely. One thing I want to ask you is in the last example above, you did not show how to use anchor on social icons using HTML5 (i.e. using a[n='b'] concept).

    Please clarify this. Apart from this, post is very fruitful.

    Thanks,
    Anurag Birthare

    0
  206. 207

    Where are the source files. What is the point of the tutorial? We cannot make it the same because the css isn’t working at all and we have no images etc. Please finish this!

    0
  207. 208

    Great overview! Thanks for taking the time and sharing.

    0
  208. 209

    Denver Prophit Jr.

    November 6, 2013 7:58 pm

    the element was removed from HTML5 by w3c. See http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/

    0
  209. 210

    Its Worth It…….
    Thanks a lot…..

    0
  210. 211
  211. 212
  212. 213
  213. 214
  214. 215

    Wonderful work.. Thanks for sharing.

    0
  215. 216

    This tutorial was excellent. Another hands-on intro to HTML5 & CSS (where you can build a personal splash page) you can see here: http://www.thefirehoseproject.com/lessons/splash-page

    0
  216. 217

    What a great article this has been,keep on with the great work

    0

↑ Back to top