Um tutorial amigavél para desenvolver páginas web com sentido
“Semântica do HTML” se refere à ideia de que todas as suas marcações HTML devem trasmitir o significado subjacente do seu conteúdo—não sua aparência. Nós já estamos escrevendo Semântica HTML (Como por exemplo, usando
<strong> ao invés de <b>), mas há todo um conjunto de elementos feitos com o propósito individual de
adicionar mais significado ao layout geral de uma página web.
Eles são chamados de "elementos de seção", e se parecem com isso aqui:
Usar isso como uma alternativa para os elementos <div>
é um aspecto importante para o desenvolvimento web moderno porque isso
facilita os mecanismos de busca, leitores de tela e outras maquinas a
identificar as diferentes partes do seu website. Isso ajuda até mesmo
você, como um desenvolvedor, a manter seu site organizado, o que
torna sua manutenção mais fácil e prática.
Neste capítulo vamos voltar ao HTML puro— sem
box model,
flexbox, ou
esquemas de posicionamento. Entretando, isso não quer dizer que você não pode aplicar todas
as regras de CSS dos capítulos anteriores a esses novos elementos.
Pense que secionar elementos como uma
<div>, mas com um significado.
Configuração
Nosso exemplo pra esse capítulo será um documento HTML
simples e não estilizado. Crie um novo
Projeto Atom
chamado semantica-html e nele um novo arquivo chamado
article.html. Adicione o seguinte:
<!DOCTYPE html><htmllang='en'><head><metacharset='UTF-8'/><title>Semântica HTML</title></head><body><h1>Fazer Front é Difícil!</h1><ul><li><ahref='#'>Home</a></li><li><ahref='#'>Sobre</a></li><li><ahref='#'>Blog</a></li><li><ahref='#'>Cadastro</a></li></ul></body></html>
O <h1> e o <ul> são
previsivelmente o banner do topo de nosso website—e
não o conteúdo principal da página web. Nós nunca precisamos
fazer essa distinçã o antes, mas sobre isso que todo este capítulo
se trata.
As Estruturas do Documento
Todo documento HTML tem "estruturas", que é como ferramentas de procura
e leitores de tela vêem a hierarquia do conteúdo na página.
Os elementos de cabeçalho Do <h1> até o <h6> contribuem todos para as estruturas do documento da página. Vamos conferir isso ao adicionarmos um post bobo em nosso arquivo article.html:
O
HTML5 Outliner é uma ferramenta conveniente pra inspecionar as estruturas de uma página. Vá em frente e cole todo seu article.html no campo de texto inferior. Você vai
ver as estruturas para nosso exemplo, que atualmente tem a seguinte estrutura. É uma lembrança dos trabalhos de esboço que você aprendeu a fazer na escola.
Cada elemento <h1> cria uma nova seção nas estruturas do documento, e qualquer tipo de cabeçalho menos saliente que segue isso é considerado uma subseção abaixo do cabeçalho de nível do topo. E.x., a seção
Semântica HTML tem duas subseções nela:
A Estrutura do Documento e
A Semântica HTML de Linha. O mesmo acontece com os elementos
<h2> e <h3> e da mesma força até o <h6>.
Note que o valor atual do nível de cabeçalho não importa: o que importa mesmo é se a importância vai ser maior ou igual do que o cabeçalho da seção atual. Como por exemplo, mude os cabeçalhos
<h3> para <h4> e rode o arquivo novamente pelo Outliner Tool novamente. Desde que
<h4> ainda seja menos importante que seu pai
<h2>, isso não deve ter nenhum efeito nas estruturas.
Como a estrutura deste documento se relaciona com a semântica HTML? Bem, cabeçalhos são uma das coisas com mais semântica em uma página web. Eles têm um papel importante em como ferramentas de pesquisa determinam o que é importante na sua página web.
Pra completar, os elementos de semântica HTML que estamos prestes a percorrer adicionam mais significado e às vezes alteram o comportamento de estruturação padrão discutido aqui.
Articles
O elemento <article> representa um atigo independente em uma webpage. Ele deveria somente agrupar conteúos que possam ser arrancados ta sua página e distribuídos em um contexto totalmente diferente. Por exemplo, no estilo app
Flipboard deveria ser capaz de pegar um elemento <article> do seu site, aprensentá-lo em seu app e ainda ter total sentido para seus leitores.
Em nosso exemplo, nós podemos usar o <article> para marcar o conteúdo principal da página sendo uma unidade auto-contida, como:
Perceba como deixamos o aviso de direitos autorais fora do elemento
<article> porque ele é um footer para todo o site—e não especificamente para o nosso artigo. Assim como iremos descobrir brevemente, os <article>’s são essencialmente mini páginas web em nosso documento HTML.
Eles têm seus próprios headers, footers, e uma estruturação que são completamente isoladas do resto do seu site.
Usando Multiplos Elementos de Artigo
Para coisas como posts de blogs, artigos de jornais ou páginas web didicadas à um único tópico há frequentemente somente um elemento
<article> na página. Mas, é perfeitamente bacana ter mais que um elemento
<article> por página. Um bom exemplo é uma página que apresenta muitos posts de blog. Cada um vai ser contido em um conjunto diferente de tags <article> (você não precisa adicionar isso em nossa página
article.html):
<article><h1>Primeiro post</h1><p>Algum conteúdo</p></article><article><h1>Segundo post</h1><p>Mais algum conteúdo</p><h2>Subseção</h2><p>Alguns detalhes</p></article><article><h1>Último post</h1><p>Pouquinho final de texto</p></article>
Isso diz pra qualquer um olhando nossa página que existe três artigos distintos os quais podem ser agrupados. Pense nisso como numa forma de mesclar multiplos arquivos HTML em um único arquivo sem confundir mecanismos de busca, navegadores, ou outras
marquinas que estão tentando analisar nosso conteúdo.
Compare isso com um punhado de elementos genéricos <div> com nomes de classes arbitrários, e você pode ver como a Semântica HTML faz a Web um lugar muito mais fácil de navegar.
Sections
O elemento <section> é um tipo de
<article>, exceto que isso não faz sentido fora do contexto do documento. Isso é, um aplicativo como o Fliboard não iria tentar pegar todas as <section>’s da sua pagina e as apresentar
como peças independentes do conteúdo.
Pense na <section> como uma forma explícita de definir seções numa estrutura de um documento. Por que iriamos querer fazer isso ao invés de deixar os níveis de cabeçalho fazerem isso por nós? Várias vezes, você precisa de um container para agrupar
uma seção por propósitos de layout, e faz mais sentido usar um elemento mais descritivo
<section> ao invés da genérica
<div>.
Vamos secionar duas partes do nosso arquivo article.html:
<section><!-- Adicione isso --><h2>A Estrutura do Documento</h2><p>O HTML5 inclui diversos elementos de "secionamento" que
afetam a estrutura do documento.</p><h3>Headers</h3><p>O elemento <code><header></code> é um elemento do tipo
de seção.</p><h3>Footers</h3><p>Assim como é o elemento <code><footer></code>.</p></section><!-- E isso --><section><!-- E isso aqui também! --><h2>Semantica HTML de Linha</h2><p>O elemento <code><time></code> é semântico, mas não é
de seção.</p></section><!-- Só não vai esquecer disso!!! -->
Isso mantém a estrutura de nosso documento exatamente a mesma enquanto lhe dá um pouco mais de extrutura semântica, assim como nos dá um belo gancho pra qualquer estilo CSS que pudermos querer aplicar (Como por exemplo, a cor do background pra uma seção particular).
<section> e a Estrutura do Documento
A alteração anterior tem um efeito colateral interessante no comportamento implícito de secionamento de nossos cabeçalhos. Preste atenção no que qacontece quando nós tranferimos o segundo <h2> para um nível de estrutura mais abaixo:
<section><h6>Semântica HTML de Linha</h6><!-- Mude esse nível de cabeçalho --><p>O elemento <code><time></code> é semântico, mas não é
de seção.</p></section>
A tag <h6> é de um nível mais baixo que a tag
<h3> que a procede, então você vai esperar que isso se torne parte da seção Footer. Mas, esse não é nosso caso: a estrutura do documento é exatamente a mesma que antes.
Por adicionar elementos <section>, nós estamos dizendo para a estrutura do documento que ela deveria ser definida pela estrutura de aninhamento do elemento <section> ao invés dos níveis de cabeçalho. Isso basicamente
significa que cada
<section> pode ter seu próprio conjunto de cabeçalhos
<h1> ao <h6> que são independentes do resto da página.
Entretanto, você não deveria utilizar o elemento <section> pra manipular a estrutura do documento dessa forma porque navegadores, leitores de tela, e outras ferramentas de busca não vão interpretar propriamente o efeito da <section> na estrutura do documento. Ao invés disso, sempre defina a estrutura de uma página por níveis de cabeçalhos, usando
<section> somente como substituição para conteiners
<div>’s quando apropriado.
Perceba também que cada elemento <section> deveria conter pelo menos um cabeçalho, caso contrário ele vai adicionar uma "seção sem título" na estrutura do seu documento. Como um exemplo, tente atualizar nosso
article.html para combinar com o seguinte, então tente percorê-lo pelo Outliner Tool novamente:
<h2>Semântica HTML de Linha</h2><section><!-- Essa vai ser uma "Seção sem Título" --><p>O elemento <code><time></code> é semântico, mas não é
de seção.</p></section>
Isso cria uma nova seção, mas por não ter um cabeçalho associado a ela, a estrutura do documento não sabe como a chamar. Isso deve ser normalmente evitado quando usando elementos
<section>.
Como definido pelas especificações do HTML5,
<section> é um elemento bem genérico. Que, somado ao fato de browsers e leitores de tela não conseguirem interpretar propriamente seus papés na estruturação do documento torna difícil entender quando e como aproveitá-lo apropriadamente.
Nosso conselho é usar somente a tag
<section> como um agrupador
<div> mais descritivo para as seções implicitamente definidas em sua página. Não use isso para conteúdo auto-contido (é pra isso que o
<article> serve) ou quando for
puramente para fins de layout.
Elementos Nav
O elemento <nav> lhe permite marcar as seções
de navegação de seu website. Isso vai desde a navegação principal do site,
link realcionados a páginas na sidebar, conteúdo de tabelas e praticamente
quaisquer grupos de links. Por exemplo, nós deveriamos colocar o menu de
navegação do nosso site em uma tag <nav>:
<h1>Fazer Front é Fácil!</h1><nav><!-- Acrescente isso --><ul><li><ahref='#'>Home</a></li><li><ahref='#'>About</a></li><li><ahref='#'>Blog</a></li><li><ahref='#'>Sign Up</a></li></ul></nav><!-- Isso aqui também! -->
Essa é uma grande informação semântica para mecanismos de busca. Isso
ajuda les a rapidamente identificar a estrutura de todo seu website,
tornando mais fácil de descobrir outras páginas. Assim como veremos em
Asides, é possível incluir múltiplos
elementos <nav> em uma única página se você tiver
diversos conjuntos de links relacionados.
Headers
O elemento <header> é uma nova peça semântica de marcação, não os confunda com os headings ( os elementos
<h1>-<h6>). Isso denota um conteúdo introdutória pra uma seção, article ou uma página web inteira.
“Conteúdo introdutório” pode ser qualquer coisa da marca de sua compania até até recursos de navegação ou informação do autor.
É uma prática melhor agrupar o nome/logo de um website e sua navegação principal em um <header>, então vamos em frente e adicionar um em nosso projeto:
<header><h1>Fazer front é Fácil!</h1><nav><ul><li><ahref='#'>Home</a></li><li><ahref='#'>About</a></li><li><ahref='#'>Blog</a></li><li><ahref='#'>Sign Up</a></li></ul></nav></header>
Headers são somente associados com o elemento de seção mais próximo—tipicamente elementos <body>,
<section>, ou
<article>. Isso quer dizer que você consegue utilizar múltiplos elementos <header> para adicionar um conteúdo introdutório a diferentes partes de um documento. Por exemplo, o título, author e
a data de publicação de nosso <article> que é um bom candidato para outro <header>:
<article><header><h1>Semântica HTML</h1><p>Por Troy McClure. Publicado em 3 de janeiro</p></header><p>Esse é um exemplo de uma página explicando a semântica de marcação HTML5.</p><!-- ... -->
Sem esse <header>, ferramentas de busca e leitores de tela não iriam reconhecer que o primeiro <p> estava separado do conteúdo principal do article. Como o
<section>, isso também serve como um gancho CSS conveniente, já que o título e o autor de um blog são frequentemente estilizados diferentemente do resto do article.
Novamente, pense no <header> como uma alternativa mais semântica ao container <div>.
Footers
Conceitualmente, footer são basicamente a mesma coisa que headers, exceto que eles geralmente vem no fim de um article/website oposto ao início.
Casos comuns de uso incluem coisas como notas de direitos autorais, navegação por footer e bios de autores no fim dos posts de blogs.
Footers se comportam da mesma forma que os <header> em que eles estão associados ao elemento de seção mais próximo.
Então, nós podemos usar isso para os direitos autorais e as informações do autor da nossa página dentro de nosso <article>.
Add the following two footer elements to our article.html page:
O <footer> dentro do elemento
<article> é só para os conteúdos daquele artigo, o que faz sentido porque
ele contém a biografia do autor. O segundo footer, por outro lado, é conectado a toda pagina.
Asides
Headers e footer são formas de adicionar informações extras para um article, mas as vezes nós queremos remover
informação de um article. Por exemplo, um blog patrocinado pode conter anúncios sobre a empresa patrocinadora; A tag
<aside> é para isso.
Vamos adicionar um anúncio fake para nosso arquivo
article.html, logo abaixo do header do article:
<article><header><h1>Semântica HTML</h1><p>Por Troy McClure. Publicado em 3 de janeiro.</p></header><!-- Olha! Um anúncio falso! --><asideclass='advert'><imgsrc='some-advert-image.png'/></aside><p>Esse é um exemplo de uma página explicando a semântica de marcação HTML5.</p>
Embora a imagem esteja dentro do elemento <article>, máquinas de leitura sabem que é algo somente tangencial
ao conteúdo. Em adição aos anúncios, <aside> é também apropriado pra destacar definições, status ou citações.
Se isso parecer diferente do resto do article, as chances são dele ser um aside.
Quando usado fora de um <article>, um
<aside> é associado com a página como um todo (bem como o <header>
e o <footer>). Isso torna uma ótima escolha pra marcar uma sidebar por todo o site.
Adicione o seguinte abaixo do fechamento da tag </article>, antes do segundo
<footer>:
<asideclass='sidebar'><h2>Sidebar</h2><p>Algum conteúdo lateral</p><nav><h3>Turorial HTML & CSS Tutorial</h3><ul><li><ahref='#'>Introdução</a></li><li><ahref='#'>Páginas Web Básicas</a></li><li><ahref='#'>etc...</a></li></ul></nav><nav><h3>Tutorial JavaScript</h3><ul><li><ahref='#'>Introdução</a></li><li><ahref='#'>Hello, JavaScript</a></li><li><ahref='#'>etc...</a></li></ul></nav></aside>
Perceba o atributo class em ambos trechos. Se nós estivessemos preocupados com o CSS pra esse capítulo, nós poderiamos estilizar nossos elementos
<aside> exatamente da mesma forma que todas as <div>’s que nós estivemos trabalhando através desse tutorial. Isso nos trás para…
Divs Para Layout
Você deve usar semântica HTML sempre que puder, desde que isso ajude maáquinas a inferir a estrutura de seu conteúdo,
e isso te entregue um vocabulário padronizado para organizar suas páginas web. Entretando, às vezes você precisa de um
container quando nenhum desses elementos semânticos HTML que nós acabamos de cobrir faz sentido. Não há nada de errado em
usar a velha <div> para um propósito puramente de layout.
Para isntancia, se nós queremos centralizar nossa página utilizando nossa querida
técnica de margem automática,
nós precisamos agrupar o conteúdo de toda página em um conteiner. É um conteúdo
completamente apresentacional, então uma <div> é a melhor opção:
Isso é particularmente relevante para flexbox,
já que requer um conjunto enorme de <div> para agroupar itens
flex corretamente. Ocasionalmente você pode perceber que uma <section>
ou uma <nav> são apropriados pra esses itens flex, mas é bem comum
encontar um bocado de elementos visuais <div> em um layout com flexbox.
O ponto é, não use elementos de semântica só pela graça de usar eles. Implementá-los
incorretamente é pior do que não usá-los de fato, então se você estiver em dúvida,
use uma <div> ao invés disso.
Datas e Hora
Para humanos datas e horas vêm de diversas formas. Você pode se referir a terceiro de Janeiro de 2017, como "3/1/2017",
"3 de Janeiro" ou até mesmo "ontem", dependendo da data atual. Análisar esse tipo ambíguo de linguagem natural é
difícil e sucessível a error para máquinas, aí é quando a tag <time> entra em cena.
O elemento <time> representa tanto uma hora de um dia como uma data de um calendário. Fornecer uma data
legível para máquinas torna possivel que navegadores automaticamente façam um link para o calendário do usuário além de facilitar
ferramentas de pesquisa a indentificar datas específicas mais claramente. Uma simples pesquisa Google vai te mostrat o efeito de
incluir o elemento <time> em sua página:
Vamos fazer a data de publicação de nosso artigo não ambígua ao envolvermos ela em tags <time>:
<article><header><h1>Semântica HTML</h1><p>Por Troy McClure. Publicada em <timedatetime='2017-1-3'>3
de Janeiro</time></p></header><!-- ... -->
Uma data legível por máquinas é definida no atibuto datetime. Uma forma fácil de lembrar o formato da data
é que ela vai do maior período de tempo para o menor: ano, mês e então o dia. Note que mesmo o ano não estar sendo incluido
no texto lido por humanos em nossa página, ele diz para ferramentas de busca que nosso artigo foi publicado em 2017.
É possível incluir tempo e fuso horários dentro de nosso datetime também. Se quisessemos adicionar uma hora
de 15:00 no fuso horário PST (Pacific Standard Time) na data de nossa publicação, nos estariamos usando o seguinte:
<timedatetime='2017-1-3 15:00-0800'>3 de janeiro</time>
O próprio horário está no formato de 24 horas, e o -0800 é o deslocamento do fuso-horário a partir do GMT, que é
o fuso horário no meridiano de Greenwich (nesse caso, o -0800 representa o fuso-horário padrão do pacífico).
Endereço
O elemento <address> segue a mesma ideia da tag <time>, ele não lida com a estrutura
geral do documento, mas embeleza seus elementos pais <article> ou <body> com um pouco
de metadados. Isso define informações de contato para o autor do artico ou página web em questão. O <address>não deve ser utilizado para endreços físicos arbitrários.
Por exemplo, talvez nós queiramos adicionar um endereço de email do autor no footer de nosso article:
<footer><p>Este artigo falso foi escrito por alguem do fazerfrontedificil.netlify.app, que
é um lugar muito maneiro pra aprender desenvolvimento web. Esse footer é somente pra conteúdo do elemento
<code><article></code> element.</p><address>
Por favor, entre em contato com <ahref='mailto:troymcclure@example.com'>Troy
McClure</a> para dúvidas sobre esse artigo.
</address></footer>
Por padrão, ele vai ser estilizado da mesma forma que o <em>, mas você pode o mudar com uma regra CSS simples.
Perceba também o novo link de email no href, o qual você pode descobrir mais sobre na
Mozilla Developer Network.
Figuras e Legendas
Por último, mas com certeza não menos importante, há os elementos <figure> e <figcaption>.
O primeiro representa uma "figure" auto-contida, como um diagrama, uma ilustração ou mesmo um trecho de código. The segundo é
opcional e associa uma legenda com o seu elemento pai <figure>.
Um caso de uso comum para ambos é adicionar descrições visíveis para os elementos <img/>, desse jeito:
<section><h2>A Estrutura do Documento</h2><p>O HTML5 inclui diversos elementos de "secionamento" que
afetam a estrutura do documento.</p><figure><imgsrc='semantic-elements.png'alt='Diagrama apresentando os elemtento <article>, <section>, e <nav>'/><figcaption>Novos elementos de semântica HTML5</figcaption></figure><!-- ... -->
O atributo
alt é fortemente relacionado ao elemento
<figcaption>. alt deve servir como uma substituição de texto para a imagem,
enquanto o <figcaption> é uma descrição com suporte tanto para a imagem como para seu
equivalente baseado em texto.
Quando usand um <figcaption> da maneira acima, você pode omitir o atributo alt de uma
imagem de forma segura sem danificar a sua SEO (Searching Engine Optimization). Dependendo de que tipo de imagem você
está trabalhando com, pode ser mais conveninete (e menos redundante) ter <figcaption> visíveis que
os descrevem ao contrário de atributos alt invisíveis
Considerações CSS Legado
E por fim, uma observação rápida em navegadores legado. Os elementos semânticos HTML nesse capitulo foram introduzidos em HTML5.
Todos navegadores modernos reconhecem eles sem nenhum trabalho extra, mas você vai frequentemente ver algo como o seguinte na
folha de estilo CSS global:
section, article, aside, footer, header, nav {
display: block;
}
Isso faz os novos elementos semânticos se comportarem como elementos
<div> (que são caixas de bloco, e não linhas de bloco) em navegadores legado.
Sumário
Definindo estilos gráficos com CSS é como nós realizamos a comunicação das estruturas de uma página web para humanos.
Ao marcar ela com <header>, <article>, <figure> e outros
elementos de seção, nós vamos estár aptos a representar aqueles estilos visuais para maquinas, também.
Para entender porque isso é importante, nós realmente precisamos ser empáticos com máquinas lendo nosso conteúdo. Antes do HTML
semântico havia algo, desenvolvedores usavam um bocado de <div>’s nomes de classes diferentes e de alguma
forma arbitrários para definir as estruturas de suas páginas. Por exemplo, todos os seguintes elementos são nomes lógicos para
um header de largura da página:
Máquinas de leitura costumavam ter que entender todos as <div>’s acima e outras mais. Os novos elementos
semânticos HTML que aprendemos nesse capítulo são como versões padronizadas desses nomes de classes. Agora, eles podem
simplesmente procurar pelo elemento <header>. Nós ainda podemos adicionar quaisquer nomes de classes que
quisermos neles para propósitos de estilização, mas hoje em dia motores de busca e leitores de tela possuem uma forma mais
previsível de identificar headers ao longo de todo website HTML5 na Internet.
Os elementos semânticos que compreendemos nesse capítulo são as melhores práticas para websites modernos, mas mantenha em mente
que eles arranham com força a superfíce quandoo assunto é significado extra para suas web pages. Só para começar:
Schema.org microdata
te permite alterar a aparencia de seu site em resultados de ferramentas de pesquisa.
Twitter cards
define como sua webpage vai ser apresentada em tweets.
Esse tipo de coisa é bem mais próxima do reino técnico do SEO, então nós deixar pra você explorar isso por conta própria. No Próximo
capítulo, nós vamos trocar de ferramentas novamente e introduzir outro componente crítico para websites (especialmente aqueles de
e-comerce): formulários.
