Para formatear texto, necesitas entender qué etiquetas usar. Para crear una nueva línea en el texto, hay varias maneras. En este artículo te enseñaremos cómo usarlas.
La Etiqueta <br> para el Salto de Línea
Se usa para insertar un salto de línea en el texto, sin crear un párrafo.
Sintaxis: es una etiqueta única, es decir, no tiene etiqueta de cierre.
Ubicación: se usa dentro de un elemento de bloque o contenedor donde se necesita un salto de línea.
Valor predeterminado: no tiene atributos ni propiedades, no acepta ningún parámetro, la etiqueta simplemente crea un salto de línea.
Uso en el texto: puedes usar varias etiquetas <br> para crear varios saltos de línea.
Dónde usar: en direcciones de correo electrónico, poemas, letras de canciones, horario de trabajo.
No uses la etiqueta
<br>para dividir el texto en “algo así como párrafos”. Para eso, usa la etiqueta<p>.
Ejemplo de uso:
<p>
Miau miau miau
<br>
mrrr miau miaaaaau
<br>
miau miau
</p>Más información sobre la etiqueta <br> en nuestro manual de HTML.
La Etiqueta <p> para el Párrafo
Se utiliza si necesitas separar un bloque de texto de otro.
Sintaxis: la etiqueta <p> es una etiqueta de bloque, lo que significa que tiene etiquetas de apertura y cierre.
Ubicación: la etiqueta generalmente se usa dentro del contenedor <body> para colocar un párrafo en una página web. Puede contener texto, imágenes, enlaces y otros elementos HTML.
Sangrías: la etiqueta crea sangrías arriba y abajo del párrafo de forma predeterminada, para separarlo del contenido circundante.
Uso en el texto: puedes usar varias etiquetas <p> para crear varios párrafos.
Dentro del párrafo no pueden colocarse etiquetas estructurales grandes, encabezados, formularios, listas, tablas. Cuando el navegador encuentra una etiqueta no adecuada dentro de
<p>, la “expulsa” de<p>.
Ejemplo de uso:
<p>Este es el primer párrafo.</p>
<p>Este es el segundo párrafo.</p>Más información sobre la etiqueta <p> en el artículo
La Etiqueta <div> para el Bloque
La etiqueta <div> se utiliza para agrupar elementos estructurales o como contenedores auxiliares para crear el diseño deseado.
Sintaxis: la etiqueta <div> es una etiqueta de bloque y tiene etiquetas de apertura y cierre.
Ubicación: la etiqueta puede colocarse dentro de otros elementos HTML, como <body>, <section>, <article>, <header>, <footer> y otros.
Uso en la estructura de la página web: la etiqueta se usa a menudo para crear secciones o bloques en la página web. Por ejemplo, puedes usar <div> para agrupar elementos relacionados, crear una cuadrícula, estilos, colocar elementos y mucho más.
Contenido no estructurado: a diferencia de <p>, <ul>, <ol>, <table>, <div> no tiene significado semántico y no está diseñado para un tipo específico de contenido. Se utiliza principalmente para el estilo y la organización del contenido en la página.
Se recomienda su uso cuando no se encuentran etiquetas semánticas más adecuadas.
Ejemplo de uso:
<div>Este es el primer bloque.</div>
<div>Este es el segundo bloque.</div>Para recordar:
<br>: para saltos de línea dentro del texto.<p>: para crear párrafos o bloques de texto.<div>: para crear contenedores de bloques.
<h1>Ejemplos de Etiquetas HTML</h1>
<h2>Párrafo (<p>)</h2>
<div class="p-block">
<p>Este es un párrafo. Se ve como un bloque de texto separado. Se utiliza para agrupar texto y darle formato.</p>
</div>
<h2>Salto de línea (<br>)</h2>
<div class="br-block">
<p>Este es un párrafo. Se ve como un bloque de texto separado. <br><br>Este texto está en la misma línea que el párrafo, pero con un salto de línea.</p>
</div>
<h2>División (<div>)</h2>
<div class="div-block">
<h1>Este es un título dentro de un div</h1>
<p>Este es un párrafo dentro de un div.</p>
</div>
body {
font-family: monospace;
}
.p-block {
background-color: lightblue;
padding: 10px;
margin-bottom: 15px;
}
.br-block {
background-color: lightgreen;
padding: 10px;
margin-bottom: 15px;
}
.div-block {
background-color: lightcoral;
padding: 10px;
margin-bottom: 15px;
}
