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?
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. • 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. • Á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. • 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. 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. 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. • 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. • 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
