Saltar al contenido principal
Codigo Heroe
Tarea anterior
Marcado de texto avanzado13/19
A la lista de tareas
  1. 1. Conectar y quitar hojas de estilo
  2. 2. La etiqueta ul: listas no ordenadas
  3. 3. La etiqueta ol: listas ordenadas
  4. 4. Los atributos start y reversed
  5. 5. Listas anidadas
  6. 6. Las etiquetas dl, dt y dd: listas de descripciones
  7. 7. La etiqueta pre: texto preformateado
  8. 8. Entidades HTML
  9. 9. La etiqueta code: fragmentos de código
  10. 10. Combinar pre y code
  11. 11. La etiqueta q: citas dentro de una oración
  12. 12. La etiqueta blockquote: citas en bloque
  13. 13. La etiqueta br: saltos de línea
  14. 14. Las etiquetas sub y sup: subíndices y superíndices
  15. 15. La etiqueta time: fechas y horas
  16. 16. Las etiquetas em e i: énfasis y texto diferenciado
  17. 17. Las etiquetas strong y b: importancia y atención
  18. 18. Las etiquetas del e ins: marcar cambios
  19. 19. Las etiquetas div y span: contenedores para estilos
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La etiqueta br: saltos de línea

El poema todavía no parece un poema: faltan saltos de línea dentro de la estrofa. Ya conocemos muchas etiquetas. ¿Servirá alguna para separar los versos?

La primera candidata es <p>. Sirve para marcar una estrofa, pero necesitamos saltos de línea dentro de ella. La descartamos. La segunda es <pre>, que conserva todo el formato. Parece útil, pero solo queremos conservar los saltos de línea. Ninguna de las dos nos sirve.

Necesitamos una etiqueta que agregue un salto de línea dentro de un párrafo. Para eso, HTML tiene la etiqueta sin cierre <br>, de «line break».

Es útil cuando los saltos de línea ayudan a leer el texto, como en direcciones postales, poemas, letras de canciones u horarios.

A veces se usa mal para separar el texto en una especie de párrafos. No lo hagas: para marcar párrafos existe <p>.

  • 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>Sigue siendo el día siete. Cupcake me dio una tarea</h1> <p>Hoy vino Cupcake y me dio una tarea algo peculiar. Una gatita se mudó junto a su casa y él no sabe componer canciones. Por eso me pidió que buscara una gran obra para cantársela.</p> <p>Como se suele decir, <q>para un buen gato, hasta febrero es primavera</q> (<cite>sabiduría popular</cite>).</p> <p>Encontré este poema para Cupcake:</p> <blockquote> <p> Miau miau miau prrr miau miaaau miau miau miau </p> <cite>Obras reunidas de M. Gatínez.</cite> </blockquote> <p>Espero que a la vecina de Cupcake le guste esta balada.</p> </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; } blockquote { padding-left: 14px; border-left: 2px solid #6a2cce; color: #6a2cce; } cite { color: #222222; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Agrega <br> después del primer, segundo y tercer verso del poema para Cupcake. Así se verá como una estrofa de cuatro versos.
    Codigo Heroe

    © 2023-2026, codigoheroe.com