Párrafos y saltos de línea

Para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento. Podemos también usar la etiqueta <br> , de la cual no existe su cierre correspondiente ( </br> ), para realizar un simple retorno de carro, con lo que no dejamos una línea en blanco sino que solo cambiamos de línea.

Existen otras etiquetas que, como <img> para las imágenes, no tienen su correspondiente cierre. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más adelante, sino que sólo tienen presencia en un lugar puntual.

Podemos comprobar que cambiar de línea en un documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de línea en la página visualizada. En realidad el navegador introducirá el texto y no cambiará de línea a no ser que esta llegue a su fin, o bien lo especifiquemos con la etiqueta correspondiente.

Los párrafos delimitados por etiquetas <P> pueden ser fácilmente justificados a la izquierda, centro o derecha, especificando dicha justificación en el interior de la etiqueta por medio de un atributo align, que es un parámetro incluido en el interior de la etiqueta y que ayuda a definir el funcionamiento de la etiqueta de una forma más personal. 

Así, si deseamos introducir un texto alineado a la izquierda escribimos:

<p align="left">Texto alineado a la izquierda</p>

Y el resultado sería:

Texto alineado a la izquierda

Para justificar al centro escribimos:

<p align="center">Texto alineado al centro</p>

Obteniendo como resultado:

Texto alineado al centro

Y para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>

Que nos dará como resultado:

Texto alineado a la derecha

Como podemos observar, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

Los atributos tienen sus valores indicados entre comillas; pero si no los indicamos entre comillas también funcionará, en la mayoría de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros códigos y para evitar errores futuros en sistemas más complicados.

El atributo align no es exclusivo de la etiqueta <p> . Otras etiquetas muy comunes suelen hacer uso de este atributo de una forma habitual.

Por ejemplo, en un texto relativamente largo, en donde todos los párrafos están alineados a la izquierda, una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align, sobre cada una de las etiquetas es utilizando la etiqueta <div>. Esta etiqueta por sí sola no funciona. Tiene que estar acompañada del atributo align y así nos permite alinear cualquier elemento, párrafo o imagen, de la manera que nosotros deseemos (izquierda, centro, derecha o justificar).

Po rjemplo, el código:

<p align="left">Parrafo1</p>
<p align="left">Parrafo2</p>
<p align="left">Parrafo3</p>

es equivalente a:

<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>

que nos alinea los tres párrafos a la izquierda, así:

Parrafo1

Parrafo2

Parrafo3

La conclusión es que la etiquetala <div>, con su correspondiente cierre </div>, marca divisiones en las que definimos un mismo tipo de alineado.

Encabezados

Existen otras etiquetas para definir párrafos especiales, formateados como títulos. Son los encabezados (Header en inglés). Son etiquetas que formatean el texto como un titular, para lo cual asignan un tamaño mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamaño de la letra que utilizan. La etiqueta en concreto es la <h1> , para los encabezados más grandes, <h2> para los de segundo nivel y así hasta<h6> que es el encabezado más pequeño. Estos encabezados implican también una separación en párrafos, así que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocará en un párrafo independiente.

A continuación algunos ejemplos d encabezados:

<h1>Encabezado de nivel 1</h1>

que se verá así:

Encabezado de nivel 1

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 3 alineado al centro.

<h3 align="center">Encabezado de nivel 3</h3>

Que se verá de esta manera en la página:

Encabezado de nivel 3

Nota

No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra más grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos en seguida). Los encabezados son para colocar titulares en páginas web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.

Tamaño

Para formatear el texto cambiando al tamaño de la fuente debemos utilizar las etiquetas <big> y<small>, así:

Para aumentar el tamaño de la fuente:

<big>aumentar el tamaño de la fuente</big>

que se verá así:

aumentar el tamaño de la fuente

Anidando estas etiquetas, el efecto se va acumulado ya que toma como referencia el tamaño del texto anterior:

    texto normal
    <big>
        texto grande
        <big>
            aún más grande
            <big>
                mucho más grande
            </big>
        </big>
    </big>

Éste es el resultado:

texto normal texto grande aún más grande mucho más grande

En una escala así ponemos el texto en el tamaño que deseemos, ejemplo:

Para asignar, por ejemplo, el tamaño mucho más grande, anidamos las etiquetas así:

    <big>
        
        <big>
            
            <big>
                mucho más grande
            </big>
        </big>
    </big>

obteniendo el siguiente resultado:

mucho más grande

Para disminuír el tamaño de la fuente:

<small>disminuír  el tamaño de la fuente</small>

que se verá así:

disminuír el tamaño de la fuente

Anidando estas etiquetas, el efecto se va acumulado ya que toma como referencia el tamaño del texto anterior:

    texto normal
    <small>
        texto pequeño
        <small>
            aún más pequeño
            <small>
                mucho más pequeño
            </small>
        </small>
    </small>

Éste es el resultado:

texto normal texto pequeño aún más pequeño mucho más pequeño

En una escala así ponemos el texto en el tamaño que deseemos, ejemplo:

Para asignar el tamaño mucho más pequeño, anidamos las etiquetas así:

    
    <small>
        
        <small>
          
            <small>
                mucho más pequeño
            </small>
        </small>
    </small>

Obteniendo el siguiente resultado:

mucho más pequeño