10 erros de HTML que iniciantes cometem
Se o seu código não está funcionando exatamente do jeito que você quer agora, respire fundo. Você está indo muito bem! Todo desenvolvedor web profissional começou exatamente onde você está, cometendo exatamente os mesmos erros de digitação.
Cometer erros não é um fracasso; é simplesmente como o nosso cérebro aprende a programar. Os navegadores às vezes podem ser muito tolerantes, mas, em outras vezes, um pequeno erro de digitação vai quebrar a sua página inteira.
Para ajudar você a resolver problemas, aqui estão os 10 erros de HTML mais comuns que iniciantes cometem, e como corrigi-los rapidamente.
1. Tags sem fechamento
A maioria das tags HTML vem em pares: uma tag de abertura e uma tag de fechamento. A tag de fechamento precisa ter uma barra (/). Se você esquecer, o navegador acha que o seu elemento continua para sempre, o que pode bagunçar o resto da sua página.
Código errado:
<p>Bem-vindo ao meu site!<p>Código certo:
<p>Bem-vindo ao meu site!</p>2. Aninhamento incorreto
Quando você coloca uma tag dentro de outra, você está "aninhando" elas. A regra de ouro do aninhamento é "o primeiro a entrar é o último a sair". Pense nisso como um conjunto de caixas empilháveis. Você precisa fechar a caixa interna antes de poder fechar a caixa externa. Se as tags se cruzam, o navegador fica confuso.
Código errado:
<p>Este texto está <strong>bem em negrito.</p></strong>Código certo:
<p>Este texto está <strong>bem em negrito.</strong></p>3. Atributos alt ausentes
Quando você adiciona uma imagem usando a tag <img>, você precisa incluir um atributo alt (texto alternativo). Se a imagem não carregar, esse texto aparece no lugar. Mais importante ainda, os leitores de tela usam esse texto para descrever a imagem a usuários com deficiência visual. Sem ele, seu site não é acessível.
Código errado:
<img src="cachorro-fofo.jpg">Código certo:
<img src="cachorro-fofo.jpg" alt="Um filhote de golden retriever fofo sentado na grama">4. Faltar aspas nos atributos
Os atributos dão informações extras às suas tags (como o destino de um link). O valor de um atributo deve sempre estar envolvido em aspas. Se você deixá-las de fora, um espaço na sua URL pode quebrar o link completamente.
Código errado:
<a href=https://www.example.com>Clique aqui</a>Código certo:
<a href="https://www.example.com">Clique aqui</a>5. Usar títulos para estilizar
Os títulos (<h1> até <h6>) servem para criar um esboço lógico do seu documento, como os capítulos de um livro. Os iniciantes muitas vezes usam um <h1> só porque querem um texto grande e em negrito. Isso prejudica a estrutura do seu site. Se você só quer que o texto pareça grande, use CSS!
Código errado:
<h2>Por favor, clique no botão abaixo para continuar.</h2>Código certo:
<p class="big-text">Por favor, clique no botão abaixo para continuar.</p>6. Pular níveis de títulos
Os títulos precisam seguir uma ordem estrita e sequencial. Você nunca deve pular de um <h1> direto para um <h4>. Isso confunde os mecanismos de busca e os leitores de tela que estão tentando entender o fluxo da sua página.
Código errado:
<h1>Título principal</h1>
<h4>Subtítulo</h4>Código certo:
<h1>Título principal</h1>
<h2>Subtítulo</h2>7. Colocar conteúdo visível no <head>
O seu documento HTML tem duas partes principais: o <head> (o cérebro) e o <body> (o corpo físico). O <head> é estritamente para configurações de bastidores, como o título da página. Qualquer texto, imagem ou link que você queira que as pessoas vejam precisa ficar dentro do <body>.
Código errado:
<head>
<h1>Meu Site Incrível</h1>
</head>Código certo:
<body>
<h1>Meu Site Incrível</h1>
</body>8. Usar tags em maiúsculas
Versões antigas do HTML não se importavam se você digitasse <P> ou <p>. Embora os navegadores modernos ainda entendam tags em maiúsculas, a prática padrão na indústria de desenvolvimento web é escrever todas as tags em minúsculas. Isso mantém seu código limpo, moderno e fácil de ler.
Código errado:
<DIV>
<P>Olá, mundo!</P>
</DIV>Código certo:
<div>
<p>Olá, mundo!</p>
</div>9. Esquecer o boilerplate
Você não pode simplesmente abrir um arquivo, digitar <p>Olá</p> e dar por encerrado. Toda página web precisa de um esqueleto básico chamado "boilerplate". Sem as tags doctype, html, head e body, o navegador precisa adivinhar como ler a sua página.
Código errado:
<h1>Minha página</h1>
<p>Está faltando o esqueleto.</p>Código certo:
<!DOCTYPE html>
<html>
<head>
<title>Minha página</title>
</head>
<body>
<h1>Minha página</h1>
<p>Esta tem o esqueleto correto.</p>
</body>
</html>10. Espaços em nomes de arquivos
Quando você salva seus arquivos HTML ou imagens no computador, nunca use espaços no nome do arquivo! A internet odeia espaços. Um navegador muitas vezes vai substituir um espaço por caracteres estranhos como %20, o que quebra seus links e imagens. Use hifens (-) ou sublinhados (_) em vez disso.
Código errado:
<a href="sobre mim.html">Sobre mim</a>Código certo:
<a href="sobre-mim.html">Sobre mim</a>Resumo
Programar é uma jornada de tentativa e erro. Da próxima vez que uma imagem não carregar ou a sua página parecer quebrada, confira esta lista. Você fechou suas tags? Lembrou das aspas? Suas tags estão aninhadas corretamente?
Identificar esses pequenos erros é como você desenvolve seus "olhos de desenvolvedor". Continue praticando e, logo, evitar esses erros vai se tornar algo natural!