Simple Website Layout Tutorial Using HTML 5 and CSS 3


Simple Website Layout Tutorial Using HTML 5 and CSS 3

As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time. Apple believes that HTML5 is what will define the web and would love to see more developers adopt it instead of Flash.

Now that big video sites such as YouTube are testing support for HTML5 (Mashable).

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 :

Final HTML 5 Tutorial Result

Demo and Source:

View Demo

Download this Freebie

Simply enter your email address and the download link will be sent right to your inbox. If you did not get an email please check your junk folder.

Starting HTML Tutorial Code:

The Structure would be like this :

<!Doctype html>
<html lang="en">
<title>Your Page title</title>
<!-- Define Header -->
<!-- End Header -->
<!-- Define Navigation/Menu -->
<!-- End Navigation -->
<!-- Main content area -->
<!-- End of Main content area -->
<!-- Sidebar -->
<!-- End Sidebar -->
<!-- Footer -->
<!-- End of Footer -->

Defining Header Tag:

<h1>HTML 5 Tutorial Sample </h1>

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

Defining Navigation Area with Few links in it:

<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>

Stylizing the Navigation with CSS3 for Rounded Corners:

nav {
border-radius:10px; //for opera
border:1px solid #cccccc;
nav ul {
margin:0 auto;
nav ul li {
nav ul li a{

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>:

<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>

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:

<section>Anything you want to put in footer goes here. </section>

Stylizing the Footer:

border-top:1px solid #cccccc;
border-radius:5px; // for Opera

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

Hope you like this Simple tutorials :)
Edited:  Doctype and html lang=”en” added for correcting validation. Thanks for the suggestion Mark
border-radius style added for rounded corners in Opera. Thanks for the Suggestion Aleksander

Further Related Readings


Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Ayaz Malik

I'm a coding geek, art lover, and a proud father. I'm running several online businesses; sometimes I take freelance projects to pay my coffee bills. you can find me here on twitter
All Articles by
52 Comments on “Simple Website Layout Tutorial Using HTML 5 and CSS 3” Join The Discussion!
  1. gulpari says:

    very nice and simple method to make a web page by using html and css niceand keep it up.

  2. GDevelop WebDesign says:

    HTML has come a long way. Nice to see, that it is possible now to create well-designed webpages with HTML only.

  3. Ayaz Malik says:

    Yup i agree with u GDevelop web design

  4. Inside the Webb says:

    Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content

  5. andy says:

    This is no doubt extremely worth taking a look at. But one thing I want to ask is as of now we has many template technologies like joomla or smarty than is it proper to spend our time behind making it via HTML?

  6. Mike says:

    Nice tutorial except that it fails validation. Try giving it a proper doctype and language declaration
    <!DOCTYPE html>
    <html lang=”en”>
    Also the 77% width on the nav is giving me a horizontal scrollbar, why not make it 960px?

  7. Aleksander says:

    add “border-radius” with no prefix to make it work in Opera also!

  8. Ayaz Malik says:

    Thanks Aleksander and Mark. tut edited !

  9. Adiian says:

    As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time

  10. Reginald Waldschmidt says:

    I’m going to bookmark this blogg on Identica to get more views for you.

    1. Ayaz Malik says:

      thank u so much Reginald :) really appreciate it

  11. Johnny cricket says:

    Good morning, This is a superb blog, and I can agree with what was created here. I will be back to look at the comments soon. Thanks

  12. Robin Madrid says:

    I’m happy !You seem very extatic about this topic and it shows. Looking forward to future posts.Cheers!

  13. Hermitbiker says:

    …. cool, a real great tutorial Ayaz…. I was actually checking out “devSnippets” and I saw a tut about “simple layout design” and wa-la, I’m here at “Designzzz”…. who’d of thunk it !! :) My list of favorite design sites just keeps getting longer !!
    I’m starting to realize that “everybody is everywhere” on all the design type sites…. you just gotta look long enough !! :)

  14. Simon Loveland says:

    This website did not validate and it has 14 errors so although it’s OK for getting a basic feel, it’s got a quite a few mistakes in it…

  15. Simon Loveland says:

    See all the mistakes for yourselves here at:

    If you’re going to learn html5 and css3 then you might as well learn it properly from the start…

  16. Richard says:

    Thanks for the info.
    I had a problem viewing this as the source code in the zip file was missing tags.
    I thought it was some HTML% feature-when inserted code displayed fine (using IE with javascript snippet).

  17. Jason says:

    HTML5 is very powerful and using CSS3 with it makes creating rich web apps more easier and alot less time consuming.
    I think adobe will have some competition especialy around the animations and video embedding capabilities.

    Good post

  18. rifky says:

    thanks…i’ll try!!!!

  19. Dave Porter says:

    Mistake in the downloaded CSS:
    .bpage div {

    last line has column spelt coulmn
    regards, Dave

  20. John Del says:

    Thanks for posting this Ayaz! Consider this bookmarked! :)

  21. andrew says:

    Wow, i got the right plate to learn CCS and HTML, very like it. thanks

  22. Ben says:

    Hey its a very nice tutorial..
    I’ll try build my design on these stuff..
    I hope its more effective..

  23. Juegos says:

    Great tutorial. Greetings from Argentina my Friend

  24. stecy says:

    Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content

  25. smith says:

    Thanks for posting this Ayaz
    I’ll try build my design on these stuff..
    Keep sharing more and more …..


  26. Devin R. Olsen says:

    I can’t help but fee you have missused a lot of HTML5 elements here my friend. In turn teaching lots of bad habits.

    Aside –
    “Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use of an .”

    Section –
    “Don’t use it unless there is naturally a heading at the start of the section”

    Article –
    “In addition to its content, an element typically has a heading (often in a header element), and sometimes a footer.” You seem to fail to enclose any of your content with paragraph tags either making use of article tags even more strange.

  27. Ayaz Malik says:

    @Devin R. Olsen Yes this was a very basic highlight of the html 5 right after it was released. and i agree it isnt that good.

  28. Michael says:

    Great tutorial. Greetings from Germany.
    Thanks for all of your hard work!

  29. visitor says:

    This is awesome, and I know this is a noob question… But how do I flop the design around and make the appear on the left instead of the right?

  30. Ayaz Malik says:

    Hello Visitor,
    you can change that by moving the aside code and everything in it before the mcontent div .. or u can simply ad a float:left in the aside => sidebar

  31. Will says:


    Please explain how to add the image in the background like in your screenshot of the “end result!”

    Thanks a bunch.

  32. James says:

    What is the best way to define a header image in place of the ?


  33. Ayaz Malik says:

    @will and @james ,, the best place to add a background is in body tag via css. add a background:url(path_to_image); in the body css

  34. benn says:

    Cheers for this, perfect html5 canvas! :)

  35. iş başvurusu says:

    thanks ayaz. this post will be usefull for my lesson in university. thanks again

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved