Exemplo Estrutura HTML 5

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

[html]

<!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>

[/html]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

 

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.