Párrafos en HTML con la etiqueta <p>
La etiqueta <p> en HTML define un párrafo. Estas tienen etiqueta de apertura y cierre. Por lo tanto, todo lo mencionado en <p> y </p> se trata como un párrafo. La mayoría de los navegadores leen una línea como un párrafo, incluso si no usamos la etiqueta de cierre, es decir, </p>, pero esto puede generar resultados inesperados al momento de la visualización. Entonces, es una buena convención y debemos usar la etiqueta de cierre.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title> Párrafos en HTML</title>
</head>
<body>
<p>Desarrollando mi primer página web.</p>
<p>La cual está estructurada y diseñada de una manera profesional</p>
</body>
</html>
Cuando miramos la página web, vemos que hay pocos espacios agregados antes y después de un párrafo. HTML hace esto por defecto. Veamos algunas propiedades de la etiqueta de párrafo <p>:
- Como ya se mencionó, la etiqueta <p> agrega automáticamente espacio antes y después de cualquier párrafo, que es básicamente márgenes agregados por el navegador.
- Si un usuario agrega múltiples espacios, el navegador los reduce a un solo espacio.
- Si un usuario agrega varias líneas, el navegador las reduce a una sola línea.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mostrando Párrafos </title>
</head>
<body>
<p>
Este párrafo tiene múltiples
líneas. Pero el HTML los reduce.
a una sola línea, omitiendo
el retorno de carro que hemos utilizado.
</p>
<p>
Este párrafo tiene múltiples
espacios, pero el HTML los reduce.
Todo a un solo espacio, omitiendo
los espacios extra y la línea que hemos utilizado.
</p>
</body>
</html>
Etiqueta para salto de línea
Hay una manera para que el HTML sepa dónde necesita cambiar el navegador de línea mediante el uso de la etiqueta <br/>. Estas etiquetas no tienen ninguna etiqueta de cierre. Por lo tanto, solo una etiqueta de apertura cambiará a la siguiente línea.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title> Mostrar párrafo </title>
</head>
<body>
<p>
Este párrafo tiene múltiples <br/>
líneas. Pero el HTML los reduce <br/>
a una sola línea, omitiendo <br/>
El retorno de carro que hemos utilizado.
</p>
</body>
</html>
Atributo de alineación
La etiqueta <p> admite específicamente el atributo de alineación y nos permite alinear nuestros párrafos a la izquierda, a la derecha o al centro, pero con CSS3 esto ya ha cambiado la forma de alinear, la cual veremos a continuación.
Sintaxis:
<!DOCTYPE html>
<html>
<head>
<title>Parrafos</title>
</head>
<body>
<p align="center">Estrada Web Group</p>
<p align="left">Aprendiendo HTML desde cero.</p>
<p align="right">Para crear mi propia página web.</p>
<p style="text-align:center;">Estrada Web Group con CSS</p>
<p style="text-align:left;">Aprendiendo HTML desde cero con CSS.</p>
<p style="text-align:right;">Para crear mi propia página web con CSS.</p>
</body>
</html>
Etiqueta <pre>
Hemos visto cómo la etiqueta de párrafo ignora todos los cambios de líneas y espacios adicionales dentro de un párrafo, pero hay una manera de preservarlo mediante el uso de la etiqueta <pre>. También contiene una etiqueta de apertura y una de cierre. Muestra un texto con una altura y anchura fijas y conserva las líneas y espacios adicionales que utilizamos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Aprender HTML</title>
</head>
<body>
<pre>
Este párrafo tiene múltiples
líneas. Pero se muestra
como es a diferencia del párrafo
etiqueta.
</pre>
<pre>
Este párrafo tiene múltiples
espacios Pero se muestra
como es a diferencia del párrafo tag.
</pre>
</body>
</html>
Si tienes comentarios o sugerencias para mejorar este artículo o tienes dudas escríbenos en el apartado de comentarios.