Párrafos en HTML con la etiqueta <p>

Estrada Web Group
Administrador

codigos html para paginas web

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>

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

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

Ver Demo

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>

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.

Compartir artículo:

Más artículos geniales

Aprende HTML5 en 16 lecciones (Introducción)

Aprende HTML5 en 16 lecciones (Introducción)

¿qué es HTML5? Este post está dedicado a todos aquellos que quieren aprender HTML5, hoy iniciare una serie de 16 post donde explicare ¿qué es HTML5?, explicare como usarlo, las etiquetas, propiedades y más.

Ver artículo completo
Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

Cómo obtener la latitud y longitud de un pin que se puede arrastrar a través de Google Maps

El API de Google Maps ofrece una amplia gama de funcionalidades para interactuar con mapas. Se puede establecer estáticamente los marcadores (pines) mediante programación, pero también se puede permitir a los usuarios interactuar con el mapa arrastrando los marcadores existentes alrededor del mapa.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla