• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Tags estruturais-html5-gurupi-outubro-2012
 

Tags estruturais-html5-gurupi-outubro-2012

on

  • 816 views

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 ...

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.

Statistics

Views

Total Views
816
Views on SlideShare
809
Embed Views
7

Actions

Likes
2
Downloads
14
Comments
1

2 Embeds 7

http://pinterest.com 5
http://www.pinterest.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Tags estruturais-html5-gurupi-outubro-2012 Tags estruturais-html5-gurupi-outubro-2012 Presentation Transcript

    • TAGS ESTRUTURAIS HTML5 Cleiton Francisco @cleitonfcoMonday, October 22, 2012
    • 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
    • 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, TH, TD A, IMGMonday, October 22, 2012
    • 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á receber uma formatação.Monday, October 22, 2012
    • HEADERMonday, October 22, 2012
    • HEADER • Região de destaque • Contém geralmente os cabeçalhos • Informações introdutórias sobre o documento/seção.Monday, October 22, 2012
    • SECTIONMonday, October 22, 2012
    • 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
    • NAVMonday, October 22, 2012
    • NAV • Área de navegação do documento/ seção • Normalmente contém uma lista com os principais links de navegaçãoMonday, October 22, 2012
    • 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
    • ARTICLEMonday, October 22, 2012
    • 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
    • ARTICLE x SECTIONMonday, October 22, 2012
    • 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
    • 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
    • FOOTERMonday, October 22, 2012
    • FOOTER • Normalmente contém informações complementares sobre o documento/seção • Exemplo: créditos, links complementares, referências, etc.Monday, October 22, 2012
    • ASIDEMonday, October 22, 2012
    • ASIDE • Indica um conteúdo tangencialmente relacionado ao contéudo principalMonday, October 22, 2012
    • ASIDE • O ASIDE tem dois contextos: dentro e fora de ARTICLE • DENTRO: complemento do conteúdo principal • FORA: complemento do documentoMonday, October 22, 2012
    • FIGUREMonday, October 22, 2012
    • 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
    • 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
    • OBRIGADO! cleitonfco cleitonfcoMonday, October 22, 2012