tags estruturais-html5-gurupi-outubro-2012

HTML5

TAGSESTRUTURAIS

Cleiton Francisco @cleitonfcoMonday, October 22, 2012

Cleiton Francisco

cleitonfcocleitonfco

• Analista de Sistemas no JUS NAVIGANDI

• Desenvolvedor Web

• Especialista em Front-End

• Instrutor do curso de HTML5 e CSS3 da edukee

Monday, 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, IMG

Tags do HTML


DIVSPAN


Indica um bloco (DIV)

ou trecho (SPAN) que irá

receber uma formatação.

DIV e SPAN


HEADER


• Região de destaque

• Contém geralmente os cabeçalhos

• Informações introdutórias sobre o documento/seção.

HEADER


SECTION


• Agrupamento temático

• Pode ser precedido por um HEADER e seguido de um FOOTER

• Pode ser colocado dentro de outros, se necessário.

SECTION


NAV


• Área de navegação do documento/seção

• Normalmente contém uma lista com os principais links de navegação

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

NAV


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.

ARTICLE


ARTICLE x

SECTION


• 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

ONDE USAR ARTICLE


• 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)

ONDE NÃO USAR SECTION


FOOTER


• Normalmente contém informações complementares sobre o documento/seção

• Exemplo: créditos, links complementares, referências, etc.

FOOTER


ASIDE


• Indica um conteúdo tangencialmente relacionado ao contéudo principal

ASIDE


• O ASIDE tem dois contextos: dentro e fora de ARTICLE

• DENTRO: complemento do conteúdo principal

• FORA: complemento do documento

ASIDE


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.

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

FIGURE


cleitonfcocleitonfco

OBRIGADO!


tags estruturais-html5-gurupi-outubro-2012

Documents