HTML5 Tutorial: Create A Simple Layout With The New Elements

HTML5 is currently under specification and in the Working Draft stage in W3c, but many its features are stable and can be implemented on most browsers. In this tutorial we will learn to create a very simple layout using HTML5 new elements and style the layout with css.

Most of us usually use the same name for id or class in out layout. For example we useĀ  “header” as the id name for header and “footer” as the id for footer and many more. take a look at the picture below

html tutorial

This is the reason why some of new tag in HTML5 use that name. Ian Hickson has data mined billion of web pages to find the class or id name when he edit the specification and it worth to check his result here.

To create such a layout is very simple in HTML5. We will use some of new tag in HTML5 to replace div and its id name. Checkout the code below

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
 </head>
<body>
<div id="wrapper">
<header></header>
<content>
    <article></article>
</content>
<nav></nav> 
<footer></footer>
</div>  
</body>
</html>

As you can see on the code above, the doctype much simple, shorter and easy to remember. The doctype will specify that your HTML is HTML5 document.

Very simple right? It is quite possible that a question occur, how do we style the new element in CSS? all you need to do is to treat them as the other HTML element. You only need to write its tag like article,nav or content. Put css below between the open tag head and the closing tag of head.

 <style>
 #wrapper{
    height:600px; width:900px; border:1px solid #eeeaf1;
 }
 header,nav,content,footer,article { margin: 5px;}
 header{
    height: 150px; background-color: #027d12;
 }
 nav {
    background-color: #4cad08; width:200px; height: 300px; 
 }
 content{ 
    float: right; width:680px;height: 300px;background-color: #4cad08; 
 }
 article{
    height: 100px; width: 670px; background-color: #8ebe00;
 }
 footer{
       clear: both; background-color: #4cad08;height: 100px; width: 890px;
 }
 </style>

In HTML5 you only need to write “style” between the open and close tag to put CSS in your HTML5 document. Because it is assumed that when you write style, it means you will write CSS. It is no need to write other attributes.

There are many other new elements in HTML5 and I hope I can cover up on my next post.

Be Sociable, Share!

Related Posts:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *