HTML5 Zone is brought to you in partnership with:

I am a web developer and founder of Digimantra. I write and speak about latest web technologies and web trends. Sachin is a DZone MVB and is not an employee of DZone and has posted 19 posts at DZone. You can read more from them at their website. View Full User Profile

The Best HTML5 Page Structure

07.31.2012
| 49006 views |
  • submit to reddit

This is the basic HTML5 page structure that you can use as a base while developing a HTML5 website layout.

<!DOCTYPE HTML>
 
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Website Title</title>
    </head>
 
    <body>
 
        <header>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
 
        <section>
 
            <article>
                <header>
                    <h2>Title Goes here</h2>
                    <p>Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time> by <a href="#">Author</a> - <a href="#comments">12 comments</a></p>
                </header>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </article>
 
            <article>
                <header>
                    <h2>Article title</h2>
                    <p>Posted on <time datetime="2012-07-26T13:00:24+01:00">July 26th 2012</time> by <a href="#">Author</a> - <a href="#comments">9 comments</a></p>
                </header>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </article>
 
        </section>
 
        <aside>
            <h2>Contact Us</h2>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        </aside>
 
        <footer>
            <p>Copyright 2012 DigiMantra Labs ©</p>
        </footer>
 
    </body>
 
</html>

 

Published at DZone with permission of Sachin Khosla, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Brett Salemink replied on Thu, 2012/08/02 - 12:48pm

The future of HTML is looking better and better!

Sean Mahan replied on Tue, 2012/09/25 - 2:57pm

But isn't that meta tag wrong? I thought all you needed was this <meta charset="utf-8" />...

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.