O documento apresenta as principais tags estruturais do HTML5, incluindo header, nav, section, article, aside, e figure. Cada tag é explicada brevemente com seus usos e propósitos comuns. A tag header é usada para regiões de destaque, nav para áreas de navegação, section para agrupamentos temáticos, article para conteúdo independente como posts, e figure para imagens e outros conteúdos autônomos.

1. TAGS
ESTRUTURAIS
HTML5
Cleiton Francisco @cleitonfco
Monday, October 22, 2012

2. Cleiton Francisco
• Analista de Sistemas no JUS NAVIGANDI
• Desenvolvedor Web
• Especialista em Front-End
• Instrutor do curso de HTML5 e CSS3 da edukee
cleitonfco cleitonfco
Monday, October 22, 2012

3. TAGS DO
HTML
Monday, October 22, 2012

4. Tags do HTML
H1, H2, H3, H4, H5, H6
P, BLOCKQUOTE
FORM, FIELDSET, LABEL, INPUT
TABLE, TBODY, TFOOT, TR, TH, TD
A, IMG
Monday, October 22, 2012

5. Monday, October 22, 2012

6. Monday, October 22, 2012

7. Monday, October 22, 2012

8. DIV
SPAN
Monday, October 22, 2012

9. DIV e SPAN
Indica um bloco (DIV)
ou trecho (SPAN) que irá
receber uma formatação.
Monday, October 22, 2012

10. HEADER
Monday, October 22, 2012

11. HEADER
• Região de destaque
• Contém geralmente os cabeçalhos
• Informações introdutórias sobre o
documento/seção.
Monday, October 22, 2012

12. SECTION
Monday, October 22, 2012

13. SECTION
• Agrupamento temático
• Pode ser precedido por um
HEADER e seguido de um
FOOTER
• Pode ser colocado dentro de
outros, se necessário.
Monday, October 22, 2012

14. NAV
Monday, October 22, 2012

15. NAV
• Área de navegação do documento/
seção
• Normalmente contém uma lista
com os principais links de
navegação
Monday, October 22, 2012

16. NAV
• Pode ter também outras tags (links
em um parágrafo, por exemplo)
• Links no rodapé da página não
precisam ficar dentro de NAV
Monday, October 22, 2012

17. ARTICLE
Monday, October 22, 2012

18. ARTICLE
• Representa um artigo ou qualquer
outro item de conteúdo
independente
• Ex.: post, notícia, comentário, item
de um feed, um widget interativo
ou gadget.
Monday, October 22, 2012

19. ARTICLE
x
SECTION
Monday, October 22, 2012

20. ONDE USAR ARTICLE
• O conteúdo é um artigo de um
Blog, Portal ou Revista
• Transcrição de um Vídeo
• Comentário de artigo
• O título do documento coincide
com o título da seção
Monday, October 22, 2012

21. ONDE NÃO USAR SECTION
• Para aplicar formatação
• Se houver outra tag (HEADER,
FOOTER, ASIDE ou ARTICLE)
semanticamente mais apropriada
• Quando o bloco não tem um
heading (H1...H6)
Monday, October 22, 2012

22. FOOTER
Monday, October 22, 2012

23. FOOTER
• Normalmente contém informações
complementares sobre o
documento/seção
• Exemplo: créditos, links
complementares, referências, etc.
Monday, October 22, 2012

24. ASIDE
Monday, October 22, 2012

25. ASIDE
• Indica um conteúdo
tangencialmente relacionado ao
contéudo principal
Monday, October 22, 2012

26. ASIDE
• O ASIDE tem dois contextos:
dentro e fora de ARTICLE
• DENTRO: complemento do
conteúdo principal
• FORA: complemento do
documento
Monday, October 22, 2012

27. FIGURE
Monday, October 22, 2012

28. FIGURE
• Uma unidade de conteúdo,
opcionalmente com uma legenda
(FIGCAPTION), cujo o conteúdo é
independente do fluxo do
documento
• Ex.: Imagens, Tabelas de
Estatísticas, Gráficos, Citações,
Vídeo, etc.
Monday, October 22, 2012

29. FIGURE
• Não coloque todas as suas
imagens dentro de FIGURE
• O conteúdo em questão pode ser
movido para uma outra região do
documento sem perder o sentido?
Use FIGURE
Monday, October 22, 2012

30. OBRIGADO!
cleitonfco cleitonfco
Monday, October 22, 2012