HTML 5 is a breakthrough which will improve the sites from design view point, seo etc. It when combined with css3 can make amazing web sites. For this you should check out this collection of all HTML 4 & 5 Tags reference sheet.

The Most prominent additions in HTML 5 are tags like <header>, <footer>, <aside>, <nav>, <audio> etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags i listed above clearly explains that :

• <header> = Header (Head area of the site)
• <nav> = Navigation (Menu/Navigation Area)
• <footer> = Footer Area
• <aside> = An area on a side (Side Bar)

Simple HTML 5 Tutorial

We will make a very very Simple web page with HTML 5 and styling with CSS 3. This is how the final result will look like :

Demo and Source:

• View Demo
• Download Source

Starting HTML Tutorial Code:

The Structure would be like this :

Defining Header Tag:

Doctype and Html Lang Added. Thanks for the suggestion Mark for correcting validation.

Defining Navigation Area with Few links in it:

Stylizing the Navigation with CSS3 for Rounded Corners:

You can Also use px in Nav width instead of %. In this tutorial’s case you can add width=”960px” .

Then we Defined a DIV for the main content area and in it defined <section> and <article> area where the main content of the page is (the two paragraphs). You can see details in the source with comments for better understanding. The image inserted is also a simple div with css3 in it to show the image in background and rounded corners.

After that comes a very handy and prominent new addition in HTML 5. The <aside> tag which works like a sidebar without any extra css to move it on a side.

Defining Sidebar <aside>:

The UL (unordered list ) is repeated three times in the code.  Its just for giving an idea how sections will look like and links are dummy as well you can put blogrolls, categories etc. anything you like.

Defining the Footer:

Stylizing the Footer:

What’s Covered so Far:

• So far we have learned how to make simple HTML 5 Tags Layout
• Understanding of the Tags and their behaviors
• CSS3 for Rounded Corners and Text Shadows

Download Source Here

As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

Goodbye <div> soup, hello semantic markup

In the past, designers wrestled with semantically incorrect table-based layouts. Eventually, thanks to revolutionary thinking from the likes of Jeffrey Zeldman and Eric Meyer, savvy designers embraced more semantically correct layout methods, structuring their pages with <div> elements instead of tables, and using external stylesheets for presentation. Unfortunately, complex designs require significant differentiation of underlying structural elements, which commonly results in the “<div>-soup” syndrome. Perhaps this looks familiar:

<div id="news">
   <div>
      <div>
         <div>
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </div>
         <div>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </div>
         <div>
            <p>Tags: HMTL, code, demo</p>
         </div>
      </div>
      <div>
         <div>
            <h1>Tangential Information</h1>
         </div>
         <div>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </div>
         <div>
            <p>Tags: HMTL, code, demo</p>
         </div>
      </div>
   </div>
</div>

While slightly contrived, this example serves to illustrate the structural redundancy of designing complex layouts with HTML 4 (as well as XHTML 1.1 et al). Fortunately, HTML 5 alleviates <div>-soup syndrome by giving us a new set of structural elements. These new HTML 5 elements replace meaningless <div>s with more semantically accurate definitions, and in doing so provide more “natural” CSS hooks with which to style the document. With HTML 5, our example evolves:

<section>
   <section>
      <article>
         <header>
            <h1>Div Soup Demonstration</h1>
            <p>Posted on July 11th, 2009</p>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </article>
      <aside>
         <header>
            <h1>Tangential Information</h1>
         </header>
         <section>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
            <p>Lorem ipsum text blah blah blah.</p>
         </section>
         <footer>
            <p>Tags: HMTL, code, demo</p>
         </footer>
      </aside>
   </section>
</section>

As you can see, HTML 5 enables us to replace our multitude of <div>s with semantically meaningful structural elements. This semantic specificity not only improves the underlying quality and meaningfulness of our web pages, but also enables us to remove many of the class and id attributes that were previously required for targeting our CSS. In fact, CSS 3 makes it possible to eliminate virtually all class and id attributes.

Goodbye class attributes, hello clean markup

When combined with the new semantic elements of HTML 5, CSS 3 provides web designers with god-like powers over their web pages. With the power of HTML 5, we obtain significantly more control over the structure of our documents, and with the power of CSS 3, our control over the presentation of our documents tends toward infinity.

Even without some of the advanced CSS selectors available to us, the new variety of specific HTML 5 elements enable us to apply styles across similar sections without the need for defining class and id attributes. To style our previous <div>-soup example, we would target the multitude of attributes via the following CSS:

div#news    {}
div.section {}
div.article {}
div.header  {}
div.content {}
div.footer  {}
div.aside   {}

On the other hand, to style our HTML 5 example, we may target the various documents regions directly with this CSS:

section {}
article {}
header  {}
footer  {}
aside   {}

This is an improvement, but there are several issues that need addressed. With the <div> example, we target each area specifically through use of class and id attributes. Using this logic allows us to apply styles to each region of the document, either collectively or individually. For example, in the <div> case, .section and .content divisions are easily distinguished; however, in the HTML 5 case, the section element is used for both of these areas and others as well. This is easily resolved by adding specific attribute selectors to the different section elements, but thankfully, we instead may use a few advanced CSS selectors to target the different section elements in obtrusive fashion.

Targeting HTML-5 elements without classes or ids

Rounding out the article, let’s look at some practical examples of targeting HTML-5 elements without classes or ids. There are three types of CSS selectors that will enable us to target and differentiate the elements in our example. They are as follows:

• The descendant selector [CSS 2.1]: E F
• The adjacent selector [CSS 2.1]: E + F
• The child selector [CSS 2.1]: E > F

Let’s have a look at how these selectors enable us to target each of our document sections without the need for classes or ids.

Targeting the outermost <section> element
Due to the incompleteness of our example, we will assume that the outermost <section> element is adjacent to a <nav> element which itself is a direct descendant of the <body> element. In this case, we may target the outermost <section> as follows:

body nav+section {}

Targeting the next <section> element
As the only direct descendant of the outer <section>, the next <section> element may be specifically targeted with the following selector:

section>section {}

Targeting the <article> element
There are several ways to target the <article> element specifically, but the easiest is to use a simple descendant selector:

section section article {}

Targeting the header, section, and footer elements
In our example, each of these three elements exists in two locations: once inside the <article> element and once inside the <aside> element. This distinction makes it easy to target each element individually:

article header {}
article section {}
article footer {}

..or collectively:

section section header {}
section section section {}
section section footer {}

So far, we have managed to eliminate all classes and ids using only CSS 2.1. So why do we even need anything from CSS 3? I’m glad you asked..

Advanced targeting of HTML 5 with CSS 3

While we have managed to target every element in our example using only valid CSS 2.1, there are obviously more complicated situations where the more advanced selective power of CSS 3 is required. Let’s wrap things up with a few specific examples showing how CSS 3 enables us to style any element without extraneous class or id attributes.

Targeting all posts with a unique post ID
WordPress provides us a way of including the ID of each post in the source-code output. This information is generally used for navigational and/or informational purposes, but with CSS 3 we can use these existing yet unique ID attributes as a way to select the posts for styling. Sure, you could always just add a class="post" attribute to every post, but that would defeat the point of this exercise (plus it’s no fun). By using the “substring matching attribute selector,” we can target all posts and their various elements like this:

article[id*=post-] {}           /* target all posts */
article[id*=post-] header h1 {} /* target all post h1 tags */
article[id*=post-] section p {} /* target all post p tags */

Now that’s just sick, and we can do the same thing for numerically identified comments, enabling us to apply targeted styles to associated constructs:

article[id*=comment-] {}           /* target all comments */
article[id*=comment-] header h1 {} /* target all comment h1 tags */
article[id*=comment-] section p {} /* target all comment p tags */

Target any specific section or article
Many sites display numerous of posts and comments. With HTML 5, the markup for these items consists of repetitive series of <section> or <article> elements. To target specific <section> or <article> elements, we turn to the incredible power of the “:nth-child” selector:

section:nth-child(1) {} /* select the first <section> */
article:nth-child(1) {} /* select the first <article> */

section:nth-child(2) {} /* select the second <section> */
article:nth-child(2) {} /* select the second <article> */

In a similar manner, we may also target specific elements in reverse order via the “:nth-last-child” selector:

section:nth-last-child(1) {} /* select the last <section> */
article:nth-last-child(1) {} /* select the last <article> */

