41

Desde que lançou o HTML5, tenho notado que diversas tags diferentes começaram a "surgir".

Em todo lugar que tentei estudar sobre o assunto, sempre via a tal da expressão "semântica". Entendi que essas tags na verdade não têm uma habilidade especial, mas é apenas como um contexto de organização.

Me surgiram algumas dúvidas e preocupação quanto a essas tags, pois como eu não tive paciência de aprender o que cada tag significava, eu continuei a usar a boa e velha div.

  • Essas tags semânticas, ajudam a melhorar o SEO de um site?

  • Usar somente divs (como eu costumo fazer sempre), é prejudicial ao SEO do site?

Há ainda uma outra dúvida que gostaria de esclarecer é em relação à algumas tags que não são tão óbvias para mim.

Por exemplo, olhando a tag footer ou header, parece que é obvio que se trata do cabecalho e rodapé do site, porém algumas vezes já vi um header e um footer em cada section.

aside por sua vez não entendi para que serve, pois cada tutorial que vi explica uma coisa de um jeito diferente.

Talvez, para mim, a única tag que ficou óbvia o seu uso é a main.

Então, vou fazer mais alguma perguntas:

  • Qual é a finalidade semântica das tags aside, footer, section, header e article?

  • Posso usar um footer e um header por página, ou posso usá-los dentro de cada section? E se sim, por quê?

4
  • 2
    pt.stackoverflow.com/q/100373/101
    – Maniero
    Commented 24/08/2016 às 12:24
  • @bigown é uma boa para entender a semântica do formulário. Mas agora esses daí de cima me deixaram confusas, pois cada lugar explica de um jeito, heheheh Commented 24/08/2016 às 12:25
  • 1
    @WallaceMaxters Leitura recomendada: tableless.com.br/…
    – Laerte
    Commented 24/08/2016 às 12:31
  • Html5 Tags pode criar nome por qualquer um, e faça teste utilizar <wallace id="blabla">XXX</wallace> e funciona style normal. Apenas nome, aquele se falou section, footer, header são costume para desenvolvedor mais usado e conhecido. Esse tipo o nome criado é formato DIV. Eu desenvolvo mais 20 anos, e posso fazer diferente tags para evitar contra adblock e mais segurança blabla. Não sei explicar melhor e escrevo por aqui.
    – KingRider
    Commented 9/09/2016 às 14:20

2 Respostas 2

63
+100

O HTML5 introduziu muitos elementos, ao total, atualmente são mais de 100, segundo a W3C. É natural que tantos elementos assim causem uma certa bagunça entre os desenvolvedores, vez que existem elementos parecidos, visualmente iguais mas com fins diferentes (como b e strong ou i e em) e até alguns desconhecidos (como o acronym e o cite). Existem alguns elementos chamados de semânticos, bem, lá vamos nós.

Afinal, o que é essa tal de semântica?

Segundo o dicionário Aulete:

é o estudo do significado das palavras numa língua

No contexto HTML5, a língua é o HTML e os elementos ditos semânticos, são aqueles que possuem o significado, o sentido. De acordo com o Aulete, significado é

o sentido que se dá a um termo, palavra, frase, texto, sinal, signo, obra artística ou científica etc

Portanto, elementos semânticos são elementos com um sentido especial. No contexto HTML5:

  • Elementos semânticos: tem significado, e deixam seu conteúdo claro. (form, table, article, footer e section)
  • Elementos não semânticos: não deixam seu conteúdo claro. (div e span)

Veja que div é amplo, mas footer dá significado, é o rodapé. Portanto ao invés de

<div id="footer">

prefira

<footer>

Vamos esmiuçar essa ideia.

Mas qual é a finalidade desses elementos?

É normal e bem frequente ver páginas que utilizem o atributo id para atribuir significado como: <div id="footer"> ou <div class="header"> determinando um sentido para a div. No HTML5, foram criados elementos para cada situação, como header e footer, veja abaixo:

  • article: expressa um elemento independente, ou seja, que possa ser lido e interpretado sem depender do resto da página. Um bom exemplo é uma notícia de jornal ou uma pergunta no Stackoverflow.
  • aside: por conceito, expressa um conteúdo a parte do conteúdo da página. Na prática, pense em um box de informações dentro de uma página, como por exemplo:

  • details: representa detalhes adicionais que o usuário pode mostrar ou esconder.
  • figcaption: representa uma legenda para um elemento <figure>.
  • figure: representa um conteúdo independente, como ilustrações, diagramas, etc...
  • footer: representa o rodapé de um documento ou section.
  • header: representa o cabeçalho de um documento ou section.
  • main: representa o conteúdo principal de um documento.
  • mark: representa um texto destacado.
  • nav: representa links de navegação (menus).
  • section: representa uma seção dentro de um documento.
  • summary: representa um cabeçalho para um elemento details.
  • time: representa uma data/hora.

