Como usar o Testador de HTML | Mini-curso HTML, CSS e JS

Usando o Testador de HTML

O Testador de HTML Online é um ambiente completo para escrever e visualizar código web no navegador, sem instalar nada. Veja como funciona:

Passo 1 — Escreva seu código

Na aba HTML do editor, cole ou digite seu código. Você também tem abas separadas para CSS e JS, o que mantém o código organizado.

Passo 2 — Clique em "Analisar"

O botão Analisar renderiza o código no painel de pré-visualização à direita e executa uma análise automática verificando erros, acessibilidade e boas práticas de SEO.

Passo 3 — Leia os resultados

Uma pontuação de 0 a 100 indica a qualidade do código. Cada problema encontrado vem acompanhado de uma explicação e, quando possível, do código correto sugerido.

Ative a Análise Automática (ícone de raio) para ver os resultados enquanto você digita, sem precisar clicar em Analisar a cada alteração.

Outras funcionalidades

Exemplo — carrega um HTML de exemplo com boas práticas para estudar
Salvar HTML — baixa o código como arquivo .html para usar no computador
Compartilhar — gera um link com o código comprimido para enviar a outra pessoa
Simular dispositivos — os botões de celular, tablet e desktop ajustam a largura da pré-visualização

HTML básico

HTML (HyperText Markup Language) é a linguagem que define a estrutura de uma página web. Ela funciona com tags — palavras-chave entre < e >.

Estrutura mínima obrigatória

Todo documento HTML deve começar com esta estrutura:

<!DOCTYPE html>               <!-- declara HTML5 -->
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">            <!-- suporte a acentos -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
  </head>
  <body>
    <!-- conteúdo visível vai aqui -->
  </body>
</html>

Tags mais usadas

<!-- Títulos: h1 é o principal, h6 é o menor -->
<h1>Título principal</h1>
<h2>Subtítulo</h2>

<!-- Parágrafo e formatação -->
<p>Texto normal. <strong>Negrito.</strong> <em>Itálico.</em></p>

<!-- Link -->
<a href="https://exemplo.com">Clique aqui</a>

<!-- Imagem (alt é obrigatório para acessibilidade) -->
<img src="foto.jpg" alt="Descrição da imagem">

<!-- Listas -->
<ul>                     <!-- lista sem ordem (bolinhas) -->
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>                     <!-- lista ordenada (números) -->
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>

Tags semânticas (HTML5)

Tags semânticas descrevem o significado do conteúdo, melhorando SEO e acessibilidade:

<header>  topo da página ou seção   </header>
<nav>     menu de navegação          </nav>
<main>    conteúdo principal         </main>
<article> artigo / post              </article>
<section> seção temática             </section>
<aside>   conteúdo lateral           </aside>
<footer>  rodapé da página           </footer>

Praticar no editor

CSS básico

CSS (Cascading Style Sheets) controla a aparência visual da página: cores, fontes, espaçamentos e layout. Use a aba CSS no editor para escrever estilos separados do HTML.

Sintaxe básica

/* seletor { propriedade: valor; } */

h1 {
  color: #2563eb;          /* cor azul */
  font-size: 2rem;         /* tamanho da fonte */
  font-weight: bold;
}

p {
  color: #475569;
  line-height: 1.6;         /* espaço entre linhas */
  margin-bottom: 1rem;
}

/* Seletor por classe (.nome) */
.destaque {
  background: #fef9c3;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

/* Seletor por id (#nome) */
#cabecalho {
  background: #0f172a;
  color: white;
  padding: 1rem 2rem;
}

Box model — como os elementos ocupam espaço

.caixa {
  width: 300px;          /* largura do conteúdo */
  padding: 20px;         /* espaço interno */
  border: 2px solid #ccc; /* borda */
  margin: 16px auto;    /* espaço externo; auto = centralizar */
}

Flexbox — layouts flexíveis

