6 erros mais comuns que todo mundo já cometeu com o HTML
Se o seu HTML não funciona, entenda os principais motivos e faça bom uso do checklist
Quando resolvemos iniciar no mundo da programação, é bem comum que o primeiro passo seja fazer uma página básica em HTML, certo? HTML significa Hyper Text Markup Language e descreve a estrutura de uma página Web, com elementos que são representados por tags. Assim, os browsers usam as tags HTML e renderizam o conteúdo da página.
Apesar de ser bem simples de aprender e entender, alguns detalhes podem passar despercebidos e, para deixar esse aprendizado mais leve, resolvi juntar os principais problemas que tiram nossa paz quando estamos começando.
Além disso, preparei um checklist no final para imprimir e deixar do nosso ladinho, colado no computador e, sempre que o código não se comportar da forma que esperamos, olhar passo a passo antes de bater o desespero.
- Embora possa parecer óbvio, a primeira coisa para checarmos é se salvamos o arquivo.
Não consigo dizer quanto tempo eu perdi procurando erros no código quando, na verdade, eu já tinha arrumado, mas não tinha clicado em salvar.
DICA: No Visual Code Studio, vá em “File” e ligue o “Auto-Save” para não ter mais esse problema.
2. Observar se fechamos todas as tags que abrimos.
Por padrão, sempre que a gente conta pro nosso editor que estamos criando um arquivo .html, ele vem com diversas facilidades, como fechar todas as tags que estamos abrindo.
O problema é que, quando começamos a modificar nossa estrutura, às vezes podemos deixar alguma tag aberta. Então é importante sempre verificar: Abriu um <h2>? Não esqueça de usar </h2>!
3. Verificar se estamos utilizando os atributos HTML da forma correta.
Usamos atributos quando queremos incluir informações adicionais sobre um elemento específico no HTML. Por padrão, sempre usamos os atributos dentro da tag de abertura e sempre com o formato nome=”valor”.
Às vezes, no calor do momento, acabamos fechando a tag antes de incluir os atributos e, com isso, o atributo fica no lado de fora. Tudo que fica do lado de fora da tag, o HTML interpreta como texto e vai imprimir isso na tela.
Errado: <a> class=“link”</a>Certo: <a class=“link”></a>
Outro erro comum com atributos é esquecer de por as aspas. Você vai perceber que em alguns atributos podemos não colocar aspas (no HTML5), mas teremos problemas se usarmos espaços (quando queremos incluir mais de uma classe), por exemplo:
Errado: <a class=link btn></a>Certo: <a class=“link btn”></a>
Portanto, como boa prática, sempre utilize as aspas.
Por último, olhe sempre em sites como w3schools se você está escrevendo o atributo de forma correta. Já vi acontecer bastante de escreverem “classe ”ao invés de “class”, “herf ”ao invés de “href”, e por aí vai.
4. Verificar se colocamos o caminho corretamente nos atributos src e href:
É importante a gente sempre entender a estrutura das nossas pastas. Se estivermos chamando algo que está na mesma pasta que nosso index, podemos chamar diretamente o arquivo, mas se precisarmos acessar um arquivo que estiver dentro de uma pasta, precisaremos primeiro indicar qual é a pasta para depois acessar o arquivo.
Exemplo com arquivo na mesma pasta: href=“style.css”
Exemplo com arquivo em pasta: href=“css/style.css”
Outro caso é se estivermos em um arquivo dentro de uma pasta e precisarmos acessar um arquivo que também está em uma pasta:
Nesse caso acima, se eu quiser acessar o arquivo banner-bg.png e utilizá-lo no meu arquivo css, eu preciso sair da pasta css e entrar na pasta img, certo? Para fazer isso, usamos dois pontos e uma barra, assim: “../”
Exemplo: url(“../img/banner-bg.png”)
5. Verificar se estamos usando letras minúsculas.
Vocês vão escutar muito sobre a expressão “case sensitive”, que significa que o uso de letras maiúsculas e minusculas importa. SEMPRE olhem se vocês colocaram algo maiúsculo quando deveria ser minusculo.
6. Organizar o código e fazer comentários para não se perder.
Uma última dica que eu dou é que, sempre que possível, usem comentários no HTML para identificar os blocos que vocês estão fazendo.
Para comentar em HTML usamos <!-- comentarios --> e sempre deixamos o mais detalhado possível, como “Seção com as minhas habilidades”, ou “Seção com meus endereços de rede social”.
Isso vai te ajudar a dividir melhor sua atenção na hora de inspecionar o que deu errado, pois você vai saber exatamente onde o bloco começa e onde acaba.
Para resumir e ajudar: checklist!
Lembrem-se, por mais óbvios que esses erros podem ser, também são os mais comuns.
Então tenham esse checklist em mente para que, antes de sair olhando linha por linha, saibam que nenhum desses itens está faltando, ok?
O principal ponto é sempre ter paciência e entender que, quando estamos aprendendo algo, é normal esquecermos coisas pequenas e que, com o passar do tempo, tudo se tornará mais simples e mais automático.
Espero ter ajudado, e até a próxima!
