Your SlideShare is downloading. ×
Tags estruturais-html5-gurupi-outubro-2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tags estruturais-html5-gurupi-outubro-2012

690

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á …

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
690
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TAGS ESTRUTURAIS HTML5 Cleiton Francisco @cleitonfcoMonday, 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 cleitonfcoMonday, October 22, 2012
  • 3. TAGS DO HTMLMonday, 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, IMGMonday, October 22, 2012
  • 5. Monday, October 22, 2012
  • 6. Monday, October 22, 2012
  • 7. Monday, October 22, 2012
  • 8. DIV SPANMonday, 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. HEADERMonday, 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. SECTIONMonday, 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. NAVMonday, October 22, 2012
  • 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. 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. ARTICLEMonday, 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 SECTIONMonday, 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çãoMonday, 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. FOOTERMonday, 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. ASIDEMonday, October 22, 2012
  • 25. ASIDE • Indica um conteúdo tangencialmente relacionado ao contéudo principalMonday, October 22, 2012
  • 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. FIGUREMonday, 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 FIGUREMonday, October 22, 2012
  • 30. OBRIGADO! cleitonfco cleitonfcoMonday, October 22, 2012

×