HTML 5 and CSS 3: The Techniques You'll Soon be Using

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

on Jul 6th 2009 with 601 comments
Tutorial Details
  • Technology: CSS3, HTML 5
  • Difficulty: Intermediate
  • Completion Time: 1-2 hours

Final Product What You'll Be Creating

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

1. HTML 5

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

2. Basic Structure

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

Diagram of basic structure

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

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

</body>
</html>

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

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

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

3. Marking Up the Navigation

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

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

4. Marking Up the Introduction

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

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

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

5. Marking Up the Main Content Area

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

Marking up the Blog Post

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

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

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

The header element is used to present the header and metadata about the blog post. We tell the user when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a

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

Marking up the Comments

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

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

Marking up the Comment Form

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

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

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

Marking up the Sidebar and Footer

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

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

6. Styling with CSS 3

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

Basic Setup

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

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

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

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

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

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

p {
	padding-bottom: 22px;
}

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

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

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

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

7. Styling the Navigation

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

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

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

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

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

nav ul li {
	float: left;
}

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

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

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

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

8. Styling the Introduction

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9. Styling the Content Area and Sidebar

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

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

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

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

#content {
	display: table;
}

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

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

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

10. Styling the Blog Post

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

Multiple columns

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

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

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

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

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

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

	.blogPost header {
		column-span: all;
	}

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

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

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

Box shadow

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

.blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
}
Illustration describing how the browsers render the box-shadow CSS property

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

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

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

11. Zebra-striping the Comments

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

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

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

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

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

Alternatively, you could simply write:

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

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

Styling the Comment Form, Footer and Sidebar

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

12. The Final Design

See the final design with all styling applied.

Compatibility

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

