La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones.
3.1.1. Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrando
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
</html>El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:
Figura 3.3 Ejemplo de texto HTML estructurado con párrafos
La siguiente tabla recoge la definición formal de la etiqueta <p>:
| Etiqueta | <p> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | - |
| Tipo de elemento | Bloque |
| Descripción | Delimita el contenido de un párrafo de texto |
Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura de la ventana del navegador. Además, no tienen atributos específicos, pero sí que se les pueden asignar los atributos comunes de HTML básicos, de internacionalización y de eventos.
3.1.2. Secciones
Las páginas HTML habituales suelen tener una estructura más compleja que la que se puede crear solamente mediante párrafos. De hecho, es habitual que las páginas se dividan en diferentes secciones jerárquicas.
Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.
Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.
A continuación se muestra la definición formal de la etiqueta <h1>, siendo idéntica la definición del resto de etiquetas referidas a los títulos de sección:
| Etiqueta | <h1> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | - |
| Tipo de elemento | Bloque |
| Descripción | Define los títulos de las secciones de mayor importancia de la página. |
Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no tienen atributos específicos.
Las etiquetas <h1>, ..., <h6> definen títulos de sección, no secciones completas. Por este motivo, no es necesario encerrar los contenidos de una sección con su etiqueta correspondiente. Solamente se debe encerrar con las etiquetas <h1>, ..., <h6> los títulos de cada sección.
El siguiente ejemplo muestra el uso de las etiquetas de título de sección:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido...</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido...</p>
</body>
</html>Los navegadores muestran el ejemplo anterior de la siguiente manera:
Figura 3.4 Ejemplo de texto HTML estructurado con párrafos y secciones
Los navegadores asignan de forma automáticamente el tamaño del título de cada sección en función de su importancia. Así, los títulos de sección <h1> se muestran con el tamaño de letra más grande, ya que son el nivel jerárquico superior, mientras que los títulos de sección <h6> se visualizan con un tamaño de letra muy pequeño, adecuado para el nivel jerárquico de menor importancia.
Evidentemente, el aspecto que los navegadores aplican por defecto a los títulos de sección se puede modificar utilizando las hojas de estilos de CSS. La siguiente imagen muestra el tamaño por defecto con el que los navegadores muestran cada titular:
Figura 3.5 Ejemplo de uso de las etiquetas h1, h2, h3, h4, h5 y h6