This is right time to adopt HTML5 semantic markup tags into your website design. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms.
Download Script Live Demo
DOCTYPE
The most important deceleration element, this helps your browser to understand what kind of HTML version it is trying to parse.
<!DOCTYPE html>
HTML5 dropped type attribute
<meta http-equiv=”Content-Type” content="text/html";>
to
<meta charset=”UTF-8”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
to
<link rel=”stylesheet” href=”style.css”>
to
<meta charset=”UTF-8”>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
to
<link rel=”stylesheet” href=”style.css”>
You should avoid following tags and attributes in HTML5
<font>, <center>,<frame> align, bgcolor, height, width, size, type
Step 1
Web layout divided into four horizontal parts are Hearder, Nav, Section and Footer. HTML Code
<header class='container'>1 Header</header>
<nav class='container'>2 Nav</nav>
<section class='container'>3 Main</section>
<footer class='container'>4 Footer</footer>
CSS Code
*{margin:0px; padding:0px}
header, footer, section, nav
{
display:blocks
}
.container
{
margin:0 auto;
width:950px;
margin-top:20px
}
header, footer, section, nav
{
display:blocks
}
.container
{
margin:0 auto;
width:950px;
margin-top:20px
}
Step 2
Now working with an unorder list <ul> tag.
<nav class='container' id='nav'>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</nav>
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
Step 3
section (main part) dividing into two vertical parts are section(article part) and aside(sidebar part)
<section class='container'>
<section id="content">Article</section>
<aside id='sidebar'>Sidebar</aside>
</section>
<section id="content">Article</section>
<aside id='sidebar'>Sidebar</aside>
</section>
CSS code
#main
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
Article Page
Here article title is the most important and top level, so title should be in <h1> tag.
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading.
<section id='content'>
<article>
<header>
<h2>Article Title 1</h2>
</header>
<p>
Article Short Description
</p>
</article>
<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>
Article Short Description
</p>
</article>
.......
</section>
<article>
<header>
<h2>Article Title 1</h2>
</header>
<p>
Article Short Description
</p>
</article>
<article>
<header>
<h2>Article Title 2</h2>
</header>
<p>
Article Short Description
</p>
</article>
.......
</section>
Modernizr
Modernizr is a JavaScript library that detects the availability of native implementations for next-generation Web Technologies. These technologies are new features that stem from the ongoing HTML5 and CSS3 specifications. HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag. download link.
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>
<header class='container' id='header'>
Logo Part
</header>
<nav class='container' id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>DEMOS</a></li>
<li><a href='#'>PROJECT</a></li>
.....
.....
</ul>
</nav>
<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
<aside id='sidebar'>
</aside>
</section>
<footer class='container' id='footer'>
<p>
© 2009-2013 9lessons.info.
</p>
</footer>
<body>
</html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>
<header class='container' id='header'>
Logo Part
</header>
<nav class='container' id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>DEMOS</a></li>
<li><a href='#'>PROJECT</a></li>
.....
.....
</ul>
</nav>
<section class='container' id='main'>
<section id='content'>
<article>
<header>
<h1>Article Title</h1>
</header>
<p>
Article Description
</p>
</article>
</section>
<aside id='sidebar'>
</aside>
</section>
<footer class='container' id='footer'>
<p>
© 2009-2013 9lessons.info.
</p>
</footer>
<body>
</html>
Now this code works fine with Internet Explorer lower version.
Note: Modernizer doesn't support inline CSS.
style.css
Final CSS
*{margin:0px; padding:0px}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
#main, #header, #nav
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
#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;
}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
#main, #header, #nav
{
overflow:auto;
}
#content
{
float:left;
width:600px;
}
#sidebar
{
float:right;
width:330px;
}
#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;
}
Note: Modernizer doesn't support inline CSS.
Related Article: Responsive Web Design using CSS3
this is a very nice post...
ReplyDeleteGreat job!
ReplyDeleteReally useful :)
ReplyDeleteThanks for sharing this tutorial
may i implement these code into my self-hosted wordpress site..?
ReplyDeleteawsom,. hatsOff 2 u./
ReplyDeleteNice article I think Blogger templates also works on HTML5 specification.
ReplyDeleteit was really helpful
ReplyDeletegreat post :) thank you !
ReplyDeleteUseful Coding and awesome post, thanks for sharing informative and useful article
ReplyDeleteNice Post Srinivas!! HTML5 is really awesome looking more articles..
ReplyDeleteAhh...this dosen't reduce the work of a developer, it's a bad practice...and also many people still uses IE as a browser...so the dosen't mean to use..
ReplyDelete<3 Love this standard rule
ReplyDeleteThanks for the post ... Im addicted to ur Blog...
ReplyDeleteAwesome job...as usual buddy :p Keep shearing such helpful tutorials
ReplyDeleteThanks for sharing
ReplyDeleteAwesome Tutorial really very helpfull in solving my problem
ReplyDeletethanks
Simple and Nice tutorial
ReplyDeleteWell basic but in detailed, well written code man.
ReplyDeleteAwesome, thank you very much :)
ReplyDeleteAwesome post dude thanks for sharing the wonderful article.....
ReplyDeleteI read your blogs ,your blogs very interested...
ReplyDeletewww.aashiyanarealtyhub.com
thanks
Simple and Nice tutorial as always...sri you rocks..:)
ReplyDeleteThanks for sharing this useful information!
ReplyDeleteGood article explaining the semantics of HTML5.
ReplyDeleteGood job ;)
ReplyDeleteVery nice, thanks for the information.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteIn "Step 3 / Home Page" you mention that "W3C standards specifying h1 tag use for top-level heading", but you use h2 tag in the example code. Which one is the correct?
ReplyDelete@Gregorio
ReplyDelete<h1> for Article Page.
<h2> for Home List Page.
Thank you for the feedback!
ReplyDeletethank you for this design template. very useful. will try. thanks again.
ReplyDeleteto wordpress?
ReplyDeleteGreat!!
ReplyDeleteGreat tutorials..
ReplyDeleteNicely written article.It will be of practical use...
ReplyDeletenice <3
ReplyDeletenice !
ReplyDeleteHow can i use this template on my blogger blog...?
ReplyDeleteNice article about HTML5, I as an new bee to HTML5, it helped me a lot.
ReplyDeleteHey Srinivas,
ReplyDeleteIn the css "header, footer, section, nav" is that a misspell on the "display: blocks" tag?
The right way is "display: block". Am i wrong or just getting confused by something?
Cheers mate
Thank you Srinivas!
ReplyDeleteThanks, For a beginner web designer like me its heaven. Thanks again Srinivas.
ReplyDeletethanks great tutorial..I love it
ReplyDeleteYou can not use the 'header' section descriptor (if that is what it is called-my bad not up on new html5 terms) for displaying <start article, <start header, </end article, </end header, in a content/article section BECAUSE when you style the header parts in your stylesheet every element designated as 'header' will be that color and size etc. So if I make a header as (what a header should be) the top section, then all the headers in my articles are going to be the same dimensions as my Header header at top. Yes I guess you could add an id to each 'article header' but that would defeat the pupose of having section tags. It would be more sensible to just go with H1 and H23456 instead since that is what H header tags are built for.
ReplyDeleteNice post. But I am facing some problem in older browsers. Because those do not support html5. How can I overcome from this proble?
ReplyDeletethanks you sharing article
ReplyDeletegr8 coding bro! sometime I'll implement this on my blogger blog.
ReplyDeletenice tips, i love your article. waiting for your new tutorial of template design for website :)
ReplyDeletevery informatice.. will use these tips for my future web designs
ReplyDeleteI am learning and practicing HTML5 and CSS3 and i found this article is really a great help for beginner.A VERY BIG THANKS for this valuable content.
ReplyDeleteHow can i use this on my blogger
ReplyDeleteWoww!!
ReplyDeleteGreat Great Great Tutorial..!
Good work Srinivas and Keep it up !
Great Maza aa gaya...Thanx sir, for giving such a detailed picturise information...Thanx
ReplyDeleteGreat! I have easier way to change a template now. Thanks!
ReplyDeletevery nice tutorial.................Thanks....:)
ReplyDeleteNice tutorial..!! Thank you..
ReplyDeleteAwesome Tutorial.. I really found it very useful..
ReplyDeleteThanks
Not working for Blogger Blog :(
ReplyDeletePlease customize a html5 template for blogger blog.
Great tutorial.. Thanks!
ReplyDeleteNice article, thanks for sharing.
ReplyDeletenice one..............
ReplyDeleteawesome...
ReplyDeleteGreat! Thanks, i love 9lessons.info :))
ReplyDeletei love all these temlate design
ReplyDeleteon my blog there is one error, and it is caused by code .
ReplyDeletehow can I fix the error?
please help me master...
I LOVE it thanks man. Think you post more like this in the future?
ReplyDeletehi, Nice article I think Blogger templates also works on HTML5 specification.
ReplyDeleteNice article but i don't know how to use it in Blogger. Can you help me please.
ReplyDeleteGreat Post! Thanks for sharing this
ReplyDeleteThank you for sharing... about html5 is beautiful view and more colorful...
ReplyDeleteThis post is complette with pictures...so easily to use... thank you so much...
ReplyDeleteThx Bro... will be useful for other readers...
ReplyDeleteGreat! Thanks, 4 sharing this.... (",)
ReplyDeletehtml5 is very good result for any site
ReplyDeleteThanks for the sharing
ReplyDeleteWhere was this website when I needed it!?!? Well I will archive it til it is needed again.
ReplyDeletearticle from a very amazing, Good Job, Thank you for presenting a wide variety of information that is very interesting to see in this artikle
ReplyDeleteNice article, thanks for the information. It's very complete information. I will bookmark for next reference.
ReplyDeleteReally useful :)
ReplyDeleteThank you for sharing in this article
Grazie per aver condiviso ... su HTML5 è bella vista e più colorata ...
ReplyDeletethanks For sharing this article with us
ReplyDeleteThanks for sharing this template designs, this being very useful i am surely going to use it.
ReplyDeleteOMG,,, I can't before,,, thankyou verymuch, cause your page now I can be design my template...hmmm thanks :)
ReplyDeletethanks dude after i read your tutorial i know any atribute about html 5 i wish i will learn again step by step :)
ReplyDeletetest
ReplyDeleteawesome article really rocking dear i will try this in my site is www.sabkuchbox.com
ReplyDeletethanks aarticle
ReplyDeleteawesome article really rocking dear
ReplyDeletethanks dude after i read your tutorial i know any atribute about html
ReplyDeleteReally useful :)
ReplyDeleteThank you for sharing in this article
html5 is very good result for any site
ReplyDeleteGreat Post! Thanks for sharing this
ReplyDeletethanks for sharring, i'll apply it to my blog
ReplyDeletethanks
ReplyDelete