Teoría
Teoría

Combinar pre y code

Vamos a agregar a la entrada un ejemplo más claro: un fragmento de código con varias líneas y un formato cuidado. Como recordarás, <pre> conserva el formato y <code> marca el código. Tendremos que combinarlas, es decir, anidar una dentro de otra.

Lo importante es respetar el orden: <code> puede estar dentro de <pre>, pero no al revés. Por ejemplo:

<pre><code>
if (a > b) {             // Un ejemplo de código
  console.log('Hello!'); // en JavaScript
}
</code></pre>

El navegador mostrará igual un <pre> solo y un <pre> con <code> dentro, pero la segunda opción describe mejor el contenido.

Agregamos algunos estilos de fuente y color para mejorar el aspecto de <pre> y <code>. Puedes verlos en la pestaña style.css.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día seis. No entendí nada</h1> <p>Hoy visité varios sitios para ver cómo estaban hechos. Encontré unas citas y dos etiquetas que no conocía: <code><cite></code> y <code><blockquote></code>.</p> <p>No entendí en qué se diferencian. Cerré el navegador. Ya lo investigaré mañana.</p> <p>Esto fue lo que vi.</p>  <blockquote> <p>La inteligencia vale más cuando la fuerza vale menos.</p> <cite>Jason Statham</cite> </blockquote> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } pre, code { font-family: "Courier New", "Courier", monospace; color: #6a2cce; }

ObjetivosRealizado

Envuelve el ejemplo de código de las líneas 24 a 27 en <pre>.
Dentro de <pre>, envuelve el texto en <code>.