ronutz

Explicador de estrutura HTML e DOM

Cole HTML e leia a árvore que o parser de HTML constrói a partir dele: cada elemento, nó de texto e comentário com a sua linha, os elementos que o parser criou sem tag (html, head, body, tbody), as tags de fechamento que ele supriu, os elementos de formatação que dividiu e o conteúdo que moveu para fora de uma tabela, com o modo do documento (quirks ou não) e cada erro de análise pelo código e posição da própria especificação. Depois, os achados: o DOCTYPE, o idioma, o título, a codificação, imagens sem texto alternativo, links e botões sem nome, saltos de título, ids duplicados, controles sem rótulo, elementos e atributos obsoletos, cada um ligado a uma frase do HTML Standard ou da WCAG 2.2. Só análise: nenhum script roda, nada é buscado, nada é renderizado.

Documentação (Markdown)

Web e HTTP
Documentação
Experimente

No-quirks mode. 14 elementos, 6 nós de texto e nenhum comentário, 6 níveis de profundidade, a partir de uma linha de código.

Um erro de análise. Achados: um erro, 2 avisos, 3 notas.

O que o documento declara

DOCTYPE
<!DOCTYPE html>
modo
no-quirks O modo padrão: <!DOCTYPE html> ou um equivalente foi encontrado primeiro.
título
T
lang
en
charset
ausente
mais usados
li 2body 1br 1div 1head 1html 1img 1table 1tbody 1td 1title 1tr 1

A árvore que o parser construiu

Cada linha é um nó, recuado pela profundidade, com a linha da sua tag no código. Um elemento foi criado pelo parser sem tag, 3 tags de fechamento foram supridas pelo parser, nenhum elemento foi dividido, um nó foi movido para fora de uma tabela; nenhum nó de texto só de espaços fica fora da lista.

  1. 1<!DOCTYPE html>
  2. 1<html lang="en">
  3. 1<head>
  4. 1<title>
  5. 1“T”
  6. 1<body>
  7. 1<ul>
  8. 1<li>fim suprido
  9. 1“one”
  10. 1<li>fim suprido
  11. 1“two”
  12. 1“stray”movido
  13. 1<table>
  14. ·<tbody>criado
  15. 1<tr>
  16. 1<td>
  17. 1“x”
  18. 1<br>vazio
  19. 1<div>fim suprido
  20. 1“text”
  21. 1<img src="a.png">vazio

Um ponto na coluna das linhas marca um nó sem posição no código: o parser o criou. As etiquetas dizem o que o parser fez: criado (sem tag no código), fim suprido (sem tag de fechamento no código), vazio (nunca tem tag de fechamento), autofechado (conteúdo estrangeiro escrito com />), parte n (um elemento do código dividido em vários), movido (foster parenting para antes de uma tabela), obsoleto (seção 16.2 da especificação), template (vive no conteúdo de um template, não no documento).

Um erro de análise

linha:colcódigoo que a especificação diz
1:132non-void-html-element-start-tag-with-trailing-solidus especificaçãoEste erro ocorre quando o parser encontra uma tag de abertura de um elemento que não é vazio (void) nem estrangeiro (SVG ou MathML) com um U+002F (/) logo antes do U+003E (>) final. O parser se comporta como se o / não existisse: tags autofechadas não existem em HTML, e o / só tem efeito em conteúdo estrangeiro; em elementos vazios é permitido, mas sem efeito algum.

Os códigos marcados como especificação são os do próprio HTML Standard (13.2.2 Parse errors, cujas descrições são não normativas); a especificação deixa sem nome os erros da construção da árvore, e o parse5, o parser usado aqui, nomeia esses por conta própria. Erros de análise são só de sintaxe: "Parse errors are only errors with the syntax of HTML." O tratamento de erros é definido, então um documento com erros ainda tem uma árvore exata, a mostrada acima.

6 achados

  1. notaD5A declaração de codificação
    <meta charset="utf-8">

    Nenhuma codificação de caracteres é declarada no documento (nem meta charset nem meta Content-Type). Se a resposta HTTP também não declarar, o navegador adivinha a codificação. O HTML Standard exige que documentos sejam UTF-8; <meta charset="utf-8"> no head declara isso no próprio arquivo.

  2. erroD6linha 1Imagens sem texto alternativo
    <img>

    Um elemento img não tem atributo alt (linha 1). WCAG 2.2 SC 1.1.1 Non-text Content (nível A): "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose". O HTML Standard: "Except where otherwise specified, the alt attribute must be specified and its value must not be empty", e para imagens puramente decorativas "the alt attribute must be present but must be empty". Um alt ausente e um alt vazio significam coisas diferentes.

  3. avisoD13linha 1Tags de fechamento supridas pelo parser
    <div>

    Um elemento div foi fechado pelo parser, não por uma tag de fechamento no código, e div não está entre os elementos cuja tag de fechamento a especificação permite omitir (html, head, body, li, dt, dd, p, rt, rp, optgroup, option, colgroup, caption, thead, tbody, tfoot, tr, td, th). Ou a tag de fechamento falta, ou uma tag posterior fechou este elemento antes (aninhamento errado). A árvore mostra onde o parser o encerrou.

  4. avisoD15linha 1Conteúdo movido para fora de uma tabela
    <table>

    Um nó foi movido para antes da tabela: texto ou elementos escritos dentro de uma tabela onde só partes de tabela (caption, colgroup, thead, tbody, tfoot, tr, td, th) podem aparecer são inseridos antes da tabela pela regra de foster parenting da especificação. Na árvore eles aparecem antes da tabela em que foram escritos.

  5. notaD16Elementos vazios escritos com barra final
    <br />

    Um elemento vazio está escrito com barra final (<br />). O HTML Standard: "On void elements, it does not mark the start tag as self-closing but instead is unnecessary and has no effect of any kind. For such void elements, it should be used only with caution", porque "if directly preceded by an unquoted attribute value, it becomes part of the attribute value". Inofensivo como está escrito aqui.

  6. notaD20Elementos criados pelo parser
    <tbody>

    O parser criou um elemento que não tem tag no código: tbody. O HTML Standard: "Omitting an element's start tag in the situations described below does not mean the element is not present; it is implied, but it is still there." html, head, body e tbody são os habituais.

O que não rodou

elementos script
0 (nenhum externo)
manipuladores de evento inline
0
URLs javascript:
0
elementos style
0
iframes
0

Esta página constrói a árvore e a lê. Scripts ficam como texto, atributos de evento como atributos, URLs como cadeias; nenhum estilo é aplicado, nenhuma imagem, frame ou script é buscado. O mesmo parser roda na API hospedada com o mesmo resultado.

O parser é o parse5 8.0.1, que implementa o tokenizador e a construção de árvore do HTML Standard tal como estavam no seu lançamento, com a flag de scripting desligada (como o DOMParser analisa), de modo que o conteúdo de noscript é lido como elementos. A tokenização de instruções de processamento que a especificação ganhou em 2026 não está nele: <?…> é relatado sob o nome anterior unexpected-question-mark-instead-of-tag-name e vira comentário, que é também o que a especificação atual faz com um alvo xml. Os achados leem estrutura, não significado: não sabem se um texto alternativo é bom, se um título descreve a sua seção ou se uma etiqueta lang está certa; headingoffset e headingreset não são aplicados à estrutura. Entradas acima de 200.000 caracteres são recusadas.

Endpoint da APIGEThttps://ronutz.com/api/v1/html-structure-explainerDocumentado, não servido. Abre a especificação.

Referências