Successfully reported this slideshow.
Your SlideShare is downloading. ×

Tags estruturais-html5-gurupi-outubro-2012

Ad

TAGS
                           ESTRUTURAIS
                           HTML5
 Cleiton Francisco                       @cle...

Ad

Cleiton Francisco

    •    Analista de Sistemas no JUS NAVIGANDI
    •    Desenvolvedor Web
    •    Especialista em Fron...

Ad

TAGS DO
                            HTML

Monday, October 22, 2012

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 30 Ad
1 of 30 Ad

Tags estruturais-html5-gurupi-outubro-2012

Download to read offline

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.

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.

More Related Content

Tags estruturais-html5-gurupi-outubro-2012

  1. 1. TAGS ESTRUTURAIS HTML5 Cleiton Francisco @cleitonfco Monday, 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 cleitonfco Monday, October 22, 2012
  3. 3. TAGS DO HTML Monday, 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, IMG Monday, October 22, 2012
  5. 5. Monday, October 22, 2012
  6. 6. Monday, October 22, 2012
  7. 7. Monday, October 22, 2012
  8. 8. DIV SPAN Monday, 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. HEADER Monday, 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. SECTION Monday, 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. NAV Monday, 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ção Monday, 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 NAV Monday, October 22, 2012
  17. 17. ARTICLE Monday, 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 SECTION Monday, 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ção Monday, 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. FOOTER Monday, 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. ASIDE Monday, October 22, 2012
  25. 25. ASIDE • Indica um conteúdo tangencialmente relacionado ao contéudo principal Monday, 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 documento Monday, October 22, 2012
  27. 27. FIGURE Monday, 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 FIGURE Monday, October 22, 2012
  30. 30. OBRIGADO! cleitonfco cleitonfco Monday, October 22, 2012

×