Semântica com o HTML5

Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código mais “usável”, acessível, utilizando poucas classes e ID’s.

Além disso, você vai esperar mais 10 anos para utilizar HTML até que os padrões finais sejam definidos ou vai ser mais um adepto já que o suporte a HTML 5 nos browsers está aumentando?

01.< !DOCTYPE html>
02.<html>
03. <head>
04. <meta charset="UTF-8" />
05. <title>Site Name &bull; Page Title</title>
06. </head>
07. <body>
08. <nav>
09. <h1><a href="/">Site Name</a></h1>
10. <ul>
11. <li><a href="#">Nav Link</a></li>
12. <li><a href="#">Nav Link</a></li>
13. <li><a href="#">Nav Link</a></li>
14. </ul>
15. </nav>
16. <header>
17. <p>Welcome to the site!</p>
18. <a href="#">Call to action!</a>
19. </header>
20. <section>
21. <aside>
22. <!-- Sidebar -->
23. </aside>
24. <article>
25. <header>
26. <h2>Article Name</h2>
27. <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
28. </header>
29. <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
30. <figure>
31. <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
32. <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
33. </figure>
34. <p>Lorem ipsum dolor...</p>
35. </article>
36. </section>
37. <footer>
38. <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
39. </footer>
40. </body>
41.</html>
Anúncios

Deixe um comentário

Arquivado em Acessibilidade na internet, Arquitetura da Informação, XHTML

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s