.container {
  display: flex;
  gap: 16px;
  justify-content: space-between; /* distribui horizontalmente */
  align-items: center;            /* alinha verticalmente */
}

Use box-sizing: border-box em todos os elementos para que padding e border sejam incluídos na largura total: * { box-sizing: border-box; }

JavaScript básico

JavaScript (JS) adiciona interatividade à página: cliques, animações, formulários dinâmicos, chamadas a APIs e muito mais. Use a aba JS no editor para escrever seu script.

Variáveis e tipos

const nome = "Ana";         // constante — não muda
let   idade = 25;            // variável — pode mudar
let   ativo = true;          // booleano
let   nota  = 9.5;           // número

Selecionar elementos do HTML

// Seleciona pelo id
const titulo = document.getElementById("meu-titulo");

// Seleciona pelo seletor CSS (como querySelector do CSS)
const botao  = document.querySelector(".btn-enviar");
const todos  = document.querySelectorAll("li"); // retorna lista

Reagir a eventos

const botao = document.querySelector("#btn");

botao.addEventListener("click", function () {
  alert("Você clicou!");
});

Alterar HTML e CSS dinamicamente

const caixa = document.getElementById("caixa");

// Alterar texto
caixa.textContent = "Novo texto";

// Alterar HTML interno
caixa.innerHTML = "<strong>Negrito</strong>";

// Alterar estilo CSS
caixa.style.backgroundColor = "#dbeafe";

// Adicionar/remover classes
caixa.classList.add("ativo");
caixa.classList.remove("oculto");
caixa.classList.toggle("expandido");

Para depurar erros em JS, abra o Console do navegador com F12 → aba Console. Use console.log(valor) no código para imprimir valores e entender o que está acontecendo.

Boas práticas

O Testador de HTML verifica automaticamente vários desses pontos. Entendê-los ajuda você a escrever código de qualidade desde o início:

Acessibilidade

Sempre use alt em imagens: <img alt="descrição">
Associe campos de formulário a labels: <label for="email">
Use os atributos aria-label em botões que só têm ícone (sem texto)
Mantenha a hierarquia de títulos: h1 → h2 → h3, sem pular níveis

SEO (Otimização para buscadores)

Toda página precisa de <title> com 30–60 caracteres
Adicione <meta name="description"> com até 160 caracteres
Use apenas um <h1> por página
Defina o idioma: <html lang="pt-BR">

Segurança

Links externos devem ter rel="noopener noreferrer" para evitar ataques de tabnabbing
Nunca insira código de terceiros sem entender o que ele faz

Performance

Adicione loading="lazy" em imagens que não estão visíveis na tela inicial
Use width e height nas imagens para evitar layout shift
Prefira CSS externo a estilos inline para facilitar manutenção

Exercícios práticos

A melhor forma de aprender é praticando. Experimente os desafios abaixo no editor — tente atingir a pontuação máxima (100/100) na análise!

Nível 1 — Estrutura mínima perfeita

Crie um documento HTML5 completo com DOCTYPE, charset, viewport, título, meta description e idioma definido. Analise e veja se atingiu 100/100.

Nível 2 — Página pessoal

Construa uma mini página "Sobre mim" com:

Header com <nav> e links
Uma foto com alt descritivo
Uma seção <main> com parágrafo de apresentação
Um <footer> com copyright

Nível 3 — Interação com JS

Adicione um botão que, ao ser clicado, altera o texto de um parágrafo e muda a cor de fundo da página. Use as abas HTML, CSS e JS do editor para organizar o código.

Nível 4 — Formulário acessível

Crie um formulário de contato com campos de nome, e-mail e mensagem. Certifique-se de que cada campo tem um <label> associado e que o formulário tem um <button type="submit"> com texto claro.

Após cada exercício, clique em Analisar e leia os alertas. Cada alerta tem uma explicação e uma correção sugerida — é a forma mais rápida de aprender com os próprios erros.