Párrafos en HTML con la etiqueta

codigos html para paginas web

La etiqueta en HTML define un párrafo. Estas tienen etiqueta de apertura y cierre. Por lo tanto, todo lo mencionado en y 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, , 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>

Ver Demo

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 :

Como ya se mencionó, la etiqueta 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>

Ver Demo

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 . 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>

Ver Demo

Atributo de alineación

La etiqueta 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>

Ver Demo

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>

Ver Demo

Si tienes comentarios o sugerencias para mejorar este artículo o tienes dudas escríbenos en el apartado de comentarios.