HTML5 and only HTML 5 this is perfect time to take up HTML5 semantic markup tags into your website. IF you have already existing site you can change the tag easily or for new one you should must go with HTML5 design only. W3C has recently conducted a survey of over thousands of websites and found that the most of common div IDs and classes are 1.footer, 2. header, 3. menu, 4. content, 5. title and 6. nav. HTML5 semantic markup elements that can put across the point of the element to developers, browser as well the search spider algorithms also. As usual in this tutorial also you will get demo and you can try yourself after download the script.

Download Source HTML 5 Template Design Login With Facebook and Twitter New Live Demo HTML5 Template Design

 
Sample HTML5 File for Template Design Here we have used javascript Modernizr 2.6.1 (Custom Build) | MIT & BSD

< !DOCTYPE html>



  



Onlinewebapplication.com HTML5 Template for your site






	
	
	

© 2009-2013 onlinewebapplication.com.

Close Bitnami banner

Sample CSS3 HTML5 file for Website Template Design

*{margin:0px; padding:0px}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
h1, h2 {color: #333;
font-family: Helvetica,Arial;
font-weight: bold;
line-height: 1.1em;
padding-bottom: 5px;
text-shadow: 0 1px 0 #FFF;
font-size: 28px;}
h2 a{
color: #333;
text-decoration:none;	
}
h2 a:hover{
color: #333;
text-decoration:none;	
background-color:#81c3de;
}
.roundEdge
{border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;}
#main, #header, #nav
{
overflow:auto;
}
#nav{background-color:#162336}

#footer
{
height:40px;
border-top:3px solid #333333;
}
#footer p
{
padding:20px 0px 20px 0px;
font-size:12px;
}
#content
{
float:left;
width:600px;
}
#content article
{
margin-bottom:20px;
}
#sidebar
{
float:right;
width:330px;
background-color:#dedede;
min-height:400px;
text-align:center;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
font-size:12px;
font-weight:bold;
}
#nav ul li a
{
color:#ffffff;text-decoration:none;display:block;padding:12px;text-align:center;min-width:100px;
}
#nav ul li a:hover
{
background-color:#81c3de;
color:#333333;
}
#logo
{
margin:10px;
}
#ads
{
text-align:center;
}

I hope this HTML5 Website Template Design tutorial will you to build next generation standard bog and sites. Very soon I will write article for WordPress blog HTML5 tutorials.