Aula 19

01/06/2017
Semana 17
Layout com HTML 5
Elementos semânticos HTML5
• Um elemento semântico descreve claramente o seu significado tanto
para o navegador como para o desenvolvedor.
• <div> e <span> são exemplos de elementos não-semânticos. Não diz
nada sobre seu conteúdo.
• <form> e <table> são exemplos de elementos semânticos. Define
claramente o seu conteúdo.
• Muitos sites contêm código HTML tal como: <div id="nav"> <div
class="header"> <div id="footer"> para indicar navegação, cabeçalho
e rodapé.
Por que elementos semânticos?
• Com HTML4, os desenvolvedores usam seus próprios id / class para
estilizar elementos: cabeçalho, topo, rodapé, menu, navegação,
principal, contêiner, conteúdo, artigo, barra lateral, topnav, etc.
• Isso tornou impossível para os buscadores (google, bing, yahoo por
exemplo) identificar o conteúdo correto da página da web.
• Com os novos elementos HTML5 (<header> <footer> <nav>
<section> <article>), os buscadores conseguem fazer melhor o seu
trabalho
Elementos HTML5
semânticos que
definem diferentes
partes de uma
página Web
<header>
• Descreve o cabeçalho de um documento ou seção
• Deve ser utilizado como um container para conteúdo introdutório
• Geralmente contém cabeçalho de seções (h1...h6)
• Também pode ser utilizado para conter um índice, formulário de
busca, logos relevantes etc

5
<header>
• Pode haver vários elementos
<header> em um documento

• Não pode ser colocado

dentro de <footer>,
<address> ou dentro de
outro <header>.

6
<nav>
• Define um conjunto de links de navegação (bloco de links)
• Nem todos os links devem estar dentro de <nav>
• Exemplo:

7
<section>
• Define uma seção em um documento
• Uma seção é um agrupamento temático de conteúdo, tipicamento
com um título
• Normalmente, uma página pode ser dividida em seções para
introdução, conteúdo e informações de contato.
• Exemplo:

8
<article>
• Especifica conteúdo independente, auto-suficiente.
• Potenciais fontes para o elemento <article>:
• Postagem de fórum
• Postagem de blog
• Artigo de jornal
• Semanticamente é possível aninhar <article> em <section> e vice-
versa

9
<aside>
• Define algum conteúdo adicional a um conteúdo (deve estar
relacionado)
• O fato do conteúdo estar localizado ao lado esquerdo/direito de outro
conteúdo não é razão suficiente para utilizá-lo.
• Dica: pode ser colocado como barra lateral de um artigo

10
<footer>
• Especifica um rodapé para um documento ou seção.
• Um elemento <footer> deve conter informações sobre seu elemento
onde está contido.
• Um rodapé normalmente contém o autor do documento,
informações de direitos autorais, links para termos de uso,
informações de contato, etc.
• Você pode ter vários elementos <footer> em um único documento.
Exercícios
• Construir código HTML e CSS
para a página ao lado.

12
Exercícios
• Construir código HTML e
CSS para a página ao lado.

13
Exercícios
• Construir código
HTML e CSS para a
página ao lado.

14