Ver HTML
Cole HTML e veja-o desenhado logo ali, com a contagem dos elementos e a lista das etiquetas por fechar.
Resultados
O que faz esta ferramenta
Às vezes tem um pedaço de HTML — de um modelo de email, de uma página de documentação, de um excerto que alguém lhe enviou — e só quer saber que aspecto tem sem fazer um ficheiro e abri-lo. Cole-o aqui. A página em baixo é desenhada à medida que escreve, dentro de uma moldura sem permissão nenhuma, e os números ao lado dizem-lhe quantos elementos, ligações, imagens e títulos existem, e se todas as etiquetas que têm de fechar fecham mesmo.
Fórmula
percorre as etiquetas uma a uma, saltando comentários, script e style, e conta as que ficam por fechar
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
text | HTML | — |
OUT | Como fica | — |
EL | Elementos | — |
LK | Ligações | — |
IM | Imagens | — |
HD | Títulos | — |
SR | Scripts | — |
OK | Todas as etiquetas fecham | — |
UC | Etiquetas por fechar | — |
CH | Caracteres | — |
Exemplo resolvido
- HTML<h1>A small page</h1> <p>Some text with a <a href="https://example.com">link</a> in it.</p> <ul> <li>First <li>Second </ul> <p><img src="https://example.com/picture.png" alt="A picture"></p>
- Como fica<h1>A small page</h1> <p>Some text with a <a href="https://example.com">link</a> in it.</p> <ul> <li>First <li>Second </ul> <p><img src="https://example.com/picture.png" alt="A picture"></p>
- Elementos8
- Ligações1
- Imagens1
- Títulos1
- Scripts0
- Todas as etiquetas fechamSim
- Etiquetas por fechar—
- Caracteres194
Limitações
- O cálculo é feito inteiramente no seu navegador. Os valores que introduz nunca são enviados para um servidor.
Perguntas frequentes
É seguro colar aqui qualquer coisa?
A pré-visualização é desenhada dentro de uma moldura com todas as permissões desligadas, por isso os scripts não correm, os formulários não são submetidos e a moldura não vê a página à volta dela. O que colar também nunca é enviado para lado nenhum. Trate a pré-visualização como um retrato do seu HTML e não como uma página a funcionar: se a marcação depender de JavaScript, essa parte não ganha vida aqui.
Porque diz que as etiquetas estão bem se eu nunca fechei o <li>?
Porque o HTML deixa omitir alguns fechos de propósito. Um item de lista novo termina o anterior, e o mesmo vale para parágrafos, células e linhas de tabela. Contar isso como erro seria uma acusação falsa, por isso não se conta. Tudo aquilo cujo fecho é mesmo obrigatório — um div, um span, uma section — continua a ser assinalado.