TAGS                           ESTRUTURAIS                           HTML5 Cleiton Francisco                       @cleito...
Cleiton Francisco    •    Analista de Sistemas no JUS NAVIGANDI    •    Desenvolvedor Web    •    Especialista em Front-En...
TAGS DO                            HTMLMonday, October 22, 2012
Tags do HTML      H1, H2, H3, H4, H5, H6      P, BLOCKQUOTE      FORM, FIELDSET, LABEL, INPUT      TABLE, TBODY, TFOOT, TR...
Monday, October 22, 2012
Monday, October 22, 2012
Monday, October 22, 2012
DIV                           SPANMonday, October 22, 2012
DIV e SPAN                      Indica um bloco (DIV)                    ou trecho (SPAN) que irá                    receb...
HEADERMonday, October 22, 2012
HEADER      •      Região de destaque      •      Contém geralmente os cabeçalhos      •      Informações introdutórias so...
SECTIONMonday, October 22, 2012
SECTION      •      Agrupamento temático      •      Pode ser precedido por um             HEADER e seguido de um         ...
NAVMonday, October 22, 2012
NAV      •      Área de navegação do documento/             seção      •      Normalmente contém uma lista             com...
NAV      •      Pode ter também outras tags (links             em um parágrafo, por exemplo)      •      Links no rodapé d...
ARTICLEMonday, October 22, 2012
ARTICLE      •      Representa um artigo ou qualquer             outro item de conteúdo             independente      •   ...
ARTICLE                              x                           SECTIONMonday, October 22, 2012
ONDE USAR ARTICLE      •      O conteúdo é um artigo de um             Blog, Portal ou Revista      •      Transcrição de ...
ONDE NÃO USAR SECTION      •      Para aplicar formatação      •      Se houver outra tag (HEADER,             FOOTER, ASI...
FOOTERMonday, October 22, 2012
FOOTER      •      Normalmente contém informações             complementares sobre o             documento/seção      •   ...
ASIDEMonday, October 22, 2012
ASIDE      •      Indica um conteúdo             tangencialmente relacionado ao             contéudo principalMonday, Octo...
ASIDE      •       O ASIDE tem dois contextos:              dentro e fora de ARTICLE          •     DENTRO: complemento do...
FIGUREMonday, October 22, 2012
FIGURE      •      Uma unidade de conteúdo,             opcionalmente com uma legenda             (FIGCAPTION), cujo o con...
FIGURE      •      Não coloque todas as suas             imagens dentro de FIGURE      •      O conteúdo em questão pode s...
OBRIGADO!                     cleitonfco   cleitonfcoMonday, October 22, 2012
Upcoming SlideShare
Loading in …5
×

Tags estruturais-html5-gurupi-outubro-2012

922 views
846 views

Published on

Se você é daqueles que vê uma página recheada de novas tags estruturais do HTML5 (cabeçalho com HEADER, rodapé com FOOTER, NAVs, SECTIONs, ASIDEs, etc), e não tem certeza se aquilo realmente está correto; ou se já se perguntou "qual o significado de cada uma dessas tags", então você precisa aprender a semântica correta das novas tags do HTML5 e finalmente saber quando (não) usá-las.

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
922
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
22
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Tags estruturais-html5-gurupi-outubro-2012

  1. 1. TAGS ESTRUTURAIS HTML5 Cleiton Francisco @cleitonfcoMonday, October 22, 2012
  2. 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 cleitonfcoMonday, October 22, 2012
  3. 3. TAGS DO HTMLMonday, October 22, 2012
  4. 4. Tags do HTML H1, H2, H3, H4, H5, H6 P, BLOCKQUOTE FORM, FIELDSET, LABEL, INPUT TABLE, TBODY, TFOOT, TR, TH, TD A, IMGMonday, October 22, 2012
  5. 5. Monday, October 22, 2012
  6. 6. Monday, October 22, 2012
  7. 7. Monday, October 22, 2012
  8. 8. DIV SPANMonday, October 22, 2012
  9. 9. DIV e SPAN Indica um bloco (DIV) ou trecho (SPAN) que irá receber uma formatação.Monday, October 22, 2012
  10. 10. HEADERMonday, October 22, 2012
  11. 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. 12. SECTIONMonday, October 22, 2012
  13. 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. 14. NAVMonday, October 22, 2012
  15. 15. NAV • Área de navegação do documento/ seção • Normalmente contém uma lista com os principais links de navegaçãoMonday, October 22, 2012
  16. 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 NAVMonday, October 22, 2012
  17. 17. ARTICLEMonday, October 22, 2012
  18. 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. 19. ARTICLE x SECTIONMonday, October 22, 2012
  20. 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çãoMonday, October 22, 2012
  21. 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. 22. FOOTERMonday, October 22, 2012
  23. 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. 24. ASIDEMonday, October 22, 2012
  25. 25. ASIDE • Indica um conteúdo tangencialmente relacionado ao contéudo principalMonday, October 22, 2012
  26. 26. ASIDE • O ASIDE tem dois contextos: dentro e fora de ARTICLE • DENTRO: complemento do conteúdo principal • FORA: complemento do documentoMonday, October 22, 2012
  27. 27. FIGUREMonday, October 22, 2012
  28. 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. 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 FIGUREMonday, October 22, 2012
  30. 30. OBRIGADO! cleitonfco cleitonfcoMonday, October 22, 2012

×