Semântica no desenvolvimento web, indo um pouco mais além

Compartilhe nas redes sociais

E ae galera! Como estão?

Hoje durante o dia me deparei com alguns códigos que me fizeram pensar muito sobre semântica no desenvolvimento web. Então resolvi compartilhar com vocês este pensamento.

Na verdade os códigos que vi não me deixaram satisfeitos quanto à sua semântica.

Como eu sempre fui um cara muito encanado com as tags HTML e com o significado do código que eu estava escrevendo, sempre estudei , pesquisei bastante e conversei sobre o assunto com pessoas experientes, e feito tudo isso cheguei a algumas conclusões.

Possivelmente vocês já tenham ouvido falar de alguma delas, mas vou falar um pouco sobre cada uma, pois, muitos devs ainda escrevem código sem semântica.

Vamos lá!

Cada tag html deve ser usada para aquilo que foi originalmente criada

Você precisa entender qual a finalidade de uma tag no html, para assim usar cada uma corretamente.

Ex:

<p>Isto é um parágrafo, então use a tag P para marcar este conteúdo.</p>

<h1>Isto é um título</h1>
<h2>Isto é um título de segundo nível</h2>

Não devemos usar uma tag x com uma classe que a estilize para ser outra coisa

Isso mesmo, nada de fazer algo como abaixo hein:

<p class="title">Isto deveria ser um título</p>

<strong class="link" onclick="window.location.href='http://www.google.com'">Link para o site do google</strong>

Ao invés, faça assim:

<h2 class="title">Isto sim é um titulo</h2>

<a href="http://www.google.com">Este é um link verdadeiro</a>

Use nomes de classe que dêem sentido ao significado daquele elemento

Por exemplo, se você tem um título que deverá ter a cor vermelha, pois, representa um estado de erro, não faça assim:

<h2 class="title title-red">Ops! Algo deu errado!</h2>

Ao invés dê um nome de classe que agregue significado a tag:

<h2 class="title has-error">Ops! Algo deu errado!</h2>

Até porque, suponhamos que você esteja usando a classe ‘title-red‘ que faz a cor do texto ser vermelha, e então amanhã ou depois a cor do estado de erro passa a ser laranja, você terá que alterar em todos os lugares que use ‘title-red‘ para ‘title-orange‘? Sim, pois, não faz sentido algum um ‘title-red‘ setar uma cor laranja ou verde ou qualquer outra, já que o nome diz ‘red‘. Que trabalhão hein?

Se você estivesse usando ‘has-error, bastaria mudar a cor nessa classe para que tudo continuasse com o significado correto.

Entenda qual a função do elemento, então você saberá qual tag usar

Já sabemos que se quisermos marcar um parágrafo deveremos usar a tag <p>. Se for um título, a tag <h1>, <h2> … ou <h6>. Certo?

Mas e se formos marcar um botão?

— Ahh é só usar a tag <button> José! Né?

Mais ou menos! Na verdade é aí que temos que pensar na função do elemento.

Por exemplo, um elemento que parece um botão, pois recebe uma classe que o estiliza desta maneira, poderá ser um <a>, um <input type=’submit’> ou um <button>. Tudo vai depender da função do elemento.

Ele vai disparar um formulário?
Então será um <button> ou <input type=’submit’>.

Ele vai apenas levar à outra página?
Então deverá ser um <a>.

— Mas José, e no caso do elemento fazer uma requisição ajax?

Aí é só analisar da mesma maneira.

O ajax no click do botão vai submeter informações como as de um formulário?
Use um <button>.

O ajax vai apenas carregar uma outra página assincronamente?
Então use um <a>.

— Ahh entendi José! Mas isso não vale pra tabelas né? Nós deveriamos simular uma tabela usando divs certo? Afinal, devemos usar tableless!

NÃO! Você deve usar tabelas, mas apenas quando for apresentar dados tabulares na tela. =D

Bom por hoje é só amigos.

Caso pense diferente do que eu disse aqui, tenha uma sugestão ou uma dúvida, deixe seu comentário! É muito bem vindo.

Abraço!