HTML5 – Estrutura e Semântica
• Facilita a leitura e interpretação do código 
• Deixa o código mais limpo e bem escrito 
• Significado 
• Ganho de perfo...
Estrutura utilizando HTML5
• Header: Cabeçalho. Indica a introdução de um tema 
abordado na página. Quanto mais no começo do código 
está, maior rele...
• Faz referência ao conteúdo principal que o cerca, como se 
fosse separado do conteúdo principal. Quando está dentro 
de ...
• Área define o conteúdo principal da página, podendo ele 
ser uma composição de formulários, um artigo de 
notícias, etc....
• Define uma sessão dentro de determinado elemento. Se 
necessário pode conter um header, um footer e uma nova 
ordem de t...
Article 
• Deve conter o conteúdo 
principal da página 
• O objetivo é agrupar os 
principais conteúdos da 
página 
• Pode...
Quando usar div 
• Formatação dentro de 
uma sessão 
• Como sessão principal da 
página (para o site todo 
não ser interpr...
• HGROUP: agrupa uma sequencia de títulos (do h1 ao h5) 
• AUDIO/VIDEO: Maneira simples e confiável de inserir 
um conteúd...
• Os mecanismos de busca estão dando cada vez mais 
importância à semântica, caminhando para a melhor 
interpretação de ca...
Próximos SlideShares
Carregando em…5
×

HTML5 - Estrutura e semântica

690 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
690
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
50
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

×