Tutorial HTML: Encabezados (h1-h6)

Los encabezados en HTML son elementos utilizados para definir los títulos y subtítulos de una página web. A estos se les asignan etiquetas desde <h1> hasta <h6>, donde <h1> define el título más importante (o principal) y <h6> el menos importante.

Esta jerarquía de encabezados sirve para dos propósitos fundamentales: en primer lugar, proporciona a los usuarios una manera de entender rápidamente la estructura del contenido de la página; y en segundo lugar, ayuda a los motores de búsqueda a entender qué partes del contenido son más relevantes.

A continuación, se proporciona una descripción detallada de cada encabezado en HTML.

1. <h1>: Este es el encabezado de nivel más alto y se utiliza para el título principal de la página web. Debería existir sólo un <h1> por página, que normalmente corresponde al título del contenido principal. Por ejemplo, en una página de blog, el título del artículo sería un buen candidato para el <h1>.

2. <h2>: Los encabezados <h2> son subencabezados del <h1> y se utilizan para separar las diferentes secciones del contenido principal. En una página de blog, por ejemplo, cada sección o subtema del artículo podría ser un <h2>.

3. <h3>: Los encabezados <h3> son subencabezados de <h2>. Se utilizan para separar aún más el contenido dentro de una sección <h2>.

4. <h4>, <h5>, <h6>: Estos encabezados se utilizan para secciones aún más específicas del contenido, y su uso puede variar según el diseño y la estructura de la página.

Es importante tener en cuenta que la elección del encabezado no debe basarse en el estilo visual, ya que el tamaño y la apariencia de estos pueden modificarse con CSS. En su lugar, deben elegirse basándose en la relevancia y estructura del contenido.

Dicho esto, la sintaxis general para utilizar encabezados en HTML es la siguiente:

<h1>Título principal de la página</h1>
<h2>Subtítulo de la sección</h2>
<h3>Subtítulo de la subsección</h3>
<!-- y así sucesivamente... -->

Ahora, para representar el mismo ejemplo en formato Markdown, se utilizarían caracteres de almohadilla (#) en lugar de las etiquetas <h1> a <h6>:

# Título principal de la página
## Subtítulo de la sección
### Subtítulo de la subsección
<!-- y así sucesivamente... -->

En resumen, los encabezados en HTML son fundamentales para definir la estructura del contenido de una página web, mejorar la accesibilidad y ayudar a los motores de búsqueda a comprender la relevancia del contenido. Al utilizar correctamente la jerarquía de encabezados, se puede mejorar tanto la experiencia del usuario como la visibilidad de la página en los motores de búsqueda.