Escrevendo HTML semântico

Introdução

A linguagem HTML (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto), foi criada com o objetivo de estruturar conteúdos para publicação na Web utilizando para isso diferentes elementos (às vezes chamados genericamente de tags) que se encontram à disposição do autor nas especificações da linguagem.

A linguagem HTML ao estruturar conteúdos o faz com dois grandes objetivos: traduzir os conteúdos que o ser humano interpreta facilmente para uma linguagem que os meios de acesso a Web entendam e exibir os conteúdos de forma organizada. Sendo assim, um código semântico torna a navegação mais acessível, incluindo portadores de necessidades especiais, uma vez que os meios de acesso entendem o conteúdo e podem passar para o usuário com facilidade.

Semântica

Nas versões anteriores à HTML5 poucos eram os elementos que traziam um valor semântico na marcação. Observe o exemplo a seguir mostrando uma marcação anterior à HTML5:

HTML

<body>
  <div class="header">
    <div class="menu"></div>
  </div>
  <div id="main">   
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</body>

No exemplo mostrado o elemento DIV é utilizado para marcar várias seções da página com significados (semântica) totalmente diferentes (topo, navegação, conteúdo principal e rodapé). E, assim como mostrado muitas vezes o elemento DIV é usado para marcar botões, imagens, menus e por definição DIV não significa nada em termos de semântica.

Isso dificulta o trabalho das tecnologias assistivas, que apresentam as informações aos usuários e precisam ajustar a forma de apresentação de acordo com a estrutura do documento de forma automatizada. Esse cenário de escrita sem a preocupação com a semântica se formou devido a falta de marcações adequadas ao conteúdo.

Os desenvolvedores, para suprir a deficiência semântica existente, transferiram as responsabilidades semânticas da HTML para as CSS.

Note que os nomes das classes do CSS mencionados no exemplo acima estão facilitando o entendimento da estrutura do código. Fica bem claro pelos nomes das classes quem é o cabeçalho da página, o menu, onde se encontra o conteúdo e o rodapé. Está correto?

Segundo o W3C, as CSS (Folhas de Estilo em Cascata), são um simples mecanismo para adicionar estilos a um documento Web. O papel das CSS nunca foi estruturar um documento Web. Então a resposta à quastão formulada é: não está correto, pois não é função das CSS adicionar semântica à marcação HTML.

Com a chegada da HTML5, depois de transcorrido um longo sem que houvesse atualizações na linguagem HTML, entre outras melhorias, foram criados vários elementos com valor semântico que devolveram à linguagem o seu real sentido.

Mas, apesar disso, alguns ainda se esquecem da função semântica da HTML, conforme descrito nas situaçoes a seguir:

Pensando no usuário

Quando a marcação HTML é criada com foco somente no que usuário vai visualizar ao projetar uma caixa de seleção (ou um dropdown como é mais conhecido no meio de desenvolvimento Web) o autor em lugar de usar a tag <select> existente na especificação da HTML e com o devido valor semântico para tal situação, cria a caixa de seleção conforme mostrado a seguir:

HTML

 <div>
    <div class="btn" data-toggle="dropdown">Clique em mim</div>
      <ul class="dropdown-menu">
        <li>Eu sou a opção 1</li>
        <li>Eu sou a opção 2</li>
      </ul>
  </div>

A marcação mostrada apresenta ao usuário uma caixa de seleção da mesma maneira que ele a veria caso fosse marcada com uso da tag <select> conforme mostrado a seguir:

HTML

  <select>
    <option value="op1">Eu sou a opção 1</option>
    <option value="op2">Eu sou a opção 2</option>
  </select>

Qual a diferença? O usuário comum vai consumir a informação certa, já os demais meios de acesso não.

A imagem a seguir mostra a renderização da tag <select> em dispositivos Android e iPhone. Essa é a grande diferença! Quando a HTML é escrita de forma semântica e consequentemente se entrega um valor semântico, a aplicação se torna acessível para todo tipo de usuário e dispositivo que navege na Web possibilitando a que os meios de acesso tratem nativamente os elementos da marcação.

Renderização de select no android e no iPhone

Pensando na CSS ou JavaScript

Quando a marcação HTML é criada com foco nas CSS ou na JavaScript o desenvolvedor simplesmente ignora a parte de planejar como estruturar o seu HTML da maneira mais correta para que o conteúdo possa ser servido aos diferentes meios de acesso.

Pensando em si mesmo

Quando a marcação HTML é criada com foco em si mesmo a escrita da HTML além de transcredir o que descrito no item acima não considera os usuários que apresentam algum tipo de necessidade especial.

Escreva HTML com responsabilidade

Escrever HTML com foco na semântica é responsabilidade do desenvolvedor.

Ainda não temos uma versão HTML que contemple valores semânticos para todos os casos na Web, mas já existem inúmeras melhorias criadas pela HTML5 que infelizmente ainda são negligenciadas por alguns, tanto das API’s nativas quanto das novas tags da HTML5.

Para o usuário, que não apresenta qualquer tipo de necessidade especial, não vai mudar nada visualmente. Por enquanto ele continuará vendo tudo em sua tela na mais perfeita harmonia, porém, chegará um momento em que a aplicação Web desenvolvida sem acessibilidade perderá espaço na Internet. Isso porque os meios de acesso à Web, para tomarem ações automatizadas, precisam consumir o que está codificado.

Com mais códigos semânticos o intuito é se aproximar de um futuro em que esses meios de acesso correspondam ao usuário, favorecendo cada vez mais uma experiência melhor de navegação automatizada.

Escreva HTML pensando em se comunicar com os meios de acesso, utilize as novas tags de seção disponibilizadas pela versão mais recente da HTML, procure usar soluções nativas, como por exemplo, animações com CSS, não é mais necessário fazer animações com plugins JavaScript pelo vasto suporte que as CSS oferecem nos dias atuais para tais ações e não deixe de utilizar as novas API’s integradas aos navegadores.

Conclusão

Tratando-se apenas de linguagem de marcação que é o foco deste artigo, e de modo geral, as funcionalidades da HTML em suas versões anteriores, com relação à semântica, é falha em definir o que é uma seção e como seu escopo é definido, o que dificulta a efetivação do seu objetivo em traduzir, publicar e estruturar conteúdo na Web.

Atualmente com a HTML5 e a consequente criação das novas tags semânticas, entre outras melhorias, o propósito semântico da marcação ficou mais consistente além de trazer consigo uma padronização de escrita na estrutura de um documento Web e assim colaborando para uma Web acessível a todos.

Nota final

A versão original deste tutorial foi editada pelo Maujor® com a devida permissão do autor.

Compartilhe essa matéria com seus amigos

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.