¿Cómo puedo mostrar código en una página HTML?

Muestra código en HTML usando «code» para fragmentos y «pre»«code» para bloques, conservando formato.

Para mostrar código (HTML, CSS, JavaScript, Python, etc.) directamente en una página HTML de forma que se vea como texto y no sea interpretado por el navegador, tienes un par de herramientas principales y una consideración muy importante:

La etiqueta <code>:
Esta etiqueta se utiliza para marcar semánticamente un fragmento de código informático.
Por defecto, los navegadores suelen mostrar el contenido dentro de <code> con una fuente monoespaciada (como Courier o Consolas), que es la convención para visualizar código.
Es ideal para pequeños fragmentos de código en línea con el texto.
La etiqueta <pre>:
La etiqueta <pre> (de «preformatted text» o texto preformateado) es crucial cuando quieres mostrar bloques de código más grandes, ya que conserva los espacios en blanco, tabulaciones y saltos de línea tal como los has escrito en tu archivo HTML.
Sin <pre>, el navegador colapsaría múltiples espacios en uno solo y no respetaría los saltos de línea.
Combinación de <pre> y <code>:
La práctica más recomendada y semánticamente correcta para mostrar bloques de código es anidar una etiqueta <code> dentro de una etiqueta <pre>.

Consideración crucial: Escapar caracteres HTML

Dentro del código que quieres mostrar, si este contiene caracteres que HTML usa para su propia sintaxis (como <, > o &), debes reemplazarlos por sus entidades HTML correspondientes: < para <, > para >, y & para &.

Si no lo haces, el navegador intentará interpretar ese código como parte de la estructura de tu página, rompiendo la visualización.

Ejemplo de cómo anidar las etiquetas <pre> y <code> para mostrar un bloque de código HTML.

Observa cómo los caracteres especiales de HTML (como <, > y &) dentro del código que se quiere mostrar están «escapados» utilizando sus respectivas entidades HTML (<, >, &):

<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mostrando Código de Ejemplo</title>
    <style>
        /* Estilo opcional para el bloque de código */
        pre {
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            padding: 10px;
            overflow-x: auto; /* Para scroll horizontal si el código es muy largo */
        }
        code {
            font-family: Consolas, "Courier New", monospace;
        }
    </style>
</head>
<body>

    <h1>Ejemplo de Código HTML Anidado</h1>

    <p>Aquí abajo se muestra cómo definir un párrafo y un enlace en HTML:</p>

    <pre><code class="language-html">&lt;p&gt;Este es un párrafo que contiene un &lt;a href="pagina.html"&gt;enlace de ejemplo&lt;/a&gt;.&lt;/p&gt;
&lt;!-- Esto es un comentario HTML y también se muestra --&gt;
&lt;div&gt;
  &lt;span&gt;Más código aquí.&lt;/span&gt;
&lt;/div&gt;</code></pre>

    <p>Como puedes ver, el navegador muestra el código tal cual, sin interpretarlo, gracias al uso de <code>&lt;pre&gt;</code>, <code>&lt;code&gt;</code> y el escape de caracteres.</p>

</body>
</html>
Lenguaje del código: PHP (php)

En este ejemplo:

La etiqueta <pre> asegura que se respeten los espacios en blanco y los saltos de línea del código.
La etiqueta <code> indica semánticamente que el contenido es un fragmento de código.
Los caracteres < y > se usan para mostrar los < y > literales sin que el navegador los interprete como inicio o fin de una etiqueta HTML.
He añadido un poco de CSS opcional en el <style> para que el bloque de código se distinga visualmente, lo cual es una práctica común.
La clase language-html en la etiqueta <code> es útil si luego quisieras aplicar un resaltador de sintaxis JavaScript.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante