Imagine uma terra sem leis, regras e padrões.
Pois bem, assim era a internet até algumas décadas atrás. Tudo não passava de uma tela preta com letras brancas.
Com o avanço da tecnologia e o crescimento mundial da internet, o que antes servia apenas para o armazenamento de textos e troca de mensagens criptografadas, desenvolveu-se um ambiente de entretenimento e busca por conhecimento.
O início das Web Standards
Tim Berners Lee, o criador da internet que conhecemos hoje, lançou em 1994 o W3C (World Wide Web Consortium), que tem como principal objetivo criar padrões de melhores práticas para o desenvolvimento de Websites de forma global.
Esta iniciativa surgiu para fazer com que toda a web tenha um padrão de acessibilidade, onde todo o conteúdo esteja disponível de forma clara e organizada dentro da enorme rede mundial de computadores tornando-se acessível a todos.
Com a popularização do acesso a internet e o crescimento das empresas de hardware e software, oferecendo cada vez mais opções distintas de gadgets. Surgiu a necessidade de padronizar a forma de escrita dos códigos web, da utilização de imagens, vídeos e etc.
Para que, com isso, todos os inúmeros dispositivos e softwares que temos a nossa disponibilidade consigam ler e interpretar esses códigos de forma igual, garantindo que seus utilizadores consigam usufruir da mesma experiência. Mesmo utilizando sistemas operativos, browsers, PC ‘s ou telemóveis distintos.
Imagine como seria guiar um carro em um local sem leis de trânsito definidas, onde cada condutor faz o que bem entende? É mais ou menos desta forma que os navegadores se sentiam ao tentar renderizar distintos sites. Gerando demora, tornando maiores as requisições aos servidores, gerando lentidão e mais gasto de processamento. E principalmente, exibindo resultados fora do padrão esperado, elementos de cores e tamanhos diferentes em cada navegador, entre outros transtornos.
Agora imagine-se a conduzir em uma auto estrada sinalizada e seguindo todos os padrões internacionais de trânsito. Tudo seria mais fácil, rápido e menos confuso, certo?
O padrão da linguagem utilizado para escrever estes códigos chama-se HTML (HyperText Markup Language) e que, ao contrário do que muitos pensam, não é uma linguagem de programação e sim uma linguagem de marcação. HTML não é uma linguagem dinâmica e sozinha não é capaz de gerar conteúdo dinâmico.
Sua estrutura básica possui 3 principais blocos de base, que são:
<html></html>
<head></head>
<body></body>
HTML – Consiste em abranger todo o código, todo o conteúdo da página deve estar dentro desta TAG.
HEAD – É onde inserimos as principais informações da página, como título, meta tags e ligações externas de Javascript e CSS.
BODY – É onde inserimos o conteúdo do site, como menus, textos, vídeos, imagens e etc.
Atualmente seguimos o padrão HTML5, que foi criado após a Web 2.0 onde a estrutura HTML seguia os padrões xHTML.
O intuito de todo este padrão de escrita e codificação é reduzir o tamanho dos códigos, acelerar a leitura do código pelos browsers e motores de busca e tornar o conteúdo acessível a todos de forma clara e coerente. Com isto, os motores de busca utilizam destas boas práticas de escrita como um ponto crucial no ranqueamento e relevância deste conteúdo através de técnicas de análises de SEO (Search Engine Optimization).
Se o HTML é apenas uma linguagem de marcação, como criamos o design e interações?
Não devemos escrever códigos desnecessários na página, por isso utilizamos toda a formatação do layout e das cores através de um arquivo de CSS (Cascading Style Sheets) externo, chamado dentro do <HEAD></HEAD> da página.
E toda a interação dinâmica fazemos através de Javascript, seja por Framework ou não. Também chamamos seu arquivo .JS dentro do <HEAD></HEAD> da página através das TAGs <STYLE></STYLE>.
Isto significa, obrigatoriamente, que uma página sem um arquivo de CSS é apenas um arquivo sem formatação, com fundo branco, textos e imagens quase sempre desalinhados.
HTML e boas práticas
Temos como principais boas práticas de Web Standard definir a estrutura básica do site de forma legível e acessível, certificar-se de que todo o conteúdo será interpretado por todos os browsers (independente de sua versão, do sistema operativo que está sendo executado e, principalmente, pelo utilizador final).
Conheça alguns dos termos mais importantes que acompanham lado a lado todas as boas práticas da Web:
- Responsividade – Garantir que o site responda automaticamente ao redimensionamento do browser. Isso significa que todos os elementos do código possuem as especificações corretas para responder às mudanças na altura e largura do browser, reorganizando seu conteúdo para que mantenha-se alinhado, legível e organizado.
- Acessibilidade – O termo é o mesmo utilizado para garantir que pessoas portadoras de necessidades especiais como deficiência visual ou auditiva possam acessar normalmente o conteúdo do site. Algumas dicas de como aperfeiçoar a acessibilidade do seu é inserir um texto descritivo em todas as imagens do site através do atributo ALT dentro da TAG <img>.
A linha de código acima recebe no atributo ALT a descrição da imagem que pode ser lida por um browser específico utilizado por deficientes visuais.
Uma outra tag importante para tornar seu site acessível é através da tag <label>.
Por exemplo:
<label for=”nome”>
Nome: <input type=”text” id=”nome” name=”nome” />
</label>
Onde criamos um rótulo virtual para o campo de input de texto de um formulário.
- Crossbrowser – Semelhante ao termo “responsivo”, que significa garantir a exibição do site em qualquer browser ou dispositivo pelo qual o site foi acessado.
- Mobile first – Mobile first é a técnica utilizada por grande parte dos designers onde a estrutura principal do site é desenvolvida a partir de sua menor versão, ou seja, de sua versão mobile. Certificando-se que o site não apresente incoerências no layout em sua forma mais restrita de exibição, visto que 53% do tráfego mundial na internet é gerado pelo telemóvel, enquanto o acesso via computadores normais caiu para 44% em 2020.
- Semantic Web – É a preocupação com uma boa semântica na escrita do código para que sua comunicação com os browsers e com os servidores seja feita da forma mais otimizada possível.
HTML
- Estrutura básica:
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Título principal</h1>
<p>Parágrafo</p>
</body>
</html>
- Estrutura básica de conteúdos:
O menu deve ser criado utilizando listas
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Sobre</a></li>
<li><a href=”#”>O que fazemos?</a></li>
<li><a href=”#”>Links</a></li>
<li><a href=”#”>Contato</a></li>
</ul>
O título de maior relevância deve ser criado utilizando tags <h1><h1>Título de maior relevância</h1>
O parágrafo simples deve ser criado utilizando tags <p>
<p>Parágrafo simples</p>
O título de menor relevância ou subtítulo simples deve ser criado utilizando tags <h2>
<h2>Título de menor relevância ou subtítulo</h2>
O que podemos concluir?
Os motores de busca analisam cada caracter do do seu código através dos algoritmos de SEO e valorizam cada TAG utilizada de forma correta e semântica aumentando sua relevância para a web de forma geral. Em outras palavras, quanto mais correto e detalhado for a escrita do seu código, maior relevância terá na Web.
Tornando seu site mais leve, de fácil leitura e acessível a todos, mais relevante ele será. Fazer com que pessoas com necessidades especiais possam ter acesso ao seu conteúdo de forma clara também é uma obrigação e, apenas escrevendo um código semântico dentro dos padrões Web conseguimos isto de forma simples sem despender de recursos extraordinários.