O que é semântica?

Antes de entrar em detalhes sobre o assunto do artigo, vamos falar sobre o conceito de semântica! Afinal, o que é semântica? Ao ouvirmos esta palavra, relacionamos diretamente a língua portuguesa. Sim, semântica é um assunto praticamente direcionado a gramática, mas não exclusivamente.

Trata-se do estudo do significado em todos os sentidos do termo.

Na língua portuguesa o significado das palavras leva em consideração se são: Sinônimas, Antônimas, Homonímia. Apenas para relembrar, sinônimas são palavras de significado semelhante, antônimas são palavras de significados opostos, e homonímias são palavras com significados diferentes mas com mesma estrutura fonológica.

Semântica HTML

O HTML é uma linguagem de marcação de texto, com principal objetivo de diagramar e estruturar uma página de internet. Isto muitas pessoas sabem. O que poucos sabem é que é possível também estruturar páginas para que tenham um fluxo de entendimento lógico onde é possível definir palavras em destaque, citações, ênfase etc.

Web Semântica

Este é um assunto bem mais abrangente que falar apenas de semântica em HTML. Apenas para deixar tudo muito claro, é importante dizer a definição de Web Semântica: Trata-se de uma iniciativa de Tim Berners-Lee que defende a criação de uma linguagem universável que possa ser entendida por humanos e computadores permitindo uma cooperação entre eles. Em Web Semântica estão envolvidas tecnologias como eXtensible Markup Language (XML), Resource Description Framework (RDF), SPARQL, OWL, and SKOS. Este novo conceito também começa a ser popularizado como Web 3.0.

Porque utilizar Semântica HTML?

Devemos utilizar por diversas razões: por exemplo como desenvolvedor, além de definir um padrão é uma boa prática que caracteriza bons profissionais. Aquela velha história, o que pode ser facilmente entendido por você, pode ser bem entendido por qualquer desenvolvedor. Também facilita a leitura de conteúdo por aparelhos de acessibilidade em geral que poderá interpretar qualquer texto conforme realmente deve ser. Os mecanismos de buscas também classificam sites de acordo com suas tags. Quanto maior a semântica estiver aplicada a um texto na web, maior a probabilidade deste texto ser classificado como relevante.

Principais elementos em Semântica HTML.

Abaixo vou listar os principais elementos de HTML com alguns exemplos de utilização. Nos exmeplos será possível visualizar o comportamento dos elementos em tempo de execução no navegador. Se for preciso saber como fica o código HTML, basta visualizar o código fonte desta página.

h1 .. h6 – A tag de H1 a H6 definem quais são os títulos e sua relevância em um texto, sendo o H1 o mais relevante e o H6 o menos relevante.

Exemplo:

Esse é o título H1.

Esse é o título H2.

Esse é o título H3.

Esse é o título H4.

Esse é o título H5.

Esse é o título H6.

p – Define o que é um parágrafo.

Exemplo:

O Google Developer Day é um evento que oferece a oportunidade de se atualizar sobre produtos do Google, além de conhecer seus engenheiros. Esses eventos, que tem a duração de um dia e acontece em diferentes países, apresentam seminários sobre tecnologia da web e móvel incluindo Android, HTML5, Google Chrome, App Engine, Google Web Toolkit e muito mais.

Fonte: Google

pre – A tag PRE preserva a quebra de linha e os espaços em branco utilizados nos textos, sem necessariamente ter que escrever as tags BR e o caracter especial de espaço.

Exemplo:

body{
   font-family: Arial, Verdana, sans-serif;
   background-color: #FFF;
   margin: 5px 10px;
}

strong – Define um destaque assim como a tag EM, mas no caso em negrito. Ao contrário da tag B que é somente visual.

Exemplo:

Em uma frase de impacto deve-se destacar as palavras importantes.

em – A tag EM serve para dar ênfase em ítalico, em alguma palavra ou trecho de um texto. Ao contrário da tag U que é somente visual.

Exemplo:

O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão.

abbr – Destaca uma abreviação de palavra ou de um grupo de palavras.

Exemplo:

HTML, WWW.

acronym – Destaca um acrônimo. Acrônimo, são siglas que quando pronunciadas juntas formam uma palavra.

Exemplo:

FIFA , NASA

dfn – Serve para dar destaque a um termo que o seu significado vem logo após ele.

Exemplo:

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.

Fonte: Wikipedia

address – Define informações de endereço em um local.

Exemplo:

Rua Afonso Celso, 1221, Conj 42. – CEP: 04119-061 – São Paulo, SP

del, ins – A tag INS é utilizada para mostrar em um texto algum elemento que foi adicionado após ele ter sido colocado no ar e a tag DEL, algum trecho que foi deletado ou alterado do texto original. Geralmente essa tag é utilizada em blogs ao corrigir posts que foram encontrados erros ou que a informação de um post foi atualizada.

Exemplo:

O sorteio da camiseta será às 18hs do dia 03/02/2010 20hs do dia 05/02/2010.

blockquote – Define um bloco de citação

cite – Utilizado para definir a referencia da citação

Exemplo de blockquote e cite juntos:

A seguir um trecho do livro Romeu e Julieta de William Shakespeare

Ó meu amor! querida esposa! A morte que sugou todo o mel de teu doce hálito poder não teve em tua formosura. Não; conquistada ainda não foste; a insígnia da beleza em teus lábios e nas faces ainda está carmesim, não tendo feito progresso o pálido pendão da morte

code – Caso em seu texto você referencie algum código de alguma programação, você deve colocar ele entre essa tag.

Exemplo:

<?
echo ("Hello world");
?>


div Utilizado para estruturar os elementos através de blocos.

span – Utilizado para estruturar os elementos através de linhas.

Label – Usando para identificar um rótulo para uma caixa de entrada

Exemplo:

<label>First Name: <input name="fname"/></label> ou

<label for="fname">First Name:</label> <input id="fname" name="fname"/>.

Table – Utilizada para tabular dados. Apresento abaixo algumas técnicas de semântica que ajudam a implementar corretamente uma tabela.

Atributo de tabela summary. São especialmente úteis para cegos. Também pode descrever como a tabela se encaixa no contexto do documento atual.

<caption> Define a legenda da tabela. Uma legenda geralmente descreve a natureza dos dados.

As linhas das tabelas podem ser agrupadas em cabeçalho, rodapé, ou em uma ou mais seções usando THEAD, TFOOT e TBODY respectivamente. Esta divisão permite rolagem dos dados de uma tabela independentemente do cabeçalho e rodapé. Quando longas tabelas são impressas na tela, os dados de cabeçalho e rodapé podem ser repetidos em todas as páginas que contém os dados da tabela.

Elementos de células TH e TD

TH são utilizados para cabeçalhos e TD para dados.

Atributo de célula: headers: Relaciona os dados de uma celula a seu cabeçalho. Importante notar que na célula do cabeçalho é necessário especificar o atributo ID, e depois fazer referencia ao mesmo nome no atributo headers.

<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar.">
  <CAPTION>
  Cups of coffee consumed by each senator
  </CAPTION>
  <THEAD>
  <TH id="header1">Name</TH>
    <TH id="header2">Cups</TH>
    <TH id="header3" abbr="Type">Type of Coffee</TH>
    <TH id="header4">Sugar?</TH>
    </THEAD>
  <TBODY>
  <TD headers="header1">J. Dinnen</TD>
    <TD headers="header2">5</TD>
    <TD headers="header3">Decaf</TD>
    <TD headers="header4">Yes</TD>
    </TBODY>
  <TFOOT>
    <TR> ...footer information...
  </TFOOT>
</TABLE>

dl, dd, dt – Essas tags são utilizadas para definir uma lista de termos e significados, sendo o DL para definir a lista, o DT a palavra chave e o DD a explicação do termo.

Geralmente esses elementos são utilizados em glossários e dicionários.

Exemplo:

Acupuntura

Tratamento efetuado através da introdução de finas agulhas de aço em pontos determinados da pele.

Alergologia

Especialidade médica que trata das doenças alérgicas, por exemplo alergia alimentar, medicamentosa, rinites, urticárias, etc.

Anestesiologia

Especialidade médica responsável pela prática anestésica.

Angiografia

Exame de raios-x que estuda os vasos sanguíneos (artérias e veias) utilizando substância de contraste.

Fonte: Hospital Urgente

ul, ol, li – A tag LI, serve para definir uma lista de elementos. Sendo a tag OL para criar uma lista com elementos organizados por alguma ordem. E a UL organizando os elementos sem necessariamente possuirem uma ordem.

Exemplo:

Termos mais buscados (Por ordem de relevância / OL ):

1. SEO
2. JQUERY
3. CSS
4. HTML5
5. JAVA

Produtos vendidos (UL):

• MP3
• DVD
• Televisão
• Microondas
• Lavadeira

Além das TAGS do HTML, outra forma de tornar o HTML ainda mais semântico são os atributos das próprias TAGS:

alt – O atributo ALT, é utilizada para colocar uma descrição em imagens, além de auxiliar na busca, ela substitui a imagem pela a palavra caso não seja encontrada.

cite – O atributo CITE, é utilizado nas tags de citações, nesse atributo você especifica qual é o link que foi retirado o trecho citado no texto, não sendo exibido para o usuário final no browser, mas somente para organização e referência no código.

id – Com o atributo ID, você nomeia o objeto com um nome único, ajudando na organização e podendo ser utilizado para formatação em CSS específicas para o objeto nomeado.

lang – Com esse atributo você diz qual linguagem o texto possui, auxiliando os buscadores na hora de especificar em qual linguagem deve dar enfase para exibição.

longdesc – Com o atributo LONGDESC, você adiciona a imagem, um link a sua escolha que vai para alguma página que complemente a informação da imagem. Diferente de utilizar a tag A o LONGDESC é específico para a imagem.

rel – Quando adicionado o atributo REL na tag LINK você específica qual tipo de conteúdo o usuário irá encontrar quando clicar nele, não sendo visível para o usuário final, é somente utilizado pelos buscadores na hora da indexação de uma página. Pode ser também utilizado com a tag A.

rev – Ao contrário da tag REL, a tag REV descreve qual é a relação da página que o LINK possuí com a que você está escrevendo.

title – Com o atributo TITLE você adiciona às imagens, citações, abreviações e acrônimos o título que ela possuí, ou algo que se relaciona a ela que é exibida quando o usuário passa o cursor em cima.

O que muda entre HTML 4 e HTML 5

Em termos de semântica, podemos destacar principalmente as seguintes modificações entre HTML 4 e HTML 5:

Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Os elementos abaixo não foram incluídos na especificação porque não tiveram uso entre os desenvolvedores ou porque sua função foi substituída por outro elemento:

• acronym não foi incluído porque criou um bocado de confusão entre os desenvolvedores que preferiram utilizar a tag abbr.
• applet ficou obsoleto em favor da tag object.
• isindex foi substituído pelo uso de form controls.
• dir ficou obsoleto em favor da tag ul.

Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:

• align como atributo da tag caption,
  iframe, img, input,
  object, legend, table,
  hr, div, h1, h2,
  h3, h4, h5, h6,
  p, col, colgroup,
  tbody, td, tfoot, th,
  thead e tr.
• alink, link, text e
  vlink como atributos da tag body.
• background como atributo da tag body.
• bgcolor como atributo da tag table, tr,
  td, th e body.
• border como atributo da tag table e
  object.
• cellpadding e cellspacing como atributos da tag
  table.
• char e charoff como atributos da tag
  col, colgroup, tbody,
  td, tfoot, th, thead e tr.
• clear como atributo da tag br.
• compact como atributo da tag dl, menu,
  ol e ul.
• frame como atributo da tag table.
• frameborder como atributo da tag iframe.
• height como atributo da tag td e th.
• hspace e vspace como atributos da tag
  img e object.
• marginheight e marginwidth como atributos da tag
  iframe.
• noshade como atributo da tag hr.
• nowrap como atributo da tag td e th.
• rules como atributo da tag table.
• scrolling como atributo da tag iframe.
• size como atributo da tag hr.
• type como atributo da tag li, ol e
  ul.
• valign como atributo da tag col,
  colgroup, tbody, td,
  tfoot, th, thead e
  tr.
• width como atributo da tag hr, table,
  td, th, col, colgroup e pre

Os inputs ganharam novos valores no atributo TYPE

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

Novos elementos foram implementados:

• video e audio Permite adicionar áudio ou vídeo mais facilmente à uma pagina.
• mark representa uma sequencia de texto em um documento de marcação ou destaque para fins de referencia, devido à sua relevância em outro contexto.
• progress representa a conclusão ou definição de uma tarefa.
• meter representa uma medida, como o tamanho de uso de um disco.
• time representa data ou hora.
• ruby, rt and rp permite a marcação e anotações de ruby
• wbr representa uma oportunidade de quebra de linha
• canvas é utilizado para renderização de gráficos.
• command representa um commando que o usuário pode utilizar.
• details representa informações ou controles queo usuário pode obter sob demanda. Fornece parâmetros para definir o resumo ou legenda.
• datalist junto com novo atributo de listas para  input, pode ser utilizado para fazer combox.

  <input list="browsers">
  
  <datalist id="browsers">
  
  <option value="Safari">
  
  <option value="Internet Explorer">
  
  <option value="Opera">
  
  <option value="Firefox">
  
  </datalist>
  
  

• keygen representa controle para geração de chaves.
• output representa algum tipo de saida, como por exemplo o resultado de uma soma matemática.

HTML 5, Novos elementos melhorando a semântica das paginas.

Com a evolução da web e popularização do conceito web 2.0, nos acostumamos a criar páginas HTML utilizando DIV’s e CSS para estruturar não só o conteúdo, mas o site como um todo. Atualmente, a estrutura de um site é organizada da seguinte maneira:

<body>
<div class="header">...</div>
<div class="menu">...</div>
<div class="main">
  <div class="content">…</div>
  <div class="sidebar">…</div>
</div>
<div class="footer">…</div>
</body>

Com estas tendencies também vieram muitos problemas, como por exemplo cada desevenvolvedor adotou um “padrao”, muitas divs gerando conflitos de identificadores ou problemas de visualiação demandado pelo amontoado de divs na página etc.

O HTML 5 propõe melhorar a organização do código e junto com isto criar um padrão. O novo código estruturado ficaria da seguinte forma:

<header>...</header>
<nav></nav>
<article>
  <section>…</section>
</article>
<asite>…</asite>
<footer>…</footer>

Em termos de estrutura, as principais tags foram implementadas:

header – elemento que define o cabeçalho da página ou de uma secção (não confundir com a tag head );
section – define a secção do layout num determinado element. Este pode conter um header e também um footer;
article – define uma parte da página que tem uma composição de formulários, textos, etc… ou seja, é um item do conteúdo dentro da página ou da secção;
footer – o rodapé da página ou de uma secção/elemento;
nav – o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

Outra melhoria importante para citar ainda neste mesmo contexto é a utilização dos cabeçalhos nas paginas. Como já é sabido, os cabeçalhos definem a importância do texto em uma página. A tag h1 define o titulo do conteúdo, o tema, ou seja o item mais importante desta página. Não podemos ter mais de um h1 em uma mesma página , pois assim o Google não consegue indexar nossa página e perdemos eficiência em SEO. Com o HTML 5 podemos definir um titulo principal para cada área do site, destacando sempre o que de fato é importante em cada local. Ficaria da seguinte forma:

<header>
  <h1>…</h1>
</header>
<article>
  <section>
    <h1>Titulo do artigo</h1>
    <p>texto</p>
  </section>
</article>
<footer>…</footer>

Conclusão

Gostaria de destacar principalmente a evolução do HTML não só em relação a semântica, mas em seus aspectos em geral. Me lembro no principio quando todos os sites tinham ao menos 3 frames em sua estrutura, depois veio a era das tabelas, e agora estamos na nos afixando em utilização de divs e css e caminhando para o HTML 5 e jQuery, onde os conceitos se focam principalmente em redução de código. Nós desenvolvedores não podemos parar de nos atualizar e ficar ligado no que de novo acontece!  Muitas melhorias são feitas dia a dia, e cada um de nós temos uma grande responsabilidade colaborativa em relação a isto! Mantenham seus códigos sempre atualizados, vistam a camisa da usabilidade, acessibilidade, e SEO. Quanto mais fácil um conteúdo possa ser encontrado, processado ou compreendido na internet, mais este será propagado pela rede, trazendo benefícios a cada vez mais pessoas, que por sua vez pode utilizar este conteúdo para gerar mais conteúdo e criar uma infinita sociedade de distribuição de dados.

Referências:

http://www.fullhaus.com.br/html-semantico-afinal-o-que-e-isso/

http://www.w3.org/standards/semanticweb/

http://www.w3.org/TR/html401/index/elements.html

http://www.w3.org/TR/2010/WD-html5-diff-20100624/