HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.

The new specifications has added quite a few interesting and useful tags for structuring your markup.
In today’s post, we would like to showcase some of the best blogs and websites in the industry built with HTML5+CSS3. At the end of the post we would like you to check out detailed write-ups and tutorials that aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. Let’s get started marking up the blog page.

Showcase Of Beautiful Website built with HTML5+CSS3

- Full Frontal

full-frontal

- Sketchpad

Sketchpad Is a No-Flash-Required HTML5 Painting App.

sketchpad

- EnergyCell

energycell

- Zoocha

Zoocha

- Idea Foundry

Idea Foundry

- Tableless

Tableless

- Giovannitufo

giovannitufo

- DesignIntellection

designintellection

- Antilight

Antilight

- TheDesignSuperhero

thedesignsuperhero

- On Air

on-air

- SlimKiwi

slimkiwi

- Information Highwayman

Information Highwayman

Learning how to create elegant and working HTML5 Layouts

1. Have a Field Day with HTML5 Forms

Have a Field Day with HTML5 Forms

Here we’re going to take a look at how to style a beautiful HTML5 payment form using some advanced CSS and latest CSS3 techniques. Let’s have a look at the markup:

<form id=payment>
    <fieldset>
         <legend>Your details</legend>
         <ol>
                <li>
                     <label for=name>Name</label>
                     <input id=name name=name type=text placeholder="First and last name" required autofocus>
                </li>

2. Coding A HTML 5 Layout From Scratch

Coding A HTML 5 Layout From Scratch

A very basic layout 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. At the end of this tutorial 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.
<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 -->

Check out the demo here.

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

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

In this tutorial, we are going to learn how to build a blog page using next-generation techniques from HTML 5 and CSS 3. Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer.

Take a look at the markup:

<!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>

Check out the demo here.

4. Structural tags in HTML5

Structural tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s take a look at how we would put together a typical blog page with our new structural tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>

Further Resources:

  • - 70 Must-Have CSS3 and HTML5 Tutorials and Resources
  • - Introduction to CSS3
  • - Using CSS3
  • - CSS3 Exciting Functions and Features: 30+ Useful Tutorials
  • - Yes, You Can Use HTML 5 Today!
  • - Thinking About HTML 5 canvas Accessibility
  • - HTML5 Gallery
  • - HTML5 Gallery