Anteriormente, quando fazíamos a diagramação de nossos sites, utilizávamos <div>, <div> e mais <div>... bom, isso não mudou muito, porem, agora, ao invés de criarmos um <div> para para definirmos os setores de nosso layout, temos um conjunto de tags para tornar mais lógica a distribuição do conteúdo de nossas páginas, facilitando o trabalho de ferramentas de indexação e, até mesmo, de acessibilidade. São essas tags:
- <header></header> : define o "cabeçalho" de sua página ou de seções da mesma, ou seja, na maioria dos sites, onde ficam o logotipo e/ou título da página e opções de navegação, e, no caso de seções, onde se encontram o título e eventuais descrições;
- <nav></nav> : define as opções de navegação, ou seja, é a área onde se definem os menus (listas) de navegação para as páginas de seu site;
- <article></article> : define um artigo ou, de forma mais "clara", uma área de página que reúne um determinado tipo de conteúdo, como, por exemplo, as de postagens de um blog;
- <section></section> : define uma seção "genérica" de uma página, ou seja, uma parte "qualquer" de uma página (eu, normalmente, o utilizo para separar elementos relacionados, como, no caso de um blog, cada post);
- <aside></aside> : define uma área lateral ao conteúdo principal da página, como uma barra lateral ou menu lateral (se fossemos utilizar este blog como exemplo e ele fosse construído utilizando HTML 5, a área a direita desta postagem poderia ser montada dentro de uma tag "aside");
- <footer></footer> : assim como a tag <header> define um cabeçalho, a tag <footer> define um rodapé, seja de uma página, seja de uma seção.
Para demonstrar esse novo método de estruturação, abaixo segue um exemplo teórico e bem simples (sem qualquer conteúdo), seguido de um link para um exemplo "prático" bem simples que eu, inclusive, utilizei recentemente para um trabalho da faculdade.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Meu blog</title>
5: </head>
6: <body>
7: <header>
8: <h1>Meu blog</h1>
9: <nav>
10: <ul>
11: <li><a href="#">Home</a></li>
12: <li><a href="#">Outra página</a></li>
13: <li><a href="#">Uma terceira página</a></li>
14: </ul>
15: </nav>
16: </header>
17:
18: <article id="art_postagens">
19:
20: <section class="postagem">
21: <header>
22: <hgroup>
23: <h3>Seja bem vindo ao blog "Meu blog"!</h3>
24: <h4>Aqui você encontra muito conteúdo interessante</h4>
25: </hgroup>
26: </header>
27: <div class="sectioncontent">
28: <p>Este é apenas um texto introdutório, com o intuito de promover esta página...</p>
29: <p>Falta de criatividade para redigir um texto que faça algum sentido para um mero exemplo é um problema.</p>
30: </div>
31: </section>
32:
33: <section class="postagem">
34: <header>
35: <hgroup>
36: <h3>Uma segunda postagem qualquer...</h3>
37: <h4>Nãoi consegui pensar em nada melhor para escrever aqui.</h4>
38: </hgroup>
39: </header>
40: <div class="sectioncontent">
41: <p>Ainda bem que escolhi fazer Sistemas de Informação a Letras, pois não tenho a mínima criatividade para escrever.</p>
42: </div>
43: </section>
44:
45: </article>
46:
47: <aside id="sidebar_amigos">
48: <section class="listablogs">
49: <h4>Blogs amigos:</h4>
50: <ul>
51: <li><a href="#">GcmInfo</a></li>
52: <li><a href="#">Blog do José</a></li>
53: <li><a href="#">Blog da Maria</a></li>
54: </ul>
55: </section>
56: </aside>
57:
58: <footer>
59: <p>Desenvolvido por Guilherme Caeiro de Mattos.</p>
60: </footer>
61:
62: </body>
63: </html>
Agora, ao exemplo mais prático:
Para visualizá-lo, basta clicar em "exemplo" abaixo e, para visualizar o código do mesmo, basta, em seu navegador, procurar pela opção "Visualizar/Exibir código fonte" ou, na maioria dos casos, apertar em seu teclado "CTRL + U".
Exemplo
Bom, acho que isto foi tudo por enquanto.
Quanto ao próximo post, não tenho certeza do que irei tratar, porem, quando resolver isso, editarei esta postagem e começarei a escrever a próxima.
Ah! Também é possível que eu edite esta para adicionar algo que possa ter ficado faltando (por exemplo, estou pensando em comentar o código HTML postado aqui, apesar de o mesmo já ser meio "auto explicativo".
Tutorial HTML 5, parte 3 - ...
As formatações efetuadas nos comandos e trechos de arquivos de configuração foram geradas utilizando a "ferramenta" Source Code Formatter, encontrada neste link.
