HTML5 Basic Semantic Structure

Posted by robert | Filed under html5

This is a basic semantic structure of HTML5.

HTML5

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="styles/screen.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="wrapper">
        <header>
        </header>
        
        <main>
            <aside>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                    </ul>
                </nav>
            </aside>
    
            <article class="content">
            </article>
        </main>
        
        <footer>
        </footer>
    </div><!-- END .wrapper -->
</body>
</html>

HTML5 CSS

/*html5 display rule*/
main, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}

Comments (6) | December 30th, 2010

6 Responses to “HTML5 Basic Semantic Structure”

  1. Nandoki Says:
    June 13, 2012 at 8:03 am

    Great! Thanks!

    Reply
  2. Johnny Says:
    September 11, 2012 at 9:48 am

    Thanks for sharing. Nice work on the Javascript too!

    Reply
  3. Jhon Says:
    January 31, 2013 at 2:36 pm

    GoodJob!

    Reply
  4. Olivier C Says:
    May 19, 2013 at 9:05 am

    We are in 2013 … we can now use the <main> tag.

    Reply
  5. las vegas agency Says:
    October 8, 2014 at 1:50 am

    Rapid Options With las vegas agency Along the United states of america

    Reply

Leave a Reply