13.03.2025

Exibindo Tags HTML Dentro de <code> e <pre>: Uma Solução

Resposta Rápida

Para exibir a tag <div> em texto puro, use entidades HTML: substitua < por < e > por >.

Exemplo:

<code>&lt;div&gt;Texto&lt;/div&gt;</code>

Esse código será interpretado como texto: <div>Texto</div>.

Formas Alternativas de Exibir Tags HTML

Usando um Campo de Texto Somente Leitura

Um campo de texto configurado para o modo "somente leitura" pode ser uma ótima maneira de demonstrar tags HTML.

<textarea readonly>
&lt;div&gt;Seu texto&lt;/div&gt;
</textarea>

Esse código cria um bloco que mostra <div>Seu texto</div>, sem a possibilidade de alterá-lo ou ter destaque de sintaxe.

A Tag <xmp> Menos Comum

Apesar de sua idade, a tag <xmp> ainda pode ser usada para exibir código HTML:

<xmp>
<div>Texto</div>
</xmp>

No entanto, seu uso não é recomendado, pois navegadores modernos podem interpretar o conteúdo de forma inadequada.

Visualização

Suponha que você queira mostrar como fazer uma "sopa HTML", mas suas tags se tornam elementos HTML reais durante a preparação.

🥣 Instruções: 'Para criar `<div></div>` você precisa...'

Na cozinha, você encontrará: [🍅, 🥕, 🍲, 🍽️]

Mas se você inserir as tags usando entidades:

Mostre `<div>` em texto puro:

<code>&lt;div&gt;&lt;/div&gt;</code>

Nós vemos <div></div>, usando-o como um ingrediente em vez de um prato final:

Você escreveu: `<div></div>`
Você verá: `<div></div>`

Feliz codificação, chefs! 🧑‍🍳👩‍🍳

Dicas e Truques para Exibir Tags HTML

Usando Ferramentas Utilitárias para Escapar

Use ferramentas online para converter rapidamente caracteres em entidades HTML, especialmente ao trabalhar com blocos de código grandes ou complexos.

Destaque de Sintaxe

Para melhorar a legibilidade do código, aplique bibliotecas JS como Prism.js ou Highlight.js, que não apenas preservam o texto das tags HTML, mas também fornecem destaque de sintaxe.

Sanitização de HTML

Ao trabalhar com conteúdo gerado pelo usuário, é importante garantir a sanitização de HTML para proteger contra ataques XSS. Bibliotecas como DOMPurify ajudam a exibir entidades HTML corretamente e de forma segura.

Recursos Úteis

1. Glossário do MDN Web Docs: Definições de Termos Relacionados à Web: Aqui você pode encontrar informações sobre o uso de entidades HTML.
2. Entidades HTML no W3Schools: Um guia detalhado sobre o uso de entidades HTML.
3. Quais Caracteres Precisam Ser Escapados em HTML? - Stack Overflow: Uma discussão da comunidade Stack Overflow sobre como escapar caracteres em HTML.
4. Tudo Sobre o Elemento HTML <pre> - SitePoint: Um artigo sobre o uso da tag <pre> e cenários onde pode ser útil.
5. Referência sobre Entidades HTML em HTML 4: Uma lista completa de entidades HTML do W3C.
6. Como Quebrar Texto em um Elemento <pre> - CSS-Tricks: Dicas para uma boa quebra de texto dentro da tag <pre>.

Video

Navigation