Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Best HTML5 Page Structure

DZone's Guide to

The Best HTML5 Page Structure

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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>

 

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}