Qualquer um envolvido em Web design ou desenvolvimento terá encontrado o termo “semântico” com referência ao HTML5 e à Web em geral. Este termo muitas vezes problemático é compreensivelmente confuso para muitos de nós, particularmente porque existe uma clara falta de consenso sobre sua definição em certos contextos.

Neste artigo, vamos explorar o que torna o HTML5 mais semântico que seus antecessores, destacando o que isso significa para o desenvolvimento da Web agora e no futuro.

Semântica é sobre o significado

O conceito de semântica vem do campo da lingüística dedicado ao estudo do significado. Com linguagens naturais como o inglês, distinguimos entre sintaxe (ou gramática) e significado. Se você pensar em uma frase, o significado tem a ver com o modo como as pessoas a interpretam:

"O homem jogou o computador pela janela."

A semântica se relaciona com o aspecto da sentença que permite que as pessoas que a leiam entendam a mensagem contida nela. Juntamente com a sintaxe, a semântica é uma grande parte do que facilita a comunicação via linguagem. Quando falamos de semântica em relação ao HTML, estamos falando de comunicação entre programas de computador, não humanos. HTML semântico é essencialmente destinado a melhorar a extensão em que os aplicativos podem processar ou interpretar conteúdo da Web. Por exemplo, considere o seguinte trecho da página da Web que contém algumas das estruturas HTML mais antigas:

The man threw the computer through the window.

Os elementos (e atributos) fornecem ao navegador informações sobre como apresentar o conteúdo ao usuário. Por padrão, os elementos de parágrafo serão exibidos com espaço em branco acima e abaixo deles, os elementos de imagem são exibidos usando o arquivo de imagem incluído no atributo src e assim por diante. Quando o navegador encontra cada um desses elementos, ele renderiza o conteúdo de uma forma específica que é determinada pelas tags usadas.

Estruturas HTML já têm significado

É importante entender que o HTML5 não introduz semântica ao HTML pela primeira vez. HTML já tinha um nível de semântica embutido. As estruturas HTML existentes são significativas em vários graus. Se você olhar para este familiar elemento HTML como incluído no trecho acima, você verá o que quero dizer:

Embora seja abreviado, o nome do elemento img indica algo significativo sobre o conteúdo da tag, ou seja, é uma imagem. Dessa forma, você pode pensar no aspecto semântico do HTML como sendo semelhante aos metadados, em que a tag do elemento e os nomes dos atributos descrevem os dados (os dados em uma página da web são o elemento e o conteúdo do atributo).

Lembra quando começamos a separar o conteúdo do estilo?

Algumas das estruturas que usamos em HTML dizem ao navegador como estilizar os itens de conteúdo em uma página. Conforme o tempo passou, fomos incentivados a separar a formatação de uma página de seu conteúdo.

Por exemplo, substituímos a tag i por em, que é mais significativa e não informa ao navegador exatamente como exibir o texto dentro do elemento. O objetivo de usar em, em vez de i, é transmitir informações sobre a natureza do item de conteúdo, em vez de informações sobre como estilizá-lo. O em claro afeta o estilo, que é o principal motivo de usá-lo, no entanto, ele deixa os detalhes do estilo até o navegador e / ou o código CSS idealmente separado da marcação da página.

O HTML5 semântico é um passo maior nesse processo. O objetivo final é criar um sistema no qual os aplicativos tenham acesso a um maior nível de significado - isso não é AI, mas apenas incluir informações descritivas sobre itens de dados dentro das estruturas de código que os modelam.

Isso não é semelhante ao XML?

Se você usou XML no passado, você terá alguma familiaridade com os conceitos na marcação semântica. Por exemplo, quando você cria um documento XML (ou esquema) para um conjunto de dados, escolhe elementos e atributos para modelar itens dentro dos dados. Idealmente, os nomes de elementos e atributos definem os itens de dados de uma maneira significativa:

Jim Smith23 November 2012

O desenvolvedor aqui escolheu nomes que descrevem intuitivamente os valores de dados que estão sendo modelados. Com o HTML5 você não pode escolher seus próprios elementos, pois não é extensível livremente. As estruturas escolhidas por ele simplesmente têm mais significado inerente quando comparadas às versões anteriores.

By the way, existem diferentes tipos de significado

Nós falamos sobre o significado, mas na verdade existem diferentes maneiras pelas quais um elemento ou outro trecho de código pode ser significativo.

A tag img é significativa porque diz algo sobre o conteúdo do elemento, descrevendo o que é.

Alguns dos novos elementos HTML5, como cabeçalho e rodapé, são significativos, pois indicam algo sobre a função ou a finalidade do elemento na estrutura geral de uma página.

Como tudo isso se relaciona com o código HTML5?

Então, o que isso reforçou o aspecto significativo do HTML5? Essencialmente, o HTML5 tem alguns novos elementos com os quais você pode incluir mais informações semânticas na marcação de sua página. Há uma carga de novos elementos, apenas alguns dos quais vamos ver aqui. A tag de cabeçalho indica informações sobre o conteúdo do elemento e sobre sua função na estrutura da página:

Man in Window Outburst

O elemento de cabeçalho pode conter outros elementos e tende a incluir pelo menos um elemento de título. A tag de rodapé é semelhante, com a tag novamente expressando algo significativo sobre o conteúdo do elemento e sua relação com o restante da página:

A tag nav descreve o propósito de uma seção da página, ou seja, contém links de navegação:

O elemento de seção geralmente contém um grupo de itens no mesmo tema, geralmente junto com um cabeçalho. O elemento de seção tem um significado bastante abstrato, mas é significativo, no entanto:

What happened
Police officers apprehended the man at 3.30pm...

O elemento article é semelhante, usado para definir um item que é autocontido:

The Law
The law on throwing items through windows is very clear...

Uma tag de lado indica o papel de um elemento em relação ao seu contexto na página, como na seguinte versão estendida do código do artigo acima:

The Law
The law on throwing items through windows is very clear...

Esses são apenas alguns dos novos elementos HTML5 que oferecem melhorias semânticas, outros incluem elementos de entrada de mídia e de usuário, além de atributos adicionais. A inclusão de microdados em HTML5 também oferece maior escopo para incluir informações semânticas em páginas e aplicativos da Web. Como você pode ver, alguns desses novos elementos são significativos em termos de conteúdo e estrutura.

Pense em algumas das tags mais antigas (muitas das quais ainda estão por aí), como div. O elemento div é simplesmente um pedaço de uma página - o nome da tag não nos diz absolutamente nada sobre o conteúdo do elemento ou sua função na página. Em outras palavras, a tag transmite muito pouco significado. Muitas das etiquetas de longa data transmitem virtualmente nenhum significado ou, em alguns casos, significado genérico e vagamente definido. Cada item em uma página da Web estava contido em um de um conjunto de categorias de elementos muito gerais. A chave para fazer algo significativo é ser específico. As novas tags HTML5 nos permitem definir o conteúdo da Web usando termos mais específicos.

Você já estava adicionando significado à sua marcação?

Se você estiver criando páginas da Web por um período de tempo razoável, alguns dos novos elementos HTML5 podem soar um pouco para você. Na realidade, os desenvolvedores já estavam criando um nível de significado em suas páginas usando os atributos do elemento, especialmente classe e ID. Por exemplo, se você já deu a um elemento uma classe ou atributo de ID de "rodapé" ou "cabeçalho", certamente não está sozinho. Com o HTML5, esse significado é transmitido na própria marcação em vez de nos valores de atributo. Se você usou esses atributos para implementar propriedades de estilo específicas, você estava efetivamente fazendo algo manualmente que é embutido em HTML5 pronto para uso - e com elementos semânticos, há benefícios adicionais…

Por que estamos fazendo tudo isso?

Tudo bem, tudo bem, mas você seria perdoado por perguntar por que estamos indo para todo esse problema por algo que parece essencialmente conceitual / acadêmico. Bem, você pode ter certeza de que existem boas razões para se mover em uma direção mais semântica. Como vimos, a semântica HTML5 nos permite criar código de marcação que descreve itens de conteúdo. Esse aspecto descritivo do código permite que outros programas façam uso mais efetivo do conteúdo, com várias aplicações:

• A capacidade de pesquisa está definida para ser transformada pelo avanço da semântica da Web. A marcação semântica torna o conteúdo / dados mais pesquisável. As páginas da Web, é claro, não são apenas exibidas no navegador da Web, elas também são processadas por outros programas, como robôs de mecanismos de pesquisa. Como a marcação semântica é projetada para permitir que os aplicativos interpretem as páginas da Web de maneiras mais significativas, isso deve melhorar a qualidade das funções de pesquisa / consulta em uma quantidade significativa. No "sonho" cotado por Tim Berners-Lee para a Web, os computadores poderiam analisar todos os dados on-line - isso pode estar muito distante, mas o impulso semântico do HTML5 é motivado por esse tipo de meta de longo prazo. .
• A acessibilidade é uma das principais vantagens da marcação semântica. As ferramentas de acessibilidade podem se beneficiar enormemente do acesso mais significativo ao conteúdo da Web. Tais ferramentas incluem complementos de navegador para usuários com visão restrita, audição, dificuldades de aprendizado e assim por diante. A marcação semântica torna mais viável para um aplicativo processar o conteúdo da web e o resultado para comunicar a mensagem original ao usuário de uma maneira que atenda às suas necessidades. Esse conceito se estende além da acessibilidade e aos domínios da flexibilidade do dispositivo, por meio de técnicas como design responsivo. O resultado é uma abordagem mais abrangente para fornecer conteúdo da web.
• A consistência deve ser um verdadeiro benfeitor do HTML5 semântico. A marcação semântica melhora a consistência, pois os itens de conteúdo são mais logicamente atribuíveis a tipos de elementos específicos. Isso está em contraste com os modelos mais antigos, nos quais os itens poderiam ser logicamente contidos em qualquer tipo de elemento - escolher um não era um indicador da natureza do conteúdo ou de seu papel dentro da página. foi apenas um reflexo da escolha do desenvolvedor. Com a marcação semântica, o nível mais específico de significado torna essas escolhas menos livres, mas os resultados inerentemente mais confiáveis ​​quando se trata de interpretação pelo navegador ou por outros aplicativos.

Desenvolvedores impulsionam o progresso das tecnologias da Web

Quando estive na uni (alguns anos atrás), lembro-me de um palestrante nos dizendo que o campo da pesquisa acadêmica seria revolucionado pelos avanços nas pesquisas. Ele estava falando sobre a Web Semântica - é desnecessário dizer que ainda não aconteceu. Tomar qualquer tipo de nova direção focada com algo tão diverso e errático como a World Wide Web sempre será uma tarefa difícil. No entanto, ao nos envolvermos com a idéia de marcação semântica, pelo menos, nós, como desenvolvedores, podemos influenciar o movimento em direção a uma Web futura que seja mais acessível, pesquisável e consistente para todos os usuários.

Você usa elementos semânticos do HTML5? O foco na semântica produz um produto de maior qualidade? Deixe-nos saber o que você pensa nos comentários.

Imagem / miniatura em destaque, usa imagem de idioma via Shutterstock.