Exemplo Estrutura HTML 5

Exemplo de uma estrutura inicial HTML 5 usando header, nav, footer, article, section e aside .


<!doctype html>
<html>
 <head>
 <title>Book Here</title>
 </head>
 <body>
 <header>
 <h1>This is my Title</h1>
 <nav>
 <ul>
 <li><a href="/a">Games</a>
 <li><a href="/b">Forum</a>
 <li><a href="/c">Download</a>
 </ul>
 </nav>
 </header>
 <aside>
 <h1>Twitter Feed</h1>
 <blockquote cite="http://twitter.example.net/a">
 I'm on vacation, writing my blog.
 </blockquote>
 <blockquote cite="http://twitter.example.net/b">
 I'm going to go on vacation soon.
 </blockquote>
 </aside>
 <main>
 <article class="book">
 <header>
 <h2>my book</h2>
 <p>a sample with not much content</p>
 <p><small>published by dummy publicorp ltd.</small></p>
 </header>

<section class="chapter">
 <h3>my first chapter</h3>
 <p>this is the first of my chapters. it doesn't say much.</p>
 <p>but it has two paragraphs!</p>
 </section>
 <section class="chapter">
 <h3>it continutes: the second chapter</h3>
 <p>bla dee bla, dee bla dee bla. boom.</p>
 </section>
 <section class="chapter">
 <h3>chapter three: a further example</h3>
 <p>it's not like a battle between brightness and earthtones would go
 unnoticed.</p>
 <p>but it might ruin my story.</p>
 </section>
 <section class="appendix">
 <h3>appendix a: overview of examples</h3>
 <p>these are demonstrations.</p>
 </section>
 <section class="appendix">
 <h3>appendix b: some closing remarks</h3>
 <p>hopefully this long example shows that you <em>can</em> style
 sections, so long as they are used to indicate actual sections.</p>
 </section>
 </article>
 </main>
 <footer>
 <nav>
 <p><a href="/a.html">credits</a> —
 <a href="/b.html">terms of service</a> —
 <a href="/c.html">blog index</a></p>
 </nav>
 <p>copyright © jbkr.com.br</p>
 </footer>
</body>
</html>

Artigos Relacionados:

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *