Semântica no HTML e CSS

Publicação: 19/02/2019
Área:Design Gráfico e Marketing Digital

Semântica no HTML e CSS

No desenvolvimento de websites modernos, utilizando HTML 5 e CSS, é muito defendida a importância de separarmos semântica - de responsabilidade do HTML - de apresentação - de responsabilidade do CSS.

Por semântica, nos referimos ao significado de determinado elemento de uma página HTML, e por apresentação nos referimos a forma como o mesmo é apresentado ao usuário.

Foi com a criação da linguagem CSS, e principalmente o lançamento da versão 5 do HTML que a divisão entre semântica e apresentação se tornou uma realidade. Anteriormente, era mais comum semântica e apresentação estarem misturadas em uma mesma página, e isso trazia algumas desvantagens para a Web como um todo, que veremos na sequência. Mas primeiro veremos que nem sempre semântica e apresentação foram misturadas.

No início tudo era semântica

No início, tudo era semântica no HTML, e justamente isso pode ter causado o problema de misturar semântica e apresentação.

A grande qualidade do HTML, que o tornou a linguagem de fato da Internet, era sua simplicidade. Em sua origem, qualquer pessoa poderia aprender HTML em uma manhã, e começar a criar páginas web na mesma hora, usando qualquer editor de texto. Isso porque o HTML era apenas uma linguagem muito simples que definia uma semântica básica de alguns elementos em uma página.

Por exemplo, havia uma tag, P, para parágrafos: tudo que estivesse entre <P> e </P> era um parágrafo. Tags <H1>, <H2>, <H3> permitiam criar títulos e subtítulos.

Os navegadores, então, simplesmente exibiriam os textos organizados com estes códigos de uma forma compreensível.

A simplicidade da linguagem permitiu que ela ganhasse popularidade rapidamente, e inúmeros novas tags foram surgindo, muitas exclusivas de um ou outro navegador.

Logo, tudo virou apresentação

Para quem desenvolvia páginas, a medida que a internet se sofisticava, e novos recursos surgiam, permitindo criar imagens, fundos, efeitos, o foco se tornou criar páginas atrativas, e as tags se tornaram os recursos para criar o visual destas páginas.

Assim, se uma tag causava determinado efeito visual nos navegadores mais conhecidos, como pular uma linha, ou deslocar elementos para um lado, este era o foco do webdesigner: como criar uma apresentação da página atrativa para os visitantes. Se determinada tag foi criada com aquele objetivo ou não era irrelevante.

Por exemplo, os comandos para definir tabelas, originalmente criados para mostrados dados em um formato de tabela, rapidamente foram adotados como a forma preferida de posicionar os elementos na tela, criando tabelas maiores ou menores, com mais ou menos células, muitas vezes utilizando imagens invisíveis para forçar o tamanho da tabela, sempre com o objetivo de trabalhar a apresentação.

Separação entre apresentação e semântica: por que é uma boa ideia

Com a evolução do HTML tornou-se possível separar a semântica da apresentação. No HTML poderíamos dizer o que é determinado elemento, e utilizaríamos o CSS para trabalhar a apresentação do mesmo.

Esta separação tem várias vantagens na organização, na divisão em equipes, na gestão do site, na padronização das páginas, já que é possível definir em um único local a aparencia de todas as páginas do site, mas um fator é preponderante: a capacidade de sistemas automáticos para analisar a informação da web.

A semântica de um site está sempre presente. Se não existe semântica, se não há uma estrutura da informação, um site é incompreensível. O problema é que antes da separação entre semântica e apresentação, o que definia a estrutura da organização era a forma como a mesma era apresentada. Um ser humano, observando um site, rapidamente entende que elementos são mais importantes, como eles são organizados, qual o significado dos mesmos, com base nas imagens, posições, tamanhos de fonte e pelo próprio conteúdo do texto.

A semântica era implícita, percebida com base na forma como o ser humano olhava o site.

Com a definição semântica dos elementos, é possível ao autor dizer explicitamente o que é cada elemento, qual o significado do mesmo, e como ele se organiza em relação aos demais. E, o mais importante, utilizando uma linguagem que pode ser entendida pelo computador.

Assim, ao utilizarmos a semântica no HTML, uma ferramenta de busca como o Google pode identificar qual o elemento mais importante em uma página, um leitor destinado a cegos pode mais facilmente ler e navegar pelas páginas, uma ferramenta de extração de dados pode montar um banco de dados com base na navegação pelos elementos semânticos, etc.

Ao invés de termos um amontoado de páginas cujo sentido só é percebido por um ser humano ao observá-la, temos informações estruturadas com base em instruções que dizem explicitamente o significado de cada elemento.

Construindo páginas semânticas

As tags do HTML 5 já foram criadas pensando na semântica, o que torna mais fácil seguir um padrão de separação entre semântica e apresentação. Para tanto, basta seguir uma regra simples: utilizar as tags corretamente, respeitando seu significado.

Assim, a tag Header deve ser usada para o cabeçalho, a tag cite deve ser utilizada para citações, etc. Se a apresentação padrão de determinada tag não é a apresentação que você deseja no site, simplesmente defina no CSS a forma como você quer que aquele elemento seja apresentado.

Conteúdos de HTML da Alfamídia