Um pequeno exemplo:

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>Henry David Thoreau</h1>
  <p>O sucesso normalmente vem para quem está ocupado demais para procurar por ele.</p>
</section>

<section>
  <h1>Ray Goforth</h1>
  <p>Há dois tipos de pessoa que vão te dizer que você não pode fazer a diferença neste mundo: as que têm medo de tentar e as que têm medo de que você se dê bem.</p>
</section>

</body>
</html>

Os amigos do R2-D2 estão de olho na sua página!

Em 2001, muito antes do HTML5, Tim Berners-Lee (ninguém mais, ninguém menos que o criador da World Wide Web) deu sentido ao termo web semântica, onde ele se referia a um tipo de dado que poderia ser processado por máquinas (chamadas de robôs, muitas vezes).

A ideia da web semântica não era ser visualizada diretamente pelo usuário no navegador, e sim trabalhar internamente, resultando ao usuário somente uma melhor experiência, sem influência alguma no visual.

Como fazer isso? Separando os elementos HTML, assim representando diferentes funções para cada elemento.

Um bom exemplo de código escrito com base na web semântica de hoje:

<body>
 
  <header>
    <h1>Welcome On Our Website!</h1>
    <p>Here is our logo and slogan.</p>
  </header>
   
  <nav>
    <header>
      <h2>Choose Your Interest</h2>
    </header>
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
    </ul>
  </nav>
   
  <article>
    <header>
      <h1>Title of Article</h1>
      <h2>Subtitle of Article</h2>
    </header>
     
    <section>
      <h3>First Logical Part (e.g. "Theory")</h3>
      <p>Paragraph 1 in first section</p>
       
      <h4>Some Other Subheading in First Section</h4>
      <p>Paragraph 2 in first section</p>
    </section>
     
    <section>
      <h3>Second Logical Part (e.g. "Practice")</h3>
      <p>Paragraph 1 in second section</p>
      <p>Paragraph 2 in second section</p>
    </section>
   
    <footer>
      <h4>Author Bio</h4>
      <p>Paragraph in Article's Footer</p>
    </footer>
   
  </article>
   
  <aside>
     
    <h2>Get To Know Us Better</h2>
     
    <section>
      <h3>Popular Posts</h3>
      <ul>...</ul>
    </section>
     
    <section>
      <h3>Partners</h3>
      <ul>...</ul>
    </section>
     
    <section>
      <h3>Testimonials</h3>
      <ul>...</ul>
    </section>
   
  </aside>
   
  <footer>
    <ul>
      <li>Copyright</li>
      <li>Social Media Links</li>
    </ul>
  </footer>
 
</body>

Fonte: Hongkiat

Tá, mas quais são as vantagens de ajudar robôs a lerem minha página?

Porque eles são demais! Não convenceu? Ok. Além de deixar seu código mais legível e um pouco mais organizado, a web semântica é um muito mais que isso, essas máquinas citadas no tópico anterior tem um papel importantíssimo.

Vamos voltar um pouco...

Lá atrás, quando citei o Tim Berners-Lee e seu conceito de web semântica como maneira prática de leitura de código para máquinas ou robôs, Tim dizia que a web semântica não teria aplicações visuais, somente internas, para que os computadores façam o trabalho pesado. Esse trabalho que as máquinas fazem pode ser diverso, destaco três:

  • Para que a informação seja facilmente encontrada pelos motores de busca;
  • para a acessibilidade, onde deficientes visuais possam se incluir na web usando os leitores de voz;
  • para leitores de navegador, aqueles que sintetizam a informação de uma página para o que realmente importa. Além dos navegadores regulares, serve para os leitores como Amazon Kindle.

A semelhança entre esses pontos é um filtro de informação. Eu diria fine-tuning.

Existem especulações de que num futuro não muito distante, para que os computadores REALMENTE compreendam as páginas. Ok, fomos longe demais. Bem, posso afirmar com veemência que as aplicações da web semântica serão incontáveis daqui a um tempo.

Aquele lance dos motores de busca, vamos lá: a web semântica leva o SEO do seu site a um outro patamar, confira o exemplo:

Basta uma googlada que já vemos as vantagens, a junção do SEO baseado em entidades e o Knowledge Graph da gigante. Deixei as duas imagens acima para ilustrar bem o da semântica em suas demais vertentes. Caso queira se aprofundar no assunto, deixarei uns links úteis sobre SEO Semântica e SEO baseado em entidades:

Entendi, devo abandonar as palavras-chave, não é?

Bem, entramos num assunto complicado. Há quem defenda as palavras-chave hoje em dia, mas também há quem ache que o lugar delas é na lixeira.

As keywords estão, sim, em decadência, devido ao grande potencial que as novas tecnologias, como a pesquisa por entidades, oferecem. Porém, a pesquisa por entidades pode enfrentar uma desvantagem ao se deparar como uma pesquisa do tipo "qual é o melhor jogo para Playstation 4?". As keywords se dariam muito melhor se fosse o caso.

