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.
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>Título principal del curso HTML en tupacbruch.com</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 es el propio navegador quién se encarga
de ajustar su longitud al tamaño de la ventana.
</p>
<p>Ahora tenemos el segundo párrafo, el cual puede ser definido también cómo "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:
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.
Secciones y etiquetas h
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 común 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, solo 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 usa para delimitar las secciones menos importantes de la página.
Para más información funcional, te recomiendo visitar este post que habla sobre las etiquetas h.
Etiqueta H1
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. Sí de SEO hablamos, únicamente puede haber una etiqueta H1 por documento HTML.
Otras etiquetas h
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.
Sin embargo, las etiquetas <h2> y <h3>, si tienen una importancia en el posicionamiento web. Pero, las <h4>, <h5>, y <h6> no tienen incidencia en los motores de búsqueda, sino, que simplemente ayudan a la comprensión semántica.
<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:
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.
<html>
<head>
<title>HTML tupacbruch.com</title>
</head>
<body>
<h1>Título principal h1</h1>
<h2>Ejemplo de título h2</h2>
<h3>Ejemplo de título h3</h3>
<h4>Ejemplo de título h4</h4>
<h5>Ejemplo de título h5</h5>
<h6>Ejemplo de título h6</h6>
</body>
</html>La siguiente imagen muestra el tamaño por defecto con el que los navegadores muestran cada titular:
