Como criar códigos semânticos? Benefícios de um código semântico

Tenho um amigo que entende bem de HTML e CSS, mas quando desenvolve um tema, ninguém entende o que ele tentou fazer ali. A idéia de se criar códigos semânticos é de que futuros desenvolvedores achem fácil de se alterar os códigos deixados pelo desenvolvedor passado. Principalmente se você trabalha em uma agência com mais de um front-end.

Semântica (do grego σημαντικός, sēmantiká, plural neutro de sēmantikós, derivado de sema, sinal), é o estudo do significado. Incide sobre a relação entre significantes, tais como palavras, frases, sinais e símbolos, e o que eles representam, a sua denotação.

Esse conceito também se aplica para a criação de códigos para a internet (ou mesmo para o seu aplicativo).

A Web Semântica não será visualizada diretamente pelo browser. As tecnologias de Web Semântica podem agir por trás dos panos, resultando em uma melhor experiência do usuário, em vez de influenciar diretamente na aparência do browser. Isso já está acontecendo: há Web sites que utilizam a Web Semântica em segundo plano.

Existem vários benefícios ao se desenvolver um código semântico. Um deles é uma página com um tempo de carregamento bem mais rápido e até os benefícios de SEO mesmo.

Tá, me dá um exemplo de código semântico e um de código não semântico…

Claro, dou sim. Abaixo um exemplo de código não semântico.

<font size=”3″ color=”#000000″><i>HELLO!</i></font><br><br>

E agora um exemplo de um código semântico.

<p>Hello!</p>

Tá, mas se eu quiser deixar meu Hello! com cor preta, em itálico e com uma fonte de tamanho 3? Você pode fazer de duas formas. Se o você deseja que todo parágrafo tenha a mesma definição, basta colocar isso no CSS (para a tag p). Caso você queira que apenas o Hello acima tenha isso, você pode colocar dentro do p uma classe, exemplo:

<p class="atention">Hello!</p>

E basta definir no seu CSS a forma como você achar mais interessante. Exemplo:

.atention { color: #000; font-style: italic; font-size: 24em; }

Isso já é um bom caminho andado…

Benefícios

Seu código fica mais limpo e fácil de ser entendido, até mesmo por você!

Imagine precisar alterar um código, depois de uns 6 meses sem mexer no tal site. Você vai ficar todo perdido, sem saber onde colocou tal objeto, ou por que você altera o CSS dele e ele não altera no HTML. Entre outros fatores. Lembre-se, você é o front-end, seu trabalho não é fazer um bom site, é fazer um bom código.

Seu site fica mais rápido, melhor também pro SEO

O HTML não vai precisar carregar uma centena de códigos extras, que podem ser carregados via CSS. E outra, definindo as tags H1 ao invés de meros SPAN ou FONT, permitem que os motores de busca leiam seu código e dêem valor aos títulos. Exemplo, o nome do blog é um H1, o subtítulo um H2 e o título do artigo é um H3. E não uma centena de P’s ou FONT’s ou SPAN’s.

Acessibilidade

Ter um site limpo, e semanticamente correto (por assim dizer), ajuda a tornar seu site acessível até para quem possui algum tipo de deficiência. Principalmente visual, que faz o uso de leitores de tela para navegar na internet (um dia teremos um artigo sobre eles).

Como proceder?

Dê uma lida à fundo em HTML e CSS. Veja um código de algum desenvolvedor bom. Deixe o seu todo comentado, pesquisas e pesquisas são importantes.

Uma regra simples: CSS é onde entra toda a parte visual do site, todas as cores. Seu site no HTML precisa ser apenas preto e branco (excluindo as imagens, claro). A magia do seu site é o CSS, o que faz o seu site funcionar é o HTML.