Como usar tags semânticas

Como usar tags semânticas

26 de fevereiro de 2017 1 Por Ramos de Souza Janones
Do Zero ao Profissional com PHP. Mais de 2.300 alunos recomenda.Powered by Rock Convert

O HTML5 tem muitos elementos, 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.

Alguns exemplos:

As tags <i>, <em>, <b> e <strong> são comumente confundidas ou utilizadas erroneamente pelo fato de geralmente terem o mesmo tipo de renderização no browser (as duas primeiras tendo o texto em itálico, e as duas últimas sendo em negrito). Mas seus significados diferem, sendo que:

  • <i> = Utilizado para designar um texto de destaque diferenciado, como em termos especiais ou uso em taxonomia.
    • Exemplo: A arvore, de nome em latin <i>Araucária brasiliensis</i>
    • Output.: A árvore, de nome em latin Araucária brasiliensis
  • <em> = Utilizado para dar ênfase em uma palavra (ou frase) que você falaria com entonação diferenciada do resto do texto e que mudaria seu significado.
    • Exemplo: E ela jura que <em>não</em> sabe, não é mesmo?!
    • Ouput: E ela jura que não sabe, não é mesmo?!
  • <b> = Direcionado a textos que necessitem ter destaque, mas sem conotação ou explicação explícita.
    • Exemplo: O e-mail dela é <b>fulana@email.com</b>
    • Output: O e-mail dela é fulana@email.com
  • <strong> = Utilizado para dar ênfase a uma palavra ou frase de alta importância.
    • Exemplo: Pessoal, eu realmente preciso destes relatórios <strong>para amanhã sem falta</strong>!
    • Output: Pessoal, eu realmente preciso destes relatórios para amanhã sem falta!

As tags <i> e <b> tinham muita utilidade no início da era web, quando era comum que tags HTML servissem para estilizar visualmente o conteúdo de uma página.

Com a evolução da internet e dos navegadores, e com a criação da linguagem CSS, é ideal que o conteúdo seja estilizado via propriedades CSS, e não via tags (ou atributos) HTML, o que retira a necessidade de utilizar as tags acima para fins visuais e as torna úteis apenas para uso semântico e de usabilidade.

Mas voltando ao tema do artigo. 

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

Semântica é um ramo da linguística que estuda o significado das palavras, frases e textos de uma língua. Portanto, elementos semânticos são elementos com um significado. Na prática:

  • Elementos semânticos: tem significado, e deixam seu conteúdo claro.
  • Elementos não semânticos: não deixam seu conteúdo claro.

São exemplos de elementos não semânticos: div e span e de elementos semânticos: form, table, article, footer e section.

Mas qual é a finalidade desses elementos?

É normal e bem frequente ver páginas que usem códigos como: <div id="footer"> ou <div class="header"> determinando um significado 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.

 

LEIA TAMBÉM:  Crie um loading animado divertido usando CSS3

Os amigos do R2D2 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:

 

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 dois:

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

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:


Chega de enrolação: TL;DR

Nota: não leia só daqui pra baixo, é CRUCIAL a leitura de toda a resposta e complementação com os links que deixei para interpretar corretamente o que responderei abaixo.

  • 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 robôzinhos 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 confíavel.
  • Posso usar um footer e um header por página, ou posso usá-los dentro de cada section? E se sim, por quê? Eu defendo que o HTML, ainda mais em sua quinta versão, é muito livre (anarquista!). A resposta é sim, você pode, não existem padrões no HTML, mas existem certas convenções que cabe a você segui-las ou não. Tem uma pergunta no SOen 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 da internet. TL;DR: 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:
  • HTML5 Style Guide and Coding Conventions – w3schools
  • HTML5 Reference – The Syntax, Vocabulary and APIs of HTML5 – w3c
  • HTML5 – MDN (Mozilla Developer Network)

Artigos relacionado a Javascript

Artigos e dicas sobre Javascript e toda sua familia: Node.js, Angular, Ionic, React e muito mais.

– GitHub lança repositórios privados gratuitos para até três colaboradores

– Como fazer testes unitários no Node.js com NodeUnit

– Epoc.js: Projeto open source em JavaScript para Sensores de Controle Cerebral

– Migre para o Ionic Framework 4 mais fácil usando o TSLint Fixers

– Apollo lança a Plataforma GraphQL e extensão para VS Code

– As novidades do Angular 7

– Tecnologias que andam bombando no GitHub ultimamente

– Node.JS: Envie o gemidão do Whastzap para seus amigos via chamada telefônica

– Southbank Software apresenta dbKoda: uma ferramenta de desenvolvimento Open Source para MongoDB

– Começando com React Native

– React Native Do Zero Ao Profissional, Curso Sobre Criação De Apps React Native Para Android e IOS

– React: Tutoriais Fantásticos e Onde Habitam

– React – O que é Shadow DOM

– O que são middlewares em NodeJS?

– Conhecendo os super poderes dos comandos Git e GitHub

Web

Artigos e dicas sobre desenvolvimento web que você vai gostar:

– 6 TENDÊNCIAS DE UX DESIGN PARA OS PRÓXIMOS ANOS

– UX – User Experience ou Experiência do Usuário – Princípios

– Usabilidade: Tela com muitas informações ou distribuídas em várias telas?

– Entenda as diferenças entre Wireframe, Protótipo e Mockup?

Estatísticas de SEO, novas regras do Google para 2019 e Automação de Marketing Digital

– Bootstrap – O que são grids CSS

– Quando usar ANSI e quando usar UTF-8

– W3C anuncia o DRM como uma recomendação

– Crie um loading animado divertido usando CSS3

– Como descobrir se uma cor hexadecimal é escura ou clara

– Como usar tags semânticas

– O que é o GZIP e como melhora a velocidade de um site

– Como adicionar notificações (Push notification) em seu site

Powered by Rock Convert
Powered by Rock Convert

Ramos de Souza Janones

Janones, é um empreendedor brasileiro apaixonado por empreendedorismo e tecnologia. Ao longo dos anos trabalhando com o desenvolvimento de softwares desktop desde a linguagem Clipper, passando pelo Delphi e atualmente com Java.

Optou pela formação de Publicidade e Marketing por sua segunda empresa de tecnologia ter participado do "boom" da internet nos anos 90 e na procura de melhorar seus conhecimentos em negócios.

Em razão da principal formação e profundos conhecimentos em programação e banco de dados, é capaz de realizar o desenvolvimento de aplicativos web, desktop e mobile com maior criatividade e inovação que profissionais de desenvolvimento com uma formação única e mais especifica, dedicada somente ao desenvolvimento de softwares.

Com toda sua experiência com empresas de software, sua formação e paixão por negócios escreveu o livro "Marketing para Empresas e Profissionais de Software", publicado pela editora carioca Ciência Moderna em 2012. Além de outros livros sobre programação.

Últimos posts por Ramos de Souza Janones (exibir todos)