tags estruturais-html5-gurupi-outubro-2012
Post on 18-Dec-2014
663 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Monday, October 22, 2012
H1, H2, H3, H4, H5, H6
P, BLOCKQUOTE
FORM, FIELDSET, LABEL, INPUT
TABLE, TBODY, TFOOT, TR, TH, TD
A, IMG
Tags do HTML
Monday, October 22, 2012
Monday, October 22, 2012
Monday, October 22, 2012
Monday, October 22, 2012
DIVSPAN
Monday, October 22, 2012
Indica um bloco (DIV)
ou trecho (SPAN) que irá
receber uma formatação.
DIV e SPAN
Monday, October 22, 2012
HEADER
Monday, October 22, 2012
• Região de destaque
• Contém geralmente os cabeçalhos
• Informações introdutórias sobre o documento/seção.
HEADER
Monday, October 22, 2012
SECTION
Monday, October 22, 2012
• Agrupamento temático
• Pode ser precedido por um HEADER e seguido de um FOOTER
• Pode ser colocado dentro de outros, se necessário.
SECTION
Monday, October 22, 2012
NAV
Monday, October 22, 2012
• Área de navegação do documento/seção
• Normalmente contém uma lista com os principais links de navegação
NAV
Monday, October 22, 2012
• 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
Monday, October 22, 2012
ARTICLE
Monday, October 22, 2012
• 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
Monday, October 22, 2012
ARTICLE x
SECTION
Monday, October 22, 2012
• 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
Monday, October 22, 2012
• 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
Monday, October 22, 2012
FOOTER
Monday, October 22, 2012
• Normalmente contém informações complementares sobre o documento/seção
• Exemplo: créditos, links complementares, referências, etc.
FOOTER
Monday, October 22, 2012
ASIDE
Monday, October 22, 2012
• Indica um conteúdo tangencialmente relacionado ao contéudo principal
ASIDE
Monday, October 22, 2012
• O ASIDE tem dois contextos: dentro e fora de ARTICLE
• DENTRO: complemento do conteúdo principal
• FORA: complemento do documento
ASIDE
Monday, October 22, 2012
FIGURE
Monday, October 22, 2012
• 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
Monday, October 22, 2012
• 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
Monday, October 22, 2012
cleitonfcocleitonfco
OBRIGADO!
Monday, October 22, 2012
top related