HTML5 Basic Semantic Structure

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;
}

6 Responses to “HTML5 Basic Semantic Structure”

  1. Great! Thanks!

  2. Thanks for sharing. Nice work on the Javascript too!

  3. GoodJob!

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

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

Leave a Reply