section:nth-last-child(2) {} /* select the penultimate <section> */
article:nth-last-child(2) {} /* select the penultimate <article> */

More ways to select specific elements
Another way to select specific instances of HTML-5 elements such as <header>, <section>, and <footer>, is to take advantage of the “ nly-of-type” selector. With these HTML-5 elements appearing in multiple locations in the web document, it may be useful to target elements that appear only once within a particular parent element. For example, to select only <section> elements that are the only <section> elements within another <section> element (insane, I know), as in the following markup:

<section>
   <section></section>
   <section>
      <section>Target this section</section>
   </section>
   <section>
      <section>Target this section</section>
   </section>
   <section>
      <section>But not this section</section>
      <section>And not this section</section>
   </section>
   <section></section>
</section>

..we could simply use the following selector:

section>section:only-of-type {}

Again, you could always add an id to the target element, but you would lose the increased scalability, maintainablity, and clarity made possible with an absolute separation of structure and presentation.

The take-home message for these examples is that CSS 3 makes it possible to target virtually any HTML-5 element without littering the document with superfluous presentational attributes.

Method 1: Preloading with CSS and JavaScript

There are many ways to preload images, including methods that rely on CSS, JavaScript, and various combinations thereof. As one of my favorite topics here at Perishable Press, I have covered image preloading numerous times:

Each of these techniques sort of builds on previous methods and remains quite effective and suitable for a variety of design scenarios. Thankfully, readers always seem to chime in on these posts with suggestions and improvements. Recently, Ian Dunn posted an article that improves upon my Better Image Preloading without JavaScript method.

With that method, images are easily and effectively preloaded using the following CSS:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

By strategically applying preload IDs to existing (X)HTML elements, we can use CSS’ background property to preload select images off-screen in the background. Then, as long as the paths to these images remains the same when they are referred to elsewhere in the web page, the browser will use the preloaded/cached images when rendering the page. Simple, effective, and no JavaScript required.

As effective as this method is, however, there is room for improvement. As Ian points out, images that are preloaded using this method will be loaded along with the other page contents, thereby increasing overall loading time for the page. To resolve this issue, we can use a little bit of JavaScript to delay the preloading until after the page has finished loading. This is easily accomplished by applying the CSS background properties using Simon Willison’s addLoadEvent() script:

// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
function preloader() {
	if (document.getElementById) {
		document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
		document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
		document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

In the first part of this script, we are setting up the actual preloading by targeting specific preload elements with background styles that call the various images. Thus, to use this method, you will need to replace the “preload-01”, “preload-02”, “preload-03”, etc., with the IDs that you will be targeting in your markup. Also, for each of the background properties, you will need to replace the “image-01.png”, “image-02.png”, “image-03.png”, etc., with the path and name of your image files. No other editing is required for this technique to work.

Then, in the second part of the script, we are using the addLoadEvent() function to delay execution of our preloader() function until after the page has loaded.

SO what happens when JavaScript is not available on the user’s browser? Quite simply, the images will not be preloaded and will load as normal when called in the web page. This is exactly the sort of unobtrusive, gracefully degrading JavaScript that we really like :)

Method 2: Preloading with JavaScript Only

As effective as the previous method happens to be, I generally find it to be too tedious and time-consuming to actually implement. Instead, I generally prefer to preload images using a straight-up slice of JavaScript. Here are a couple of JavaScript-only preloading methods that work beautifully in virtually every modern browser..

JavaScript Method #1

Unobtrusive, gracefully degrading, and easy to implement, simply edit/add the image paths/names as needed — no other editing required:

<div>
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"http://domain.tld/gallery/image-001.jpg",
				"http://domain.tld/gallery/image-002.jpg",
				"http://domain.tld/gallery/image-003.jpg"
			)
		//--><!]]>
	</script>
</div>

This method is especially convenient for preloading large numbers of images. On one of my gallery sites, I use this technique to preload almost 50 images. By including this script on the login page as well as internal money pages, most of the gallery images are preloaded by the time the user enters their login credentials. Nice.

JavaScript Method #2

Here’s another similar method that uses unobtrusive JavaScript to preload any number of images. Simply include the following script into any of your web pages and edit according to the proceeding instructions:

<div>
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--

			if (document.images) {
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();

				img1.src = "http://domain.tld/path/to/image-001.gif";
				img2.src = "http://domain.tld/path/to/image-002.gif";
				img3.src = "http://domain.tld/path/to/image-003.gif";
			}

		//--><!]]>
	</script>
</div>

As you can see, each preloaded image requires a variable definition, “img1 = new Image();”, as well as a source declaration, “img3.src = "../path/to/image-003.gif";”. By replicating the pattern, you can preload as many images as necessary. Hopefully this is clear — if not, please leave a comment and someone will try to help you out.

We can even improve this method a bit by delaying preloading until after the page loads. To do this, we simply wrap the script in a function and use addLoadEvent() to make it work:

function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "http://domain.tld/path/to/image-001.gif";
		img2.src = "http://domain.tld/path/to/image-002.gif";
		img3.src = "http://domain.tld/path/to/image-003.gif";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

Ahhh, the joys of JavaScript!

Method 3: Preloading with Ajax

As if all of that weren’t cool enough, here is a way to preload images using Ajax. This method was discovered at Of Geeks and letters, and uses the DOM to preload not only images, but CSS, JavaScript, and just about anything else. The main benefit of using Ajax over straight JavaScript is that JavaScript and CSS files can be preloaded without their contents affecting the current page. For images this is not really an issue, but the method is clean and effective nonetheless.

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};

As is, this code will preload three files: “preload.js”, “preload.css”, and “preload.png”. A timeout of 1000ms is also set to prevent the script from hanging and causing issues with normal page functionality.

To wrap things up, let’s look at how this preloading session would look written in plain JavaScript:

window.onload = function() {

	setTimeout(function() {

		// reference to <head>
		var head = document.getElementsByTagName('head')[0];

		// a new CSS
		var css = document.createElement('link');
		css.type = "text/css";
		css.rel  = "stylesheet";
		css.href = "http://domain.tld/preload.css";

		// a new JS
		var js  = document.createElement("script");
		js.type = "text/javascript";
		js.src  = "http://domain.tld/preload.js";

		// preload JS and CSS
		head.appendChild(css);
		head.appendChild(js);

		// preload image
		new Image().src = "http://domain.tld/preload.png";

	}, 1000);

};

Here we are preloading our three files upon page load by creating three elements via the DOM. As mentioned in the original article, this method is inferior to the Ajax method in cases where the preloaded file contents should not be applied to the loading page.

Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img> element) or indirectly (e.g., via the parent <div> element) using either display:none; or visibility:hidden;. Further problematic is the potential unintentional display of images on pages when presented via specifically designed print stylesheet.

To get around these limitations, we begin by segregating our strategy to target different media types. For example, for web pages featuring both screen and print stylesheets, we treat each separately by writing this:

@media screen {}
@media print {}

Then, to ensure that the images are preloaded in all browsers, we need to avoid the use of either display:none; or visibility:hidden; in the method. Rather than risking non-caching by hiding or preventing the display of images that need preloaded, we ensure their display and position them far outside of the screen. To do this, we enclose all images that need cached within some specifically identified division like so:

<div id="preloader">
	<img src="http://domain.tld/path/images/01.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/02.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/03.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/04.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/05.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/06.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/07.png" width="1" height="1" />
</div>

Then, with that markup in place, we flesh out the previous media directives with the following CSS:

@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader,
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}

Here, we have the preloader division positioned far to the lower-left outside of the screen, and then redundantly specify block display on the image elements.

Finally, to prevent the unwanted display of these preloaded images via print media, we simply hide the images via display:none; and visibility:hidden; declarations.

When using this method to preload/cache images, remember to call the preloaded images by using the exact same path used for the original preloaded image. For caching to work, the browser must reference an existing resource via the identical path.

This method is designed to enable the caching of specified images in virtually all visual browsing devices. If you encounter cases where this method does not work, or if you have comments or suggestions for improvement, please share by leaving a comment below. Thanks!

The tutorial is straightforward and provides everything needed to implement your own vertical sliding panel in very little time. Three steps to completion:

1. The Markup
2. The CSS
3. The jQuery

Looks and works great on CSS3-capable browsers. Three different demos also available within the tutorial page.