Curso de HTML / Encontrar erros e validar um documento HTML

A validação HTML ajuda a encontrar erros de marcação que um navegador pode corrigir silenciosamente, como atributos malformados, tags de fechamento inesperadas ou IDs duplicados. Depois de corrigir os problemas relatados, você deve sempre verificar o conteúdo e as interações reais da página em um navegador.

Salve e inspecione primeiro a página

Salve o arquivo HTML atual e abra-o em um navegador. Verifique se títulos, parágrafos, links, imagens e formulários aparecem onde você espera. Uma página visível não é prova de que sua marcação é válida: os navegadores podem corrigir certos erros e exibir um resultado diferente da estrutura que você havia planejado.

Execute o Nu HTML Checker

O Verificador de HTML pode inspecionar uma URL pública, um arquivo enviado ou uma marcação colada. Para um documento local ou não publicado, use o envio de arquivo ou a entrada direta. Não envie arquivos de origem contendo senhas ou dados pessoais para um serviço de validação público. As regras de tags e atributos em validação são apresentadas em Sintaxe HTML.

1. Salve a última versão do arquivo HTML.
2. Selecione o método de entrada apropriado e comece a verificação.
3. Leia cada mensagem e inspecione o local indicado, bem como as tags de abertura e fechamento próximas.
4. Corrija o arquivo, salve-o e depois reinicie a verificação.

Comece pelo primeiro erro na ordem do documento quando várias mensagens aparecerem. Um único atributo malformado pode causar várias mensagens subsequentes. A linha em que um erro é detectado pode não ser a que o causou; aspas não fechadas, por exemplo, pode fazer a próxima tag aparecer como inválida. Certifique-se de enviar a revisão salva em vez de validar várias vezes um arquivo antigo.

Por exemplo, essa marcação repete um id:

<label for="email">E-mail</label>

<input id="email" name="email" type="email">

<label for="email">Confirmar o e-mail</label>

<input id="email" name="email_check" type="email">

Altere o ID do segundo campo para email-check e atualize o rótulo for para que corresponda. Em seguida, verifique se o erro de duplicação de ID desapareceu e se cada rótulo foca corretamente em seu próprio campo. A ausência de uma tag de fechamento nem sempre é um erro: alguns elementos, incluindo li em determinados contextos, podem omitir sua tag de fechamento de acordo com as regras do HTML.

Verificar os exemplos completos com o Nu HTML Checker retornou Duplicate ID “email”. para o documento com falha e nenhum erro para a correção. Compare as interações dos rótulos separadamente; diagnósticos adicionais podem variar com as atualizações do validador ou dependendo do conteúdo dos arquivos.

Compare um documento com falha com sua correção

O seguinte exercício de validação repete intencionalmente um ID. Salve-o como invalid.html e verifique-o usando o modo de entrada de texto ou upload de arquivos do validador Nu HTML. Este é um caso de teste com falha, e não um código para ser implantado como está.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício de validação do documento</title>
</head>
<body>
  <h1>Exercício de validação dos rótulos</h1>
  <form method="get">
    <p><label for="email">E-mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email">Confirmar o e-mail</label>
      <input id="email" name="email_check" type="email"></p>
    <button type="submit">Examinar os valores inseridos</button>
  </form>
</body>
</html>

Procure no diagnóstico o valor literal email, usado duas vezes como ID. Um navegador ainda pode exibir dois campos, mas isso não associa corretamente cada nome ao seu próprio campo. O documento corrigido altera o segundo campo e o destino do rótulo para email-check.

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercício de validação do documento</title>
</head>
<body>
  <h1>Exercício de validação dos rótulos</h1>
  <form method="get">
    <p><label for="email">E-mail</label>
      <input id="email" name="email" type="email"></p>
    <p><label for="email-check">Confirmar o e-mail</label>
      <input id="email-check" name="email_check" type="email"></p>
    <button type="submit">Examinar os valores inseridos</button>
  </form>
</body>
</html>

1. Salve a correção como valid.html e valide o último arquivo em vez da cópia anterior.
2. Clique em cada rótulo e compare qual campo de entrada recebe o foco. Alterar um ID sem atualizar o atributo for deixa a associação incorreta.
3. Depois que o diagnóstico for resolvido, teste sempre os destinos, o conteúdo e o uso do teclado. Registre separadamente os resultados de sintaxe e usabilidade.

Não confunda um exemplo que falha intencionalmente com formatação incorreta no próprio artigo. Um bloco de código pode mostrar a string que reproduz um erro; o documento de validação é o documento autônomo criado a partir desse exemplo.

A validação é apenas um tipo de verificação

Um verificador de sintaxe não pode garantir que um link leva ao artigo correto, que o texto alternativo descreve corretamente uma imagem ou que um servidor gerencia corretamente um formulário. Abra os links, use a página com um teclado e verifique em uma janela de exibição estreita. Para mídias ausentes, examine os caminhos, as respostas do servidor e os formatos suportados, bem como a marcação. Aplique tanto verificações de sintaxe quanto testes de navegação reais em Criar um pequeno site multipágina.

Saiba o que você validou: um upload de arquivo verifica o arquivo, enquanto uma verificação de URL inspeciona o documento que o servidor realmente retorna. No WordPress, um tema envolve o corpo do artigo, então verificar um fragmento do manuscrito e verificar a página publicada completa pode produzir resultados diferentes. Separe os problemas no artigo dos problemas introduzidos pelo tema ou por um plugin.