Passo 1 de 7
Entender o que o validador verifica
Reconheça o que a validação de HTML verifica e quais conclusões ela não permite tirar sobre uma página.
Trilha de aprendizado · Nível 7 · Tutorial 4
Ao concluir, você será capaz de submeter documentos a um validador, interpretar seus diagnósticos e corrigir problemas de marcação de forma sistemática.
Entender o que o validador verifica
Reconheça o que a validação de HTML verifica e quais conclusões ela não permite tirar sobre uma página. 1 min
Submeter o documento à validação
Envie um arquivo HTML e cole seu código-fonte completo, identificando a versão que originou cada relatório. 2 min
Distinguir erros, avisos e informações
Leia a categoria e o conteúdo dos diagnósticos para decidir entre corrigir, avaliar o contexto ou compreender uma observação. 2 min
Localizar o trecho indicado no código
Use linha, coluna e contexto para localizar a região relevante de um diagnóstico no código-fonte analisado. 2 min
Corrigir uma restrição de conteúdo
Corrija relações inválidas entre elementos, preservando o conteúdo e sua intenção semântica. 3 min
Corrigir a causa e validar novamente
Investigue causas de diagnósticos relacionados, repita a validação após corrigir e reconheça o alcance de cada resultado. 3 min
Aplicar o ciclo em duas páginas
Valide dois documentos, corrija as causas dos diagnósticos e registre o resultado atualizado de cada arquivo. 3 min
Passo 1 de 7
Reconheça o que a validação de HTML verifica e quais conclusões ela não permite tirar sobre uma página.
Um validador de HTML compara o código do documento com regras de conformidade da linguagem. Ele verifica a marcação, incluindo o uso de elementos e atributos, não se a página ficou bonita ou funciona como esperado.
Exemplo
Títulos, imagens e listas podem parecer corretos no navegador, mesmo quando o documento contém marcação inválida.
Você abriu a página de contato e tudo parece estar no lugar. Isso basta para concluir que o HTML está em conformidade.
Um relatório sem erros indica que a ferramenta não detectou violações das regras verificadas. Isso não garante links funcionais, apresentação adequada ou acessibilidade completa. Esses aspectos exigem verificações complementares.
Exemplo
Validar o documento HTML é conferir sua marcação. Validar dados de um formulário é conferir o preenchimento, como detectar um campo obrigatório vazio.
A validação da página de contato terminou sem erros. Qual conclusão é adequada?
Passo 2 de 7
Envie um arquivo HTML e cole seu código-fonte completo, identificando a versão que originou cada relatório.
Abra o Nu HTML Checker em outra aba. Para praticar, copie este documento para o editor e salve como pratica.html. Considere este conteúdo a versão 1.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feira de livros</title>
</head>
<body>
<main>
<h1>Feira de livros</h1>
<p>Entrada gratuita.</p>
</main>
</body>
</html>pratica.html na pasta onde acabou de salvá-lo. Confira o nome selecionado.O envio usa o conteúdo salvo no arquivo, não alterações pendentes no editor.
Você alterou o parágrafo no editor, mas não salvou. Ao enviar o arquivo pratica.html, qual conteúdo o validador verifica?
Para distinguir as versões, altere o parágrafo para <p>Entrada gratuita aos sábados.</p> e salve. Esta é a versão 2.
<!doctype html> até </html>.Nesse modo, o relatório corresponde ao texto colado.
Dica
Não inclua números de linha nem marcas de formatação acrescentadas ao copiar. Cole o documento inteiro, não apenas o parágrafo alterado ou o texto visível da página.
Após obter os dois relatórios, registre para cada um: forma de envio, arquivo de origem e texto do parágrafo enviado. Ainda não é preciso interpretar as mensagens.
Escreva pelo menos 30 caracteres (0/30).
Passo 3 de 7
Leia a categoria e o conteúdo dos diagnósticos para decidir entre corrigir, avaliar o contexto ou compreender uma observação.
Leia a categoria para entender o tipo de atenção necessário e a mensagem para entender o motivo.
Dica
Cores e ícones ajudam, mas não substituem a leitura do rótulo e do conteúdo. Uma informação também pode trazer uma orientação útil.
Associe cada mensagem à atitude adequada. Os rótulos da ferramenta foram preservados; os diagnósticos estão resumidos em pt-BR.
Toque em um item e depois no par correspondente.
Exemplo
Um relatório de exemplo não apresenta erros, mas inclui este aviso, traduzido:
“section sem título. Considere usar um título para identificar a seção.”
Esta seção precisa de um título para comunicar seu tema? Avalie o conteúdo e a organização da página. Não acrescente um título genérico apenas para fazer o aviso desaparecer.
O relatório não apresenta erros, mas avisa que uma section está sem título. Qual conclusão é adequada?
Passo 4 de 7
Use linha, coluna e contexto para localizar a região relevante de um diagnóstico no código-fonte analisado.
A linha indica a linha do código-fonte; a coluna, uma posição dentro dela, incluindo espaços. Essas referências pertencem à versão submetida ao validador.
Para localizar o problema:
Dica
A posição mostra onde o problema foi detectado. Ela não garante que somente aquele ponto precise de alteração: outra linha pode ser essencial para entender a mensagem.
Exemplo
Mensagem adaptada para português:
Erro: valor duplicado no atributo id: contato.
Local indicado: linha 15, colunas 1 a 22.
Trecho destacado: <section id="contato">.
A numeração e os separadores à esquerda são apenas referências de leitura: não fazem parte do HTML nem da contagem das colunas.
10 | <section id="contato">
11 | <h2>Contato da loja</h2>
12 | <p>Atendimento de segunda a sexta.</p>
13 | </section>
14 |
15 | <section id="contato">
16 | <h2>Contato da assistência</h2>
17 | <p>Atendimento aos sábados.</p>
18 | </section>Identifique o elemento e o atributo envolvidos. Indique a linha destacada e outra linha que precisa ser examinada, justificando a comparação. Não corrija o código ainda.
Escreva pelo menos 30 caracteres (0/30).
Inserir ou remover linhas pode deslocar a região apontada. Alterar o texto dentro de uma linha também pode mudar as colunas.
Se as edições mudaram as posições, submeta a versão atual e consulte o novo relatório. As coordenadas antigas continuam descrevendo a versão anterior, não o código que está agora no editor.
Você inseriu linhas e reorganizou o trecho. Agora, a linha 15 do editor não contém a tag destacada no relatório anterior. Como continuar a localização com segurança?
Passo 5 de 7
Corrija relações inválidas entre elementos, preservando o conteúdo e sua intenção semântica.
As restrições de conteúdo definem quais elementos podem aparecer dentro de outros e em quais posições. Fechar as tags na ordem certa não basta: a relação entre os elementos também precisa ser permitida.
<ul>
<p>Escolha uma oficina:</p>
<li>HTML</li>
<li>CSS</li>
</ul>Exemplo
Diagnóstico adaptado para pt-BR: “O elemento p não é permitido como filho do elemento ul neste contexto.”
O problema é o p diretamente dentro de ul. Um parágrafo pode fazer parte de um li, mas não pode ser filho direto de ul. A indentação e os fechamentos organizados não tornam essa relação válida.
O parágrafo “Escolha uma oficina:” está diretamente dentro de ul. Ele apresenta a lista inteira; não é uma oficina. Qual alteração resolve a restrição e preserva essa função?
<p>Escolha uma oficina:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>Dica
Neste caso, a introdução fica fora da lista. Já um conteúdo que pertence a um item deve ser agrupado dentro do li correspondente. Se o item foi fechado cedo demais, reposicione </li> para incluir esse conteúdo. Corrigir não é simplesmente apagar o trecho apontado.
A intenção é apresentar HTML e CSS como subitens de Desenvolvimento web, mantendo Design como outro item principal.
Diagnóstico adaptado para pt-BR: “O elemento ul não é permitido como filho do elemento ul neste contexto.”
<ul>
<li>Desenvolvimento web</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<li>Design</li>
</ul>Reescreva o trecho sem excluir nenhum conteúdo. Depois, explique em uma frase qual fechamento mudou de posição e como isso resolve o diagnóstico, preservando a hierarquia pretendida.
Escreva pelo menos 60 caracteres (0/60).
Passo 6 de 7
Investigue causas de diagnósticos relacionados, repita a validação após corrigir e reconheça o alcance de cada resultado.
Uma falha de marcação pode provocar vários diagnósticos posteriores: são os erros em cascata. Por isso, cinco mensagens não significam necessariamente cinco causas independentes.
Comece investigando os diagnósticos estruturais iniciais e o código ao redor. Eles são pistas úteis, mas o primeiro diagnóstico nem sempre identifica a causa.
Corrija uma causa ou um pequeno conjunto de alterações relacionadas. Depois, salve → submeta novamente → compare os relatórios.
Reavalie as mensagens restantes: algumas podem desaparecer junto com a causa corrigida. Evite fazer muitas mudanças independentes antes de verificar o efeito.
<header>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
</ul>
</header>Exemplo
</header>: fechamento encontrado enquanto ainda havia elementos abertos.<nav>: elemento não fechado.Qual alteração testar primeiro para corrigir a causa e manter o menu dentro do cabeçalho?
Você recebeu um relatório com erros. Ordene as ações de uma rodada de investigação e correção.
O resultado vale para o documento e a versão submetidos, não para o site inteiro. Se a correção atingir um trecho compartilhado, aplique a mudança nas demais páginas que precisam dela e valide cada documento afetado.
Após inserir </nav> no lugar correto, salvar e validar novamente index.html, os dois erros do exemplo desapareceram. O mesmo cabeçalho havia sido copiado para outras páginas, ainda não verificadas.
Por que uma alteração eliminou dois erros? O que fazer nas demais páginas?
Escreva pelo menos 40 caracteres (0/40).
Passo 7 de 7
Valide dois documentos, corrija as causas dos diagnósticos e registre o resultado atualizado de cada arquivo.
Salve o documento abaixo como index.html e envie-o ao validador. Leia a categoria, a posição e o contexto dos diagnósticos.
Corrija a marcação sem excluir conteúdo: o link pertence à lista; a observação sobre a entrada é um parágrafo independente. Salve e valide novamente. Guarde os relatórios inicial e atualizado para o registro final.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Visite o museu</title>
</head>
<body>
<main>
<h1>Visite o museu</h1>
<ul>
<li><a href="agenda.html">Consultar agenda</a></li>
<p>Entrada gratuita.</p>
</ul>
</main>
</body>
</html>Salve este documento como agenda.html e valide-o colando o código-fonte completo.
Investigue a causa estrutural antes de tratar cada mensagem como um problema independente. Faça uma correção, salve, submeta a versão atual e compare os relatórios: quais erros desapareceram juntos?
Avalie também eventuais avisos. Considere que a seção foi criada para agrupar os horários de visita.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Agenda do museu</title>
</head>
<body>
<main>
<h1>Agenda do museu</h1>
<section>
<ul>
<li>Sábado: 10h.</li>
<li>Domingo: 14h.</li>
<p>Chegue com antecedência.</p>
</section>
</main>
</body>
</html>Registre, para cada arquivo:
Em agenda.html, identifique quais mensagens desapareceram após a mesma correção. Termine explicando por que os dois resultados ainda não comprovam a qualidade completa do site.
Use seus relatórios reais; a redação e a quantidade de mensagens podem variar.
Escreva pelo menos 120 caracteres (0/120).
Resumo
Parabéns! Você concluiu: Encontrar e corrigir erros com um validador de HTML
Você concluiu “Encontrar e corrigir erros com um validador de HTML”. Leve este ciclo para cada documento: submeter, investigar, corrigir, validar novamente e registrar.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