Conclusion

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


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

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

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • http://www.cheapsunglassesdeal.com/ cheapsunglassesdeal.com

    by watched this article, I didn’t reply immediately, since I fear my vulgar replies will compromise this such beautiful article. But I replied still, if I can’t leave my name behind such fascinating article, I will die with a grievance or everlasting regret! Leaving my name behind such matter, it is pride and honor for me!

  • http://designpulps.x10.mx/ Devang

    Great post. very useful :)

    • http://gedpracticetestsonlines.com/ ged prep

      This is a perfect start for someone looking to design a website. It’s very easy to follow and helped me brush up on my skills.

      • http://www.drdremonsterbeatsheadphones.com/ dre headphone

        And a thank you for your design skills; way much better than mine are!
        Regards,

  • http://www.dxevolution.com Md Jaliluzzaman James

    This is really great and helpful.

  • http://graphicalinsight.com Rob

    I have been fooling around with HTML5, while my staple is XHTML1.1

    This article shows some very appealing graphics.. I can’t wait for the spec &/or browsers catch up with the APIS….

    Thanks again,
    ROb

  • Anna

    Can anyone assist me with getting the comment form to work.

  • Nya Chan

    Nice one.
    Good for the beginners who try to use HTML 5 like me …
    Thanks for sharing this ^^

  • http://www.toryburchoutletnew.com/ toryburchoutletnew

    Thanks so much for providing individuals with such a spectacular possibility to read critical reviews from this web site. It is always very useful and also full of amusement for me personally and my office acquaintances to visit your web site no less than three times weekly to read the fresh guidance you have got. Of course, we are usually amazed for the surprising things served by you.

  • http://www.craigmoussa.com Craig Moussa

    With the tag, I don’t see why you’ve put it into unordered lists, since the nav tag does what you’re making the UL do, just seems like overkill and pointless.

  • http://www.targetweb.it Riccardo Mel

    Awesome tuts! thanks!

  • http://www.artlab.si Joze

    Can this site along with the comments work without php? Probably not, or?
    Otherwise Great Tutorial!

    Thanks.

  • http://www.webscatalunya.com Otger

    Two years later and still is one of the best posts about html5

  • Samuel

    It doesn’t work… it’s too complicated to understand. requires a lot of time to grasp and its poorly exemplified.

  • codeLine

    This is exactly what I was looking for! Thanks!

  • web tasarım izmir

    nice review ,and awesome article thanks for the post, I found this blog just yet but I am adding you to my bookmarks

  • http://whatuget.blogspot.com Ladida Cafe

    I have to learn more . .

  • Amanda

    Does anyone know the code to add to your html doc to call the css?

  • http://www.globi.ro Oferte Turistice

    Awsome tutorial! I wonder when I could code using HTML5 & CSS3 and read by everyone… Major browsers already support this already…

  • http://www.marcjacobshandbagsus.com/ marc jacobs handbags us

    It is so luck to see the article today, I found this very useful! Thanks for your sharing!

  • Sanju

    It’s good Html5 tutorial thanks for this kind of post

  • http://www.tabletpcunion.com tabletpcunion

    Great post and introduction. Thanks for sharing

  • http://www.kimswebdesign.com.au Kim

    Thanks for writing such a great, easy-to-follow article! HTML5 and css3 rocks!

  • http://joko-motivasi.blogspot.com/ kumpulan motivasi stia aan

    :)

  • http://www.toryburchoutletnow.com/ toryburchoutletnow

    Tory burch outlet online was lucky to see your website! your website can reflect intellectual charm. Tory burch outlet online will as always watching you website. Many thanks with regard to discussing.

  • http://www.michaelkorsoutletsales.com michaelkorsoutletsales

    Read a son of the building Lord, my mood is to be calm. As Lao tze have cloud: great music and sound, elephant invisible. I finally understand what I lack now is what, exactly the building Lord that kind of persist to pursue to the truth and the building Lord that kind of to ideal hard practice produce of decorous feeling.

  • http://yoedha.com yoedha

    like :) :)

  • Rimboe

    Hi,

    Good tutorial! forum HTML5 in http://www.foroshtml5.com ! great tutorials!

  • http://www.helloeverything.co.uk David

    Great round up of HTML5 and CSS3 – Always great to see practical examples….

  • Tomer

    sadly i recently discover the magic of html5 and css3, i start a new project for school ,
    and i was worrying about a sticky footer.
    tell me if is not, but look like now, there is only need a
    at least now most of majors browser can use these tags, one thing still drive me crazy… the horror of internet explorer 6.
    so what did you suggest me, embrace html5, or still using weird techniques for giving support to old browser

  • http://www.cheapguccioutletusa.com cheapguccioutletusa

    The building Lord, you write is too great. The only thing I can do, only the top this post to this matter.

  • http://www.perfumeandcolognemall.com calvin klein perfume

    PerfumeAndCologneMall.com is an online women\’s perfume and men\’s cologne store offering high quality designer items such as Marc Jacobs, Burberry Versace, Ed Hardy, Calvin Klein, Hugo Boss, Azzaro, Ralph Lauren, Carolina Herrera, Juicy Couture and more for an extremely affordable prices. Check us out!

  • http://www.dojovillage.com Paul LaFlank

    Lol, there is certainly without doubt that these up and coming Martial Arts like every other athlete is larger, much better, faster, stronger and more skilled. Weather it is Conventional Martial Arts or MMA, starting at such a young age is such an enormous advantage.

  • munib

    nyc!

  • Bas

    How to get the sticky footer and the faux column effect?

  • http://www.filebankruptcyhouston.com/ foreclosure help in Houston

    Every month, lots of people fall victim to debt consolidation scams. And while you certainly don’t want to get wrapped up in something like that, you also might be apprehensive about the alternative: declaring bankruptcy. But the truth is, you could benefit from hiring an experienced Houston bankruptcy lawyer.

  • http://artpulse.me/ Pablo Neirotti

    Please I want everyone to note, for the sake of starting HTML5 off with good practices, that should NEVER be used as a sidebar. The tag was created to provide additional content of the main article, that would be relevant but not necessary (so in theory, you can not have the element in the page and still have a complete functional page).

    It is not as a way to navigate. If you wish to use a sidebar, you can use a like always, and a inside of it (or simply if that meets your needs).

  • Vinay Aggarwal

    Hey! Thanx for such a great article.

  • Shane

    Heads up… You left the closing “;” off of font-weight in the #intro h2 id

  • ssq

    I would like to watch your article in my entire life. this article conceives outline novel, the topic has the mental strategy only, the paragraph is clear , fall the rise and fall, the main line is clear, fascinating, mild the extraordinary literature from bottom inside, is witty it may be said, a classic, is a model that my generation should the study.
    http://www.burberryoutletmaker.com/

  • http://www.kanttekening.net/ Paul

    Thanks for the article!

    Since my php skills are much, much, much better than my design skills, I choose to look for a lay out on the web for my new website. I found this one and modifieded it a bit, since it was not totally html5 valid:
    http://validator.w3.org/check?uri=http%3A%2F%2Fd2o0t5hpnwv4c1.cloudfront.net%2F373_html5%2Ffinal%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

    After fixing these things, I made some other small changes but I really like to thank you for your introduction to html5; I’ve never done anything with it before.

    And a thank you for your design skills; way much better than mine are!
    Regards,
    Paul
    http://www.kanttekening.net (sorry, content is in Dutch)

  • http://www.random-blog.com/ Random blog

    Finally a list of clear and easy tips! good article!

  • Prashant

    Wow. I mean it’s just amazing how much you can learn from a tutorial which is easy to understand. Great work. Have been finding online but never got CSS3 and HTML5 tuts like these.

  • http://www.cheapuggclassictallsale.com Ugg Winter Boots

    These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the post

  • Rolf

    As usual, doesn’t work when this tutorial is attempted, step-by-step. There are missing steps, and holes in this.

    Amateur, as usual.

  • http://www.slimming-products.net/ slimming products

    I was awaiting for such an article and I have gained some useful information from this site Thanks for sharing this information, There is no better way to give information to people than on this way.The right information always find way to targeted people.I completily realize you admin.Great recourse of info.

  • http://www.arhytutorial.blogspot.com Arhy Tutorial

    ini sangat sulit bagi saya untuk dimengerti..
    kedepannya saya akan terus mempelajari HTML 5 dan CSS 3

  • http://willstechcafe.wordpress.com Will

    While the market share of browsers that do not support HTML5/CSS3 is still representative (from 25% to 40% today, approximately), I don’t feel inclined to use it. I am crazy to put all this stuff in action, but I feel I have to wait, because websites are not developed for web developers, but for the general audience. In the end, it is the public, with its browser update rate, who defines when we can start doing all the cool stuff.

  • gap

    good article!

  • http://www.alkits.com Software and IT Solutions

    I like the step by step guide and snippets and on a side note, this theme looks pretty nice.

  • http://addmeonfacebook! Gian

    Well currently HTML5 is not supported by lower version of IE but there is a way to implement it, using javascript, if you want to make this work just put these line of code in the head tag.

    document.createElement(“article”);

    var e = (“abbr,article,aside,audio,canvas,datalist,details,” +
    “figure,footer,header,hgroup,mark,menu,meter,nav,output,” +
    “progress,section,time,video”).split(‘,’);
    for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
    }

    this code gives older browser to use html5 tags like magic :) thanks to
    http://diveintohtml5.org
    for giving this good tutorial on how to use html5

    Happy Coding! ;)

  • http://grafitr.com html5-css3

    Thank you for this wonderful article

← Older Comments
Newer Comments →