HTML5 - Estrutura e semântica

678 visualizações

Publicada em

Construtalks do dia 03/08 sobre os benefícios da utilização do HTML5.

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
678
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
49
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5 - Estrutura e semântica

  1. 1. HTML5 – Estrutura e Semântica
  2. 2. • Facilita a leitura e interpretação do código • Deixa o código mais limpo e bem escrito • Significado • Ganho de performance • Padronização Por que usar?
  3. 3. Estrutura utilizando HTML5
  4. 4. • Header: Cabeçalho. Indica a introdução de um tema abordado na página. Quanto mais no começo do código está, maior relevância tem para os mecanismos de busca. • Footer: Pode ser utilizado dentro da tag section para indicar o final de um tema, porém não é muito util. • Nav: Agrupa qualquer série de links (internos ou externos) Tags comuns
  5. 5. • Faz referência ao conteúdo principal que o cerca, como se fosse separado do conteúdo principal. Quando está dentro de um article, faz referência ao assunto geral dele, se estiver fora, está relacionado com o conteúdo global do site. Pode estar ou não em uma sidebar. Aside
  6. 6. • Área define o conteúdo principal da página, podendo ele ser uma composição de formulários, um artigo de notícias, etc. desde que seja um conteúdo independente. Article
  7. 7. • Define uma sessão dentro de determinado elemento. Se necessário pode conter um header, um footer e uma nova ordem de títulos. Pode ser utilizada na tag article para separar notícias, eventos, galeria de fotos, etc. Section
  8. 8. Article • Deve conter o conteúdo principal da página • O objetivo é agrupar os principais conteúdos da página • Pode ser combinado com o elemento section para formatação de seu conteúdo Section • Pode conter qualquer tipo de conteúdo • É a versão mais semântica da div (mas não substitui) • O objetivo é marcar uma seção da página Article x Section
  9. 9. Quando usar div • Formatação dentro de uma sessão • Como sessão principal da página (para o site todo não ser interpretado como uma única sessão) • Não precisa de significado semântico DIV x SECTION Quando usar section • Agrupar elementos referentes a um mesmo assunto • Separar as sessões do conteúdo • Estilizar
  10. 10. • HGROUP: agrupa uma sequencia de títulos (do h1 ao h5) • AUDIO/VIDEO: Maneira simples e confiável de inserir um conteúdo multimídia na página. • MAIN: Definir o conteúdo mais importante, que está relacionado com o tópico central da página. Outras tags
  11. 11. • Os mecanismos de busca estão dando cada vez mais importância à semântica, caminhando para a melhor interpretação de cada elemento do site. Apesar de alguns navegadores não interpretarem tão bem algumas tags semanticamente, elas ainda são renderizadas, não atrapalhando o uso. Futuro do HTML 5

×