Cómo Mostrar Código HTML en una Página Web

Aprende a mostrar etiquetas HTML sin que el navegador las interprete como código

Métodos para Mostrar Código HTML

1. Uso de Entidades HTML

Reemplaza los caracteres especiales con sus equivalentes en entidades HTML:

<div>Contenido</div>


&lt;div&gt;Contenido&lt;/div&gt;

Ejemplo:

Para mostrar <div class="container"> en una página, debes escribir: &lt;div class=&quot;container&quot;&gt;

2. Uso de la Etiqueta <pre> y <code>

Combina estas etiquetas para mostrar código conservando el formato:

<pre>
<code>
&lt;div class=&quot;container&quot;&gt;
&lt;p&gt;Hola Mundo&lt;/p&gt;
&lt;/div&gt;
</code>
</pre>

Resultado:

<div class="container">
    <p>Hola Mundo</p>
</div>

3. Uso de la Etiqueta <xmp> (obsoleta pero funcional)

La etiqueta <xmp> muestra todo su contenido como texto literal:

<xmp>
<div class="container">
<p>Hola Mundo</p>
</div>
</xmp>
Nota: Aunque <xmp> todavía funciona en muchos navegadores, es una etiqueta obsoleta y no recomendada para nuevos proyectos.

Conversión de Caracteres Especiales

Carácter Entidad HTML Descripción
< &lt; Menor que (less than)
> &gt; Mayor que (greater than)
& &amp; Ampersand
" &quot; Comillas dobles
' &apos; Comillas simples

Prueba el Conversor

Escribe código HTML a continuación y conviértelo para mostrarlo en tu página:

Recomendación Final

Para mostrar bloques grandes de código, considera usar una librería de resaltado de sintaxis como:

Estas librerías no solo convierten los caracteres especiales, sino que también aplican colores para una mejor legibilidad.