Create a stylish HTML5 template from scratch

August 8, 2011 by Catalin Rosu - 47 comments

HTML5 is certainly one of the latest buzzwords in the web community. It isn’t something new anymore and we’ve already seen how cool it is. Features like simplified doctype, more semantic markup, input types and placeholders are just some of the reasons you’d like to use a HTML5 template.

So, today we’re going to build a HTML5 template using the full power of CSS3.

HTML5 template preview

View demo

The HTML5 template design

Here’s a screenshot with the HTML5 template layout we’re going to code:

As you may notice, the above HTML5 template is simple, minimal and stylish – thanks to the CSS3 awesome features. Long live the CSS3!

The not-so-secret ingredients:

Simple logo using Google Font API
Nice drop shadow effects.
Pattern background using data URI scheme.
Vertical drop down menu animated with jQuery.
Arrow shapes made with pseudo-elements.
CSS3 gradients.

A word on data URIs

I wanted to create this HTML5 template demo without using any images and I made it. So, for the website background, instead of linking to an external image I just embedded that image with data URIs.

So the result is something like that:

body
{
background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF3d3d////riJKgAAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR42mJgBAEGGMmAxAYCgAADAAGGABmnk/7aAAAAAElFTkSuQmCC);
}

The encoded image is basically a pattern.

Not so beautiful, huh? Yet, this is very effective. The pros: no extra HTTP image request. The cons: IE6/IE7 lack of support (but there’s a solution also for that).

I could have used a CSS3 pattern instead this solution, but the above has its own advantages: one is the fact it works on IE8.

You just need an encoder for that, here’s an online encoding tool to play with.

The HTML code

Basic structure for the HTML5 template.

The new HTML5 doctype

The Document Type Declaration, a.k.a doctype was always an ugly and hard-to-remember thing. Not anymore.

Check out the new doctype declaration, that tells a browser or other parsers that they are looking at a HTML5 document:

<!DOCTYPE html>

The HTML5 header

<header> 
    <hgroup class="clearfix"> 
        <h1><a href="#">HTML5 <span>template</span></a></h1> 
        <h2>Just another awesome description</h2> 
    </hgroup>
</header>

The body

The template’s body consists of two blocks:

<aside> – who wraps the navigation
<div id="content"> – who wraps the <article> elements.

Keep in mind that now that we have these new HTML elements, we should not forget entirely about the <div> element as some jobs are still available for it.

<div id="main" class="clearfix">
    <aside>
        <nav>
            <ul id="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Categories</a>
                    <ul>                
                        <li><a href="#">Css</a></li>
                        <li><a href="#">Graphic Design</a></li>
                        <li><a href="#">Tools</a></li>
                        <li><a href="#">Web design</a></li>                      
                    </ul>        
                </li>
                <li>
                    <a href="#">Work</a>
                    <ul>
                        <li><a href="#">Websites</a></li>
                        <li><a href="#">Logos and icons</a></li>
                        <li><a href="#">User Interfaces</a></li>
                        <li><a href="#">Other stuff</a></li>                
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>                   
            </ul>
        </nav>
    </aside>
    
    <div id="content">
        <article>
            <section>
                <h1><a href="http://www.red-team-design.com/css3-dropdown-menu">CSS3 Dropdown menu</a></h1>
                <figure>
                    <img src="http://www.red-team-design.com/wp-content/uploads/2011/03/css-menu.png" width="600" height="200" alt="CSS3 Dropdown menu">
                    <figcaption>Contains clean and accessible HTML structure. Javascript fix only for IE6.</figcaption>
                </figure>
            </section>
            <footer>Posted on <span>March 18th, 2011</span></footer>
        </article>
        <article>        
            <section>
                <h1><a href="http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box">CSS3 search box</a></h1>
                <figure>
                    <img src="http://www.red-team-design.com/wp-content/uploads/2011/02/css3-searchbox.png" width="600" height="200" alt="CSS3 search box">
                    <figcaption>Modernizr's feature detection included.</figcaption>                    
                </figure>
            </section>
            <footer>Posted on <span>February 18th, 2011</span></footer>            
        </article>
        <article>        
            <section>
                <h1><a href="http://www.red-team-design.com/css3-tooltips">CSS3 tooltips</a></h1>
                <figure>
                    <img src="http://www.red-team-design.com/wp-content/uploads/2011/04/css3-tooltips.png" width="600" height="200" alt="CSS3 tooltips">
                    <figcaption>CSS3 gradients, box shadows, pseudo-elements.</figcaption>                    
                </figure>
            </section>
            <footer>Posted on <span>April 28th, 2011</span></footer>             
        </article>        
    </div>
</div>

The animated menu

Pretty semantic code.

The jQuery code who animates this menu:

<script>
    function initMenu() {
      $('#menu ul').hide(); // Hide the submenu
      if ($('#menu li').has('ul')) $('#menu ul').prev().addClass('expandable'); // Expand/collapse a submenu when it exists  
      $('.expandable').click(
        function() {
            $(this).next().slideToggle();
            $(this).toggleClass('expanded');
          }
        );
      }
    
    // When document ready, call initMenu() function 
    $(document).ready(function() {initMenu();});    
</script>

The main HTML5 footer

<footer>
    Design and code by <a href="http://www.red-team-design.com/">RedTeamDesign</a>
</footer>

The CSS

Below you can find the styles used to build this HTML5 template layout. Prefixed properties are excluded, you’ll find them in the demo page source.

/* Small reset */

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

ul{
    list-style: none;
    margin: 0;
    padding: 0;         
}

a{
  color: #6F3736;
}      

/* Clear floats */

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix{
  *zoom: 1;
}

/* Layout styles */

body{
    background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF3d3d////riJKgAAAAAJ0Uk5T/wDltzBKAAAAFUlEQVR42mJgBAEGGMmAxAYCgAADAAGGABmnk/7aAAAAAElFTkSuQmCC);
    margin: 0;
    font-family: 'Lucida sans', Arial, Helvetica;
    font-size: small;
}

header{
    padding: 10px 0;            
    background-color: #4c2626;
    background-image: linear-gradient(top, #6f3736, #4c2626);  
    box-shadow: 0 1px 0 #fff, 0 -3px 3px #000 inset;
}

header hgroup{
    margin: 0 auto;
    width: 960px;            
}
        
header h1{
    margin: 0;
    font: 25px/1 'Luckiest Guy', cursive; /* Google font API */
    float: left;
    text-shadow: 0 1px 0 rgba(0,0,0,.9);            
}

header h2{
    color: #D2A4A4;
    margin: 0;
    float: right;
    font: italic normal 15px/25px Arial, Helvetica;
}

header a{
    color: #eee;
    text-decoration: none;
}

header a span{
    color: #d2a4a4;
}

/* --------------------------------------------------- */

footer{
    text-align: right;
    width: 960px;
    margin: 0 auto;
    padding: 10px 0;
}

#tw, #fb{
    float: right;
    width: 130px;
    margin: 10px 0 0 0;
    overflow: hidden;
}

/* --------------------------------------------------- */        

#main{
    margin: 20px auto 0 auto;
    width: 960px;
}

aside{
    float: left;
    width: 250px;
    margin-right: 20px;
}

#content{
    float: left;
    width: 690px;
}

article{
    position: relative;            
    padding: 20px;
    margin: 0 0 20px 0;
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 1px #999;
    border-radius:5px;            
}

article:before, article:after{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

article:after{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}        

article footer{
    text-align: center;
    width: auto;
}

article footer span{
  padding: 0 10px 0 12px;
  margin: 0 0 0 12px;
  background: #bbb;
  color: #fff;
  font: bold 12px/24px arial, helvetica;
  display: inline-block;
  position: relative;
  text-shadow: 0 1px 0 #999;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 1px 0 #fff, 0 1px 0 #999 inset;
}

article footer span:before{
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: transparent #bbb transparent transparent;
  border-style: solid;
  border-width: 12px 12px 12px 0;
}
 
article footer span:after{
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  box-shadow: -1px -1px 2px #777;
}        

figure{
    margin: 1em 0;
}

figcaption{
    margin: 0.5em 0;
    font-style: italic;
    font-size: 0.9em;
    color: #777;
}

/* Vertical menu */

#menu li{
  margin: 0 0 3px 0;             
}

#menu a{
  display: block;
  *display: inline-block;
  *width: 240px;
  text-decoration: none;	            
  background: #ddd;
  color: #444;	
  padding: 10px 5px;
  text-transform: uppercase;
  font: bold 12px Arial,Helvetica;          
  border-radius:5px;
  box-shadow: 0 1px 0 #ccc;   
}

#menu a:hover{
    color: #eee;
    background: #9c9c9c;
    background: linear-gradient(top, #bbb, #999);          
}

#menu .expandable{
    position: relative; 
}

#menu .expandable:before,
#menu .expandable:after{
  content: '';
  position: absolute;
  right: 5px;
  margin-top: 5px;
  border-top: 6px solid #444;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;          
}

#menu .expandable:before{
   border-top-color: #fff;
   margin-top: 6px;
}

#menu .expanded:after{
  border-top: 0;
  border-bottom: 6px solid #444;       
}

#menu .expanded:before{
    border-top: 0;
    border-bottom: 6px solid #fff;               
}

#menu ul a{
    background: #f2f2f2;
    text-transform: none;
    font-weight: normal;            
}

#menu ul a:hover{
    background: #fafafa;
    color: #444;
}

Browser support

This is a cross browser HTML5 template which use graceful degradation. So, you don’t have to worry for older browsers like the IE trident – they render the layout in a good way thanks to the HTML5 shiv:

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

View demo

Conclusion

Browsers are evolving, web technologies are constantly being updated so we have no time to rest. We need to stay up to date with latest specifications and the best way to learn is by actually doing it.

The purpose of articles like this one is to encourage you to use these new web technologies. And yes, you can use this HTML5 template right now!

If you liked this article, and I hope you did, please spread the word!

If you enjoyed this article, get updates via RSS or email (it's free).

47 thoughts on “Create a stylish HTML5 template from scratch”

Jash Dass on August 8, 2011 at 11:30 said:

Nothing personal but your template needs more work on post boxes, menu and footer.
Reply ↓
- Red on August 9, 2011 at 09:32 said:
  
  Jash, thanks for your feedback. ;)
  Reply ↓
Wordpress video plugin on August 9, 2011 at 12:05 said:

Excellent guide! Code reference was good and useful too………….. Thanks :)
Reply ↓
Ramono on August 10, 2011 at 07:46 said:

There some useful information here, but,
I just wanted to point out that I don’t think that’s the correct way of using the tag and the tag.
The tag is not needed there since you have the tag to wrap navigation. Aside is content tangentially related to the main content.
The tag is also not needed, because the should be wrapped into a tag and the figure tag represents the content itself, so there’s no need to be wrapped.
Reply ↓
- Ramono on August 10, 2011 at 07:48 said:
  
  I meant section and aside tags
  Reply ↓
Michael Pehl on September 1, 2011 at 12:33 said:

Not bad.
I would not use data URI’s because you combine this little pattern into a sprite image. You must load other graphics anyway ;-)
CSS belongs into the , JS before … just for the performance (minify/combine/serving it gzipped) and when JS is NOT in the it can not block rendering the site ;-)
But I must admit I like your style. Nice blog, good work, bookmarked!
Reply ↓
- Michael Pehl on September 2, 2011 at 12:33 said:
  
  Oh, html tags not allowed… ok, once again. CSS belongs into the head, JS before the closing body tag… when JS is NOT in the head it can not block rendering.. the site gets rendered first and then JS is loaded and executed.
  Reply ↓
  - rocksent on March 9, 2012 at 10:19 said:
    
    Excellent,appreciate
    Reply ↓
Mike on September 8, 2011 at 23:38 said:

This is a beautiful gift to the community.
It’s quite sad that almost all of the comments are criticism – don’t get discouraged!
Reply ↓
- Red on September 8, 2011 at 23:47 said:
  
  Thanks for support Mike, I really appreciate it!
  Sometimes you can’t please everyone :)
  Reply ↓
Praveen Gowda I V on September 22, 2011 at 14:08 said:

Why so much of criticism and almost no appreciation
This is so informative and helpful
Really thanks for putting informative content as this
Don’t get demotivated by criticism
Although It would have been better you used a good syntax highlighter to display the code
Reply ↓
- Red on September 23, 2011 at 17:06 said:
  
  Praveen, thanks for your suggestion.
  Reply ↓
zaragoza on December 14, 2011 at 23:09 said:

hello im trying to build a website for my friend he does not know anything about programing but still is a graphic designer and i was wondering a way to pay you for the codes you a posting there are pretty cool and i would like to use some of those.
Reply ↓
- Red on December 14, 2011 at 23:25 said:
  
  Hey, I am glad you like my articles. Feel free to use the examples you found here for your projects.
  Reply ↓
Ben on December 20, 2011 at 06:34 said:

Hello Red, I like this post. It removes the hassle of slicing images from Photoshop yet still creates a nice page. Very useful… thanks. :) But the animated menu didn’t work in the page I created. Can’t figure out what’s missing, or maybe I put the script in the wrong place. Please help!
Thanks…
Reply ↓
- Red on December 20, 2011 at 09:28 said:
  
  Hi Ben, I’m glad you like my article.
  Regarding your menu problem, perhaps you forgot to include the jquery library. Anyway, a link would help to investigate the problem.
  Reply ↓
  - Ben on December 20, 2011 at 13:23 said:
    
    Thanks Red,
    You’re right jquery library is missing. I made a google search about jquery library and I found this that is needed.
    “”
    Now the menu is working.. thanks again Red…. :)
    Reply ↓
    - Will on June 26, 2012 at 00:16 said:
      
      Hello Ben!
      May you help me with the link that help you solve the jquery library that was missing?
      Thanks!
      Reply ↓
      - Catalin Rosu on June 26, 2012 at 11:10 said:
        
        Will,
        your page should contain a script like that:
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
Prodyot Pran on January 2, 2012 at 22:56 said:

Red
Another great contribution from you to the web community.
Hats off to your friendly gestures.
I have a request-
Can you kindly walk us through a complete iGoogle type user customisable drag-n-drop web page designing?
Now, please don’t tell me that there are many sites which have already posted tutorials on this subject matter.
None can effectively walk us through the entire process till the child birth like you do.
Reply ↓
andrew on January 17, 2012 at 02:24 said:

Hey, very nice tuto, however i came to this site becuase i was looking for “html5 from scratch”, but i was trying to find imformation about how to create the folders that hosts the website, and also other things needed in a web site as the index file, the configuration.php etc. It would be nice if you add a small guide about how to begin in html5 from zero, inlcuding the IDE or the editor to start to coding,
Great job btw
Reply ↓
- Red on January 29, 2012 at 18:23 said:
  
  Andrew, check one of my previous articles for a list of some free tools you can use to develop for the web.
  Also, to learn more about HTML, check this wonderful resource: HTML5 Doctor.
  Reply ↓
Max on January 28, 2012 at 21:26 said:

Hello Red.
I’m an html novist (at best). I’m currently taking classes in HTML and due to the rate at which the class is moving, I’m currently seeking anything out that speaks to html5 as most of the people in the class I’m in don’t understand basic CSS or divs (and it’s suppose to be a class on HTML5!).
Thanks for this template. I’m spending the weekend playing with it and when I’m done I’m going to post my results to show what I did with what you have given us. Thanks for this great introduction. It’s really wonderful overall.
I would like to ask that you would include how the footer works in your template and a few things like that. That would be very much appreciated as so much of this appears to be very advanced to a novice like myself. Still, great work. All of it is very much appreciated.
Thank you!
Reply ↓
- Red on January 29, 2012 at 18:28 said:
  
  Hi Max, I’m glad you like this template and I hope it will help you! Thanks for your comment.
  Reply ↓
  - Max on January 30, 2012 at 02:17 said:
    
    Hi Red, I’m still eploring the template and what html5 can do. I’m holding off posting up the results just yet as much of the weekend got away from me as my cat got loose and we’re trying to catch him (had to make flyers and put them up and deal with obscene phone calls from jerks who think kitty jokes are funny). I did make a lot of head way though – thank you for your help!
    I will post when i’m done for comments and ideas – Thanks!
    Reply ↓
Brent on February 23, 2012 at 21:13 said:

Great tutorial Red. I implemented the dropdown menu, but I have content underneath the menu that gets shifted down when the menu expands? What can I do to avoid this shift in my layout?
Thanks
Reply ↓
- Red on February 23, 2012 at 23:08 said:
  
  Brent, I think that’s quite logical, don’t you think so? :)
  Perhaps you’d like to use something like position:absolute or position:fixed for your content underneath the menu…
  Reply ↓
Brent on February 24, 2012 at 20:14 said:

That worked, thanks Red :-)
Reply ↓
baggabee on March 1, 2012 at 03:48 said:

Hi Red. Awesome tut. wow..haters huh? Can’t help but think the critics are well..not important…great work. Thanks for helping those who need it =).
Reply ↓
alex on March 5, 2012 at 01:56 said:

Hello,
Nice tutorial!
Wondered how to alter the menu such if you click “categories” the list drops down, then when you click “work” that list drops down but “categories” list automatically folds up.
Thanks!
Alex
Reply ↓
- Red on March 5, 2012 at 10:51 said:
  
  Hey Alex, here’s the behavior you’re looking for.
  You just need to update a bit the jQuery code (view page source) to work for this menu.
  Hope that helps! ;)
  Reply ↓
Alex on March 14, 2012 at 20:48 said:

Thanks for sharing. Great article. However I need some help resolving two problems. My menu is very big. it has 35 items. 5categories and each cat has 7 items.
1- If I have the … inside a div, the div will not change size when aside changes height. How can I fix that? any tips?
2-Lets say one of my li items has a link to “/contact.php”.
once click and contact.php is loaded, how can I mark the selected li?
if it is in a submenu, expand it & change the li color so that the user knows which one he has clicked.
Thank you very much. Red tem you are great.
Reply ↓
Alex on March 14, 2012 at 20:50 said:

in my previous post instead of :
If I have the … inside = If I have the menu inside
sorry
Reply ↓
top on April 6, 2012 at 21:24 said:

thank you very maaaaaaaaaaatch
Reply ↓
sargum00 on April 22, 2012 at 03:01 said:

Hi!!
First of all, great job!! I have a problem, I have used the “Vertical drop down menu animated with jQuery” in my project. I have a problem with it when I reload the page. The problem is that wherever I am in the page, it goes to the begining when I reload the page. I’d like the page to stay at the same place where it was before reloading it.
Could you help me please??
Thank you so much!!
Reply ↓
- Red on April 22, 2012 at 10:05 said:
  You’ll need to set a custom state for each page:
```
$(document).ready(function() {
  initMenu();
  $("ul li:nth-child(2)").find('expandable').addClass('expanded');
 $("ul li:nth-child(2)").find('ul').slideToggle();
}); 
```
  The above should set the second menu item as current and it will expand its submenu. Hope that helps!
  Reply ↓
  - sargum00 on April 22, 2012 at 11:59 said:
    
    Thank you for your answer!!
    My problem is not that. When I click on one of the items of the vertical drop down menu, I send a request to the server and it responds to the view with the data it must render. My problem is that when I receive the respond in the view, it goes to the top to the window and it does not stay at the same place it was before sending the request.
    I hope you understand what I’m trying to do.
    Thank you so much again!!
    Reply ↓
sarah h. on May 18, 2012 at 16:05 said:

Nice thanks for the help! HTML5 is actually new to me because I just started to design my own site and I love it because like you said it is Cool and more hip looking than the others, thanks for the code!
Reply ↓
anoop on June 6, 2012 at 09:44 said:

I love this code..its very simple..great tutorial..:)
I was trying to add another submenu inside the dropdown menu. I added another under the menu list items. It is working but not animating properly. Pls help me with the php code.
Should i create another function to animate the second submenu? Should i change the css as well?
Reply ↓
Denis on September 27, 2012 at 11:47 said:

Simply awesome, thx:)
Reply ↓
Al on January 11, 2013 at 18:55 said:

Wonderful! Leaned a lot. Greetings from Accra! :-)
Reply ↓
Cesar on January 31, 2013 at 01:06 said:

Thank you very much for this tutorial !!
I wonder if it is possible to load php’s files into the div “content” ?? Or using AJAX to do that dynamic loading ??
Reply ↓
- Andrew M on February 20, 2013 at 21:59 said:
  
  I just did used an include (using coldfusion) in the tag
  Reply ↓
andrew m on February 20, 2013 at 21:46 said:

Thanks Red, great tutorial.
Was wondering if there was a way to control two menus at once using includes.
For example, I’ve replaced the div content with a page include that also uses a drop down menu, but I’d like for that menu to be expanded on load. Is there a way to control these two menus separately?
Thanks,
Reply ↓
- Catalin Rosu on February 20, 2013 at 23:43 said:
  
  Andrew, thanks for your comment.
  Technically, you could create a simple jQuery plugin for the left dropdown menu. This way, you’ll be able to control each menu individually.
  Good luck!
  Reply ↓
  - Andrew M on February 21, 2013 at 00:08 said:
    
    I’m new to using jQuery, and maybe this is a bit beyond me. Thanks though.
    Reply ↓
Lil Jodge on May 16, 2013 at 22:28 said:

Thanks a lot for the tutorial. The above image does not seem to be available!!!!
Reply ↓