br, hr, blockquote y pre
Controle los saltos de línea, las separaciones temáticas, las citas y el texto preformateado.
br, hr, blockquote y pre es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento br
El elemento <br> inserta un salto de línea dentro del contenido de texto:
<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->Cuándo usar br
Use <br> solo cuando los saltos de línea formen parte del contenido:
- Direcciones postales
- Poesía con saltos de línea específicos
- Letras de canciones
No use <br> para añadir espacio visual entre párrafos; esa es una tarea de CSS.
El elemento hr
El elemento <hr> representa una separación temática entre contenidos:
<p>Chapter One begins here and introduces the characters.</p>
<hr>
<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->Aplicar estilos a hr con CSS
Puede aplicar estilos completos a <hr>:
<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">
<!-- Or in CSS: -->
<!--
hr {
border: none;
border-top: 1px solid #ddd;
margin: 1.5rem 0;
}
-->El elemento blockquote
<blockquote> marca una sección citada de otra fuente:
<blockquote cite="https://example.com/article">
<p>The best time to plant a tree was 20 years ago.
The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->Citas en línea con q
Para citas breves en línea, use <q> en lugar de <blockquote>:
<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->El elemento pre
<pre> muestra el texto con una fuente monoespaciada y conserva exactamente los espacios en blanco:
<pre>
function hello() {
console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->pre y code juntos
Combine <pre> y <code> para crear bloques de código:
<pre><code>
const greet = (name) => {
return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->Escapado en pre
Los caracteres especiales de HTML dentro de <pre> también deben escaparse:
<pre><code>
<!-- These must be escaped: -->
<div class="box">
<p>Content</p>
</div>
<!-- < = < > = > & = & -->
</code></pre>Colapso de espacios en blanco
El HTML normal colapsa los espacios en blanco: varios espacios y saltos de línea se convierten en un solo espacio:
<p>This has extra spaces.</p>
<!-- Renders as: "This has extra spaces." -->
<pre>This keeps all spaces.</pre>
<!-- Renders exactly as written -->
<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved newlines</p>Resumen de los elementos de espacios en blanco
Referencia rápida:
<br>— salto de línea en línea (direcciones y poesía)<hr>— separación temática de secciones<blockquote>— cita a nivel de bloque<q>— cita en línea<pre>— texto preformateado que conserva los espacios en blanco<code>— fragmento de código en línea
Comprobación rápida
¿Qué elemento conserva exactamente todos los espacios en blanco, incluidos los espacios y saltos de línea tal como se escribieron?
Resumen: br, hr, blockquote y pre
Elementos de espacios en blanco y citas:
<br>— salto de línea dentro del contenido (no sirve para añadir espacio)<hr>— separación temática del contenido (semántica, no solo visual)<blockquote cite>— cita de bloque con fuente<q>— cita en línea<pre><code>— bloques de código formateados
Preguntas frecuentes
¿La lección «br, hr, blockquote y pre» es gratis?
Sí — el texto completo de «br, hr, blockquote y pre» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «br, hr, blockquote y pre»?
Controle los saltos de línea, las separaciones temáticas, las citas y el texto preformateado. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «br, hr, blockquote y pre»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Encabezados h1-h6 y su jerarquía
- Párrafos, em, strong, b e i
- br, hr, blockquote y pre
- Los elementos span y div