HTML5 Template Design for Blog.
Wall Script
Follow Me:
Tuesday, April 02, 2013

HTML5 Template Design for Blog.

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.

HTML5 Template Design for Blog.


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-Typecontent="text/html";>
to
<meta charset=”UTF-8”>

<link rel=”stylesheet” href=”style.csstype=”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>


HTML5 Template Design for Blog.


CSS Code
*{margin:0px; padding:0px}
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>
HTML5 Template Design for Blog.

#nav
{
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>

HTML5 Template Design for Blog.


CSS code
#main
{
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>

HTML5 Template Design for Blog.


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>

HTML5 Template Design for Blog.


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.
Responsive Web Design using CSS3

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>

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;
}


Note: Modernizer doesn't support inline CSS.

Related Article: Responsive Web Design using CSS3
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


95 comments:

  1. Really useful :)

    Thanks for sharing this tutorial

    ReplyDelete
  2. may i implement these code into my self-hosted wordpress site..?

    ReplyDelete
  3. Nice article I think Blogger templates also works on HTML5 specification.

    ReplyDelete
  4. Useful Coding and awesome post, thanks for sharing informative and useful article

    ReplyDelete
  5. Nice Post Srinivas!! HTML5 is really awesome looking more articles..

    ReplyDelete
  6. Ahh...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
  7. Thanks for the post ... Im addicted to ur Blog...

    ReplyDelete
  8. Awesome job...as usual buddy :p Keep shearing such helpful tutorials

    ReplyDelete
  9. Awesome Tutorial really very helpfull in solving my problem

    thanks

    ReplyDelete
  10. Simple and Nice tutorial

    ReplyDelete
  11. Well basic but in detailed, well written code man.

    ReplyDelete
  12. Awesome, thank you very much :)

    ReplyDelete
  13. Awesome post dude thanks for sharing the wonderful article.....

    ReplyDelete
  14. I read your blogs ,your blogs very interested...

    www.aashiyanarealtyhub.com

    thanks

    ReplyDelete
  15. Simple and Nice tutorial as always...sri you rocks..:)

    ReplyDelete
  16. Thanks for sharing this useful information!

    ReplyDelete
  17. Good article explaining the semantics of HTML5.

    ReplyDelete
  18. Very nice, thanks for the information.

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. In "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
  21. @Gregorio

    <h1> for Article Page.

    <h2> for Home List Page.

    ReplyDelete
  22. thank you for this design template. very useful. will try. thanks again.

    ReplyDelete
  23. Nicely written article.It will be of practical use...

    ReplyDelete
  24. How can i use this template on my blogger blog...?

    ReplyDelete
  25. Nice article about HTML5, I as an new bee to HTML5, it helped me a lot.

    ReplyDelete
  26. Hey Srinivas,
    In 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

    ReplyDelete
  27. Thanks, For a beginner web designer like me its heaven. Thanks again Srinivas.

    ReplyDelete
  28. You 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.

    ReplyDelete
  29. Nice post. But I am facing some problem in older browsers. Because those do not support html5. How can I overcome from this proble?

    ReplyDelete
  30. gr8 coding bro! sometime I'll implement this on my blogger blog.

    ReplyDelete
  31. nice tips, i love your article. waiting for your new tutorial of template design for website :)

    ReplyDelete
  32. very informatice.. will use these tips for my future web designs

    ReplyDelete
  33. I 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.

    ReplyDelete
  34. Woww!!

    Great Great Great Tutorial..!

    Good work Srinivas and Keep it up !

    ReplyDelete
  35. Great Maza aa gaya...Thanx sir, for giving such a detailed picturise information...Thanx

    ReplyDelete
  36. Great! I have easier way to change a template now. Thanks!

    ReplyDelete
  37. very nice tutorial.................Thanks....:)

    ReplyDelete
  38. Awesome Tutorial.. I really found it very useful..

    Thanks

    ReplyDelete
  39. Not working for Blogger Blog :(
    Please customize a html5 template for blogger blog.

    ReplyDelete
  40. Nice article, thanks for sharing.

    ReplyDelete
  41. Great! Thanks, i love 9lessons.info :))

    ReplyDelete
  42. on my blog there is one error, and it is caused by code .
    how can I fix the error?

    please help me master...

    ReplyDelete
  43. I LOVE it thanks man. Think you post more like this in the future?

    ReplyDelete
  44. hi, Nice article I think Blogger templates also works on HTML5 specification.

    ReplyDelete
  45. Nice article but i don't know how to use it in Blogger. Can you help me please.

    ReplyDelete
  46. Great Post! Thanks for sharing this

    ReplyDelete
  47. Thank you for sharing... about html5 is beautiful view and more colorful...

    ReplyDelete
  48. This post is complette with pictures...so easily to use... thank you so much...

    ReplyDelete
  49. Thx Bro... will be useful for other readers...

    ReplyDelete
  50. Great! Thanks, 4 sharing this.... (",)

    ReplyDelete
  51. html5 is very good result for any site

    ReplyDelete
  52. Where was this website when I needed it!?!? Well I will archive it til it is needed again.

    ReplyDelete
  53. article from a very amazing, Good Job, Thank you for presenting a wide variety of information that is very interesting to see in this artikle

    ReplyDelete
  54. Nice article, thanks for the information. It's very complete information. I will bookmark for next reference.

    ReplyDelete
  55. Really useful :)
    Thank you for sharing in this article

    ReplyDelete
  56. Grazie per aver condiviso ... su HTML5 è bella vista e più colorata ...

    ReplyDelete
  57. thanks For sharing this article with us

    ReplyDelete
  58. Thanks for sharing this template designs, this being very useful i am surely going to use it.

    ReplyDelete
  59. OMG,,, I can't before,,, thankyou verymuch, cause your page now I can be design my template...hmmm thanks :)

    ReplyDelete
  60. thanks dude after i read your tutorial i know any atribute about html 5 i wish i will learn again step by step :)

    ReplyDelete
  61. awesome article really rocking dear i will try this in my site is www.sabkuchbox.com

    ReplyDelete
  62. thanks dude after i read your tutorial i know any atribute about html

    ReplyDelete
  63. Really useful :)
    Thank you for sharing in this article

    ReplyDelete
  64. html5 is very good result for any site

    ReplyDelete
  65. thanks for sharring, i'll apply it to my blog

    ReplyDelete

Make in India