

Semântica e Estrutura
 Por que usar?

 Facilita a leitura e interpretação do código
 Deixa o código mais limpo e bem escrito
 Significado
 Ganho de performance
 Padronização
Estrutura


 Tags comuns

• 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.
• Nav:
Agrupa uma série de links, desde que sejam blocos de
navegação principal (nav. Primária, secundária e in page).
• Footer:
Pode ser utilizado dentro da tag section para indicar o final de
um tema, porém não é muito util.

 Aside

Faz referência ao conteúdo principal que o cerca,
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.
 Article

Á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.
 Section

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.
 Article x Section

Article Section
 Deve conter o conteúdo  Pode conter qualquer tipo
principal da página de conteúdo
 O objetivo é agrupar os  É a versão mais semântica
principais conteúdos da da div (mas não substitui)
página
 Pode ser combinado com  O objetivo é marcar uma
o elemento section para seção da página
formatação de seu agrupando conteúdos
conteúdo sobre um mesmo assunto
 DIV x SECTION

Quando usar div Quando usar section
 Formatação dentro de  Agrupar elementos
uma sessão referentes a um mesmo
 Como sessão principal da assunto
página (para o site todo  Separar as sessões do
não ser interpretado como
conteúdo
uma única sessão)
 Não precisa de
 Não utilizar se não
significado semântico possuir naturalmente
um título.
 Outras tags

 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.
 Futuro do HTML 5

Os mecanismos de busca estão dando cada vez mais
importância à semântica,
semântica caminhando para a melhor
interpretação de cada elemento do site. Apesar de
alguns navegadores não interpretarem algumas tags
semanticamente, elas ainda são renderizadas, não
prejudicando o uso.
 Links Úteis

 Semantic UI - http://semantic-ui.com/ (contribuição
do Yan)
 HTML5 Doctor - http://html5doctor.com/
(contribuição da Dayanne)
 Erros mais comuns de HTML5 -
http://desenvolvimentoparaweb.com/html/evitand
o-erros-html5/
 Referências


Tableless. (2013). HTML 5 – Mudanças na estrutura e semântica. [Em linha]. Disponível em
http://tableless.com.br/html5-estrutura-semantica/. [consultado em 03-09-2014].
 Tableless. (2013). HTML 5 e SEO: mitos e verdades. [Em linha]. Disponível em
http://tableless.com.br/html-5-e-seo-mitos-e-verdades/. [consultado em 03-09-2014].
 Tableless. (2010). Sections: seções do HTML5 – Parte 1. [Em linha]. Disponível em http
://tableless.com.br/sections-html5/. [consultado em 03-09-2014].
 iMasters. (2010). HTML5 – Semântica, SEO e Organização. [Em linha]. Disponível em http
://imasters.com.br/artigo/16598/web-standards/html5-semantica-seo-e-organizacao/.
[consultado em 03-09-2014].
 Lubiex. (2012). HTML5, SEO e o curioso caso do < H1 >. [Em linha]. Disponível em
http://luibex.com.br/seo/html5-seo-e-o-curioso-caso-do-h1/. [consultado em 03-09-2014].
 Jonathan Lima. (2013). Conheça a nova tag <main> do HTML. [Em linha]. Disponível em
http://jonathanlima.com.br/conheca-a-nova-tag-main-do-html/. [consultado em 03-09-
2014].
 Desenvolvimento para web. (2012). Evitando erros comuns de HTML5. [Em linha].
Disponível em http://desenvolvimentoparaweb.com/html/evitando-erros-html5/.
[consultado em 03-09-2014]