En los documentos HTML, las etiquetas funcionan más para marcar el contenido que para indicar cómo debe presentarse. Se obtiene un mayor control sobre la presentación usando estilos. En este artículo, veremos los estilos relacionados con cómo formatear un párrafo en HTML.

La etiqueta <p> en HTML permite definir párrafos, y el atributo align los alinea a la izquierda, a la derecha, al centro o a lo ancho. Además de estos, usaremos el atributo global style.

Cómo alinear texto en HTML

Puedes alinear un párrafo usando el atributo align con los siguientes valores:

HTML
text-align: left|right|center|justify|initial|inherit;

Copia el siguiente código en un archivo .html:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Alinear párrafo con el atributo Style</title>
</head>
<body>
<p style="text-align:center">Este párrafo está alineado al centro</p>
<p style="text-align:right">Este párrafo está alineado a la derecha</p>
<p style="text-align:justify">Este párrafo se muestra en la ventana del navegador alineado a lo ancho. Un párrafo justificado se alinea a la derecha e izquierda añadiendo espacios adicionales. Puedes ver que los bordes del párrafo justificado coinciden con los bordes de los párrafos alineados a la izquierda y a la derecha. En el párrafo alineado a la izquierda, el borde izquierdo es recto, y en el párrafo alineado a la derecha, el derecho. ¿Ves que este párrafo tiene ambos bordes rectos? Esto se logra con el estilo `text-align:justify`.</p>
</body>
</html>

En la ventana del navegador, el código HTML del párrafo se verá así:

Ejemplo de alineación de texto en HTML: izquierda, derecha, centro y justificado.
Aprende a alinear texto en HTML usando diferentes atributos.

Cómo implementar el interlineado en HTML

Puedes controlar el interlineado de un párrafo usando style=line-height. Usa el atributo style con los siguientes valores:

HTML
line-height: normal|number|length|initial|inherit;

Aquí tienes un ejemplo de código HTML que muestra párrafos con diferentes interlineados:

<!DOCTYPE html>
<html>
<head>
<title>Establecer interlineado con el atributo Style</title>
</head>
<body>
<p style="line-height:1.5; text-align:justify">En este párrafo se usan dos valores para el atributo `style`. El primero, `line-height:1.5`, define un interlineado de 1.5 para el párrafo, y el segundo, `text-align:justify`, define que el texto del párrafo debe justificarse.</p>
<p style="line-height:2; text-align:justify">Este párrafo tiene un interlineado doble y está justificado. `line-height:2` define el interlineado doble. El atributo `style` no necesita tener dos valores. Pero si necesitas dos, puedes hacerlo separándolos con un punto y coma.</p>
</body>
</html>
Ejemplo de interlineado simple y doble en HTML.
Control del espacio vertical entre líneas de texto en HTML.

Aquí hay algunas maneras diferentes de usar el valor line-height para el atributo style:

  • <p style="line-height: 13px">: Establece un interlineado de 13 píxeles;
  • <p style="line-height:200%">: Establece la distancia entre párrafos en HTML al 200% del tamaño de fuente actual;
  • <p style="line-height:14px">: Establece la altura de línea a 14 píxeles.

Sangrías (espaciado)

He usado el término “sangrías” para que sea más fácil de entender. Pero en HTML usamos espacios para crear espacio vacío alrededor de un objeto. Puedes usar el atributo style con el valor padding para establecer una sangría izquierdo o derecho para un párrafo.

Aquí hay un ejemplo de párrafos con sangría izquierda y derecha:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Márgenes de párrafos con el atributo Style</title>
</head>
<body>
<p style="text-align:justify">Este párrafo no tiene margen, simplemente está justificado. Mira el atributo `style` del elemento P para este párrafo.</p>
<p style="padding-left:30px; text-align:justify">Para este párrafo, he establecido un margen izquierdo de 30 píxeles usando `padding-left:30px`. Este párrafo también está justificado usando `text-align:justify`. Como ya sabes, podemos usar varios valores para el atributo `style`, separándolos con un punto y coma.</p>
<p style="padding-right:30px; text-align:justify">Y este párrafo tiene un margen derecho de 30 píxeles, pero no tiene margen izquierdo. También está justificado. El valor `padding-right` del atributo `style` establece el margen derecho. Si no ves el efecto, reduce el ancho de la ventana del navegador para que el párrafo HTML justificado se muestre correctamente.</p>
</body>
</html>
Ejemplo de márgenes izquierdo y derecho en párrafos HTML.
Control de los márgenes en párrafos HTML usando el atributo style.

Para crear una sangría en HTML, usa la etiqueta <p> con la propiedad CSS margin.

Espaciado entre párrafos (sangría superior e inferior)

En HTML o CSS, no necesitamos esto. Simplemente podemos especificar el estilo padding para el elemento <p>. padding-top y padding-bottom establecen el espacio vacío antes y después del párrafo, lo que funciona como sangría superior o inferior. Mira el ejemplo de la etiqueta <p> que aparece a continuación. He establecido una sangría de 10 píxeles antes del segundo párrafo HTML y 50 píxeles después del segundo párrafo:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Espaciado entre párrafos con el atributo Style</title>
</head>
<body>
<p style="text-align:justify">Para este párrafo no se han establecido márgenes antes o después. Es un párrafo normal, justificado. Como ya sabes, podemos justificar un párrafo usando el código `style="text-align:justify"` dentro de la etiqueta.</p>
<p style="padding-top:10px; padding-bottom:50px; text-align:justify">Este párrafo está justificado. También tiene un margen de 10 píxeles antes y 50 píxeles después. Dentro de la etiqueta, he establecido 3 estilos.</p>
<p>Este es un párrafo normal sin márgenes y con la alineación predeterminada.</p>
</body>
</html>
Ejemplo de espaciado entre párrafos en HTML usando márgenes superior e inferior.
Control del espacio vertical entre párrafos en HTML.

Qué recordar

  • Un párrafo HTML se puede alinear usando el atributo align o el estilo text-align;
  • El HTML se mostrará de manera diferente dependiendo del tamaño de la pantalla y del tamaño de la ventana del navegador;
  • Añadir espacios adicionales o líneas en blanco al código HTML no afecta a la salida. El navegador elimina todos los espacios adicionales;
  • Las etiquetas especifican qué debe mostrarse, y los estilos determinan cómo debe mostrarse;
  • Los estilos se pueden establecer de tres maneras diferentes: en línea (dentro de las etiquetas), internas (dentro del mismo archivo HTML usando el elemento <style>) y externas (en un archivo separado);
  • La mejor práctica al desarrollar sitios web es usar un archivo CSS externo. De esta manera, podemos separar el contenido y la presentación;
  • Style es un atributo global, por lo que se puede usar con cualquier otro elemento, no solo con el elemento <p>;
  • El estilo text-align alinea el párrafo a la izquierda, al centro, a la derecha o justificado;
  • El interlineado para un párrafo se puede establecer usando el estilo line-height. Puede aceptar diferentes valores;
  • Puedes especificar valores múltiplos para line-height (1 para interlineado simple, 1.5 para interlineado 1.5, 2 para doble, 3 para triple, etc.), así como píxeles, porcentajes, etc.;
  • La sangría para un párrafo en HTML se puede establecer usando el estilo padding-left o padding-right. Puede aceptar valores en píxeles, porcentajes, etc.;
  • El espacio entre párrafos en HTML se puede establecer usando los estilos padding-top o padding-bottom. Para ello, también se permiten valores en píxeles, porcentajes, etc.
5/5 - (1 voto)