Comparar o código-fonte com o DOM no navegador

Em uma página HTML estática, você pode investigar:

• Código-fonte: qual HTML foi carregado do arquivo de prática? Essa visualização mostra a marcação de origem, antes de alterações realizadas no inspetor.
• Painel Elementos ou Inspetor: qual é a estrutura atual do documento no navegador? Esse painel apresenta o DOM, não uma reprodução literal do arquivo original.

DOM significa Modelo de Objeto de Documento. É a árvore que o navegador constrói ao interpretar o HTML. Você não precisa programar para observá-la: o painel Elementos ou Inspetor permite visualizar essa estrutura.

Use um computador com Chrome, Edge ou Firefox e abra uma página HTML estática do seu projeto para praticar.

1. Clique com o botão direito em uma área livre da página, fora de links e imagens. Escolha Exibir código-fonte da página ou um comando com nome semelhante.
2. Observe a marcação na visualização aberta, geralmente em outra aba. Esse é o código-fonte.
3. Volte à aba da página exibida. Clique com o botão direito e escolha Inspecionar.
4. Nas ferramentas abertas, confira se está no painel Elementos, no Chrome ou Edge, ou Inspetor, no Firefox. É ali que você observa o DOM.

No editor, acrescente este trecho antes de </body> no arquivo de prática. Salve e atualize a página.

Clique com o botão direito em “A entrada é” e escolha Inspecionar. Outra opção é ativar a ferramenta de seleção de elemento no inspetor, geralmente representada por um cursor sobre um quadrado, e clicar nesse trecho da página.

A linha selecionada no painel corresponde ao elemento escolhido.

Use o pequeno triângulo ao lado do elemento para expandir ou recolher seu conteúdo. Recolher apenas esconde os detalhes no painel.

Com o parágrafo expandido, observe:

• Atributos: aparecem na tag de abertura.
• Pai direto: é o elemento cujo ramo contém o parágrafo, um nível acima.
• Elementos filhos diretos: estão dentro do parágrafo, no nível seguinte.

Conteúdo textual sem tags não é um elemento filho.

Abra a visualização do código-fonte da página atualizada. Use a busca, com Ctrl+F ou Command+F, por id="aviso". Outra possibilidade é buscar o texto “A entrada é”.

Compare o trecho encontrado com o elemento selecionado no inspetor. O identificador e o conteúdo ajudam a confirmar que você está examinando o mesmo elemento.

Ao interpretar este trecho de HTML, o navegador cria um elemento tbody no DOM, mesmo sem suas tags no código-fonte. Compare o aninhamento nas duas visualizações:

O HTML permite omitir determinadas tags em condições específicas. Neste exemplo, as tags de abertura e fechamento de tbody podem ser omitidas: o elemento é criado durante a interpretação do HTML.

Portanto, essa omissão não torna o trecho inválido. Isso não significa que qualquer tag possa ser omitida.

Neste trecho do body, a escrita sugere um div dentro de p. Mas o analisador de HTML aplica regras para construir a árvore: ele não preserva necessariamente o aninhamento pretendido pelo autor.

Ao encontrar <div>, o navegador fecha p implicitamente. O div passa a ser irmão desse parágrafo, não seu filho.

Quando chega ao </p> final, já não há um p aberto. Neste caso, a recuperação do erro cria e fecha um novo p, vazio. Isso muda a estrutura construída, não o arquivo original.

No caso de tbody visto antes, a omissão das tags era permitida.

O fechamento implícito de p antes de div também pode ser permitido. Porém, neste exemplo, sobra um </p> sem parágrafo aberto. O p vazio surge durante a recuperação desse erro — não é evidência de que o código original esteja correto.

Na página de prática, use a seção que você inseriu na etapa 2. Escolha nela um elemento com texto simples, como um título ou parágrafo, e anote o texto original.

1. Inspecione esse elemento.
2. No painel Elementos ou Inspetor, expanda-o se necessário. Dê um duplo clique apenas no texto entre as tags.
3. Substitua o texto por “Teste temporário” e pressione Enter.

Confira: o novo texto aparece no painel e na página, sem precisar atualizar.

1. Antes de atualizar, abra a exibição do código-fonte e localize o trecho escolhido. Ele deve continuar com o texto original, embora o DOM mostre “Teste temporário”.
2. Volte à aba da página de prática e clique em Recarregar. Atualize a página, não apenas a aba do código-fonte.
3. Inspecione novamente o mesmo elemento. Confira se o texto original voltou tanto na página quanto no painel.

Retome o caso de um div escrito dentro de p. Na cópia de prática, insira o trecho abaixo dentro de body, após o último elemento e antes de </body>. Se já copiou o exemplo anterior, preserve seus textos e não duplique o caso.

Salve o arquivo, atualize a página e inspecione o trecho. Confira o ponto de partida: no DOM, o div está fora do p, e há um p vazio ao final do caso. Essa é a estrutura que você vai comparar com o resultado da correção.

Neste caso, queremos um contêiner que reúna os textos e o div interno. No editor, localize o trecho pelo texto e troque somente as tags externas <p> e </p> por <div> e </div>. Preserve o conteúdo.

Salve o documento abaixo como diagnostico.html e abra-o no navegador.

Sua meta é preservar os dados da tabela e deixar a região aviso com um parágrafo seguido de um div, ambos filhos desse contêiner, sem parágrafos vazios. Investigue antes de decidir o que alterar.