As palavras-chave te permitem criar o conteúdo que o usuário de fato quer encontrar.

Esse assunto ainda é muito relativo, prevê-se que o futuro é a pesquisa por entidades. Também deixarei links para que você se entretenha com o assunto:

Essas tags semânticas ajudam a melhorar o SEO de um site?

Com base na teoria de pesquisas baseadas por entidade, a resposta é SIM! Ora, os robozinhos não fazem mal algum.

Usar somente divs (como eu costumo fazer sempre), é prejudicial ao SEO do site?

É claro que pode prejudicar. Hoje em dia os motores de busca estão cada vez mais adeptos à web e SEO semânticos. Não podemos afirmar um abandono total, porque as palavras-chave tem sua importância, isso é inegável, vide leitura acima.

Qual é a finalidade semântica das tags aside, footer, section, header e article?

No começo da resposta está tudo explicado, porém deixarei um link importante aqui. Caso haja alguma dúvida em relação a qualquer tag, esse site tem tudo muito bem documentado, além de ser uma fonte confiável.

Posso usar um footer e um header por página, ou posso usá-los dentro de cada section? E se sim, por quê?

Segundo a documentação do w3schools, o elemento footer representa o rodapé de uma página ou uma section, assim como o header. Aí vão exemplos de documentações confiáveis:

Acredito que o HTML, ainda mais em sua quinta versão, é muito aberto. A resposta é sim, você pode, não existem padrões ditados no HTML, mas existem certas convenções que cabe a você e seu time segui-las ou não. Tem uma pergunta no StackOverflow que acho muito interessante e que aborda o assunto, veja. Quanto as convenções, existem diversas e o que define tudo aqui é a confiabilidade da fonte, nomes como Mozilla, Google e Wordpress são nomes de insuspeição no ramo de desenvolvimento web em geral.

1
  • 3
    Ótimo "artigo" sobre o assunto! Valeu o +50 :D Commented 15/09/2016 às 14:33
14

Então as tags do HTML5 vem para trazer mais semântica para a estrutura das páginas.

Mas não somente as novas tags tem propriedades apenas semânticas, muitas delas trazem novas funcionalidades built-in browser, por exemplo a tag video que traz a capacidade do browser reproduzir diretamente vídeos sem a necessidade de usar um flash player por exmeplo (http://www.w3schools.com/tags/tag_video.asp) e exitem muitas outras.

Outra coisa que você deve ter em mente é que dar mais valor semântico para suas páginas ajudam em ferramentas de SEO e também ferramentas de acessibilidade.

Um leitor de páginas pra cegos por exemplo, consegue interpretar mais semânticamente sua página para lêr ela de forma mais natural.

Um exmeplo que ilustra isso.

Ao invés de criar o menu de opções como sempre criamos, usando listas ul e li, que ficaria +/- assim:

<ul>
   <li>Opção 1</li>
   <li>Opção 2</li>
</ul>

Podemos usar a tag *<nav>* (http://www.w3schools.com/tags/tag_nav.asp) e construir assim:

<nav>
  <a href="#">Opção 1</a> 
  <a href="#">Opção 2</a> 
</nav> 

Mas por que usar *nav* ao invés de *ul*?

Visualmente não existe diferença, porém interpretadores autônomos de páginas (ex. SEO robots, indexadores de sites de busca e leitores para cegos, para citar alguns exemplos) conseguem "entender" que tudo que está dentro de nav é usado para navegação no site e então estruturar isso de forma correta.

Por exmeplo para um leitor para cegos, ele sabe que se tem uma tag nav ele pode ler as opções de navegação do site ali, ao invés de fazer uma leitura linear e tentar ler todas listas ul para tentar apresentar opções de navegação dentro do site.

Outro exemplo a tag aside (http://www.w3schools.com/tags/tag_aside.asp) que você mencionou, pode ser usado para adicionar conteúdo complementar ao local onde ela está posicionada. (Pode checar aqui http://tableless.com.br/sections-elemento-aside/)

Essa lógica se aplica para todas as tags que você mencionou footer, header e section.

Na prática você pode usar essas tags onde você quiser, quantas vezes você quiser dentro da mesma página e por ai vai. Porém é sempre importante lembrar o significado semântico de cada uma delas para assim construir sua página da forma mais significativa possível.

É importante se atentar ao seguinte (conceitualmente).

  1. HTML representa a estrutura como a informação deve ser organizada dentro de um documento HTML
  2. CSS representa o estilo da página é onde toda construção visual de design e organização de layout vai ser construída
  3. JavaScript representa a interatividade e responsividade que sua página vai ter com as ações do usuário. Ou seja como sua página vai interagir com o usuário de forma dinâmica.

Claro que JavaScript pode ter um uso mais amplo que esse, ajudando a criação de layouts mais interessantes e como no uso de frameworks (ex. AngularJS) porém conceitualmente essa é sua finalidade.

Caso tenha mais dúvidas deixe um comentário que eu melhoro a explicação.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .