Creating a Sample HTML5 Structure

TML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it’s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section {
 display: block;
}
#container {
 width:900px;
 margin:auto;
 background-color:white;
}
header {
 background-color:#666;
}
nav li {
 display:inline;
 padding-right:1em;
}
nav a {
 color:white;
 text-decoration:none; 
}
nav a:hover {
 text-decoration:overline; 
}
h1, h2 {
 margin:0px;
 font-size:1.5em;
}
h2 {
 font-size:1em;
}
footer {
 background-color:#999;
 text-align:center;
}
</style>
<script>
document.createElement("article"); 
document.createElement("footer"); 
document.createElement("header"); 
document.createElement("hgroup"); 
document.createElement("nav"); 
</script>
</head>
<body>
<div id="container">
    <header>
     <h1>Sample HTML5 Structure</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    </header>
    <section>
     <hgroup>
         <h1>Main Section</h1>
            <h2>This is a sample HTML5 Page</h2>
        </hgroup>
     <article>
         <p>This is the content for the first article</p>
        </article>
        <article>
         <p>This is the content for the second article</p>
        </article>
    </section>
    <footer>
     <p>This is the Footer</p>
    </footer>
</div>
</body>
</html>

As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc.  The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.

The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.

Please leave any comments and/or suggestions below,

Gilberto Cortez

24 thoughts on “Creating a Sample HTML5 Structure

  1. Hello!
    Thanks for supplying some interesting information on the topic from your expertise.

    I will definitely be sure in saving your website and might definitely check back sometimes.

  2. What a blogpost!! Very informative and easy to understand. Looking for more such blog posts!! Do you have a twitter or a facebook?
    I recommended it on digg. The only thing that it’s missing is a bit of new design. However thank you for this information.

  3. Thanks !! I have just started using HTML5 and I study the basic of it but… how to implement it, is still lit bit confusion for me. You help me a lot.

  4. Great article and sample code. I will share with my groups on linkedin and will check your blog for other updates; designs.

    Thanks for sharing!

  5. good, but ie7-ie8 display a little different that ie9 or chrome, i think so that is problem for css

    Any have solution for this?

    Regards

  6. Thanks !! I have just started using HTML5 and I study the basic of it but… how to implement it, is still lit bit confusion for me.

    • It is great that you are learning HTML5 as it will open many new doors in the development world for you. Let me know how you are doing and if you have any questions feel more than free to send them over and I will try to help you out

  7. Thanks yaar me i have got many useful information through this and i have learned html too thank you very much ………..

  8. Thatk´s for the article. I was started with HTML5 and I will want to know what´s the way to work with the field for example: input, TextArea and other. if you can help me with that and how I can create menu.

  9. All are browsers supports tags ok, but some css elements like border radius and gradient…etc especially IE low version browsers is working or not.

  10. I am new in HTML5. From this article I learn lot of things, bcz before I confused. Thanks lot of information have given in this article.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>