En este tutorial, vamos a explorar los elementos HTML más comunes para crear encabezados. Los encabezados son un elemento fundamental en la estructura de un documento HTML, debido a que permiten definir una jerarquía a los títulos y subtítulos de un sitio web.
Hay seis elementos HTML dedicados a la creación de encabezados:
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
Elemento h1
El elemento <h1> es el título principal del documento y se utiliza para definir el título más importante de una página web. Es el título que se muestra en la cabecera de la página y es el título que se ve mejor en los motores de búsqueda.
Para escribir un elemento <h1>, debes utilizar el siguiente formato:
<h1>Título principal del documento</h1>El elemento <h1> se puede utilizar de varias maneras:
- Título principal: Utilizarlo como título principal de la página, es decir, como el título que se muestra en la cabecera de la página.
- Título de sección: Utilizarlo para definir el título de una sección específica de la página, como un subtítulo principal.
- Título de artículo: Utilizarlo para definir el título de un artículo o post en un blog o sitio web.
La cantidad de h1 que pueden haber en una página varía dependiendo del propósito y estructura de la página. En general, se pueden utilizar varios h1 en una página, siempre y cuando sean utilizados de manera razonable y coherente. Algunos ejemplos son:
- Un sitio web con varias secciones principales, cada una con su propio h1.
- Un blog con varios artículos o posts, cada uno con su propio h1.
- Una página con varias secciones de contenido, cada una con su propio h1.
En general, es importante recordar que el objetivo del elemento <h1> es definir el título principal y más importante de la página, por lo que es recomendable utilizarlo con moderación y coherencia.
Aquí tienes un ejemplo de cómo utilizar varios h1 en una página:
<h1>Mi sitio web</h1>
<section id="seccion-uno">
<h1>Sección uno</h1>
<p>Contenido de la sección uno.</p>
</section>
<section id="seccion-dos">
<h1>Sección dos</h1>
<p>Contenido de la sección dos.</p>
</section>
<article id="articulo-uno">
<h1>Artículo uno</h1>
<p>Contenido del artículo uno.</p>
</article>
En este ejemplo, hay tres h1 utilizados: uno para el título principal del sitio web, uno para cada sección y otro para cada artículo.
Elemento h2
El elemento <h2> se utiliza para crear un subtítulo, que se muestra debajo del título principal.
<h1>Título principal del documento</h1>
<h2>Subtítulo</h2>El uso del elemento <h2> tiene varias ventajas:
- Ayuda a estructurar el contenido de la página y a crear un flujo lógico.
- Proporciona subtítulos claros y concisos que ayudan a los usuarios a entender mejor el contenido.
- Permite enfatizar los títulos y subtítulos más importantes en la página.
- Ayuda a mejorar la accesibilidad, ya que los navegadores pueden utilizar los títulos y subtítulos para proporcionar una experiencia de usuario más fluida.
A continuación, un ejemplo de cómo utilizar el elemento <h2> para crear subtítulos y estructurar el contenido de una página:
<h1>Mi sitio web</h1>
<section id="seccion-introduccion">
<h2>Introducción</h2>
<p>La introducción es una sección importante en cualquier página web, ya que es donde presentamos el tema principal y damos contexto al contenido que sigue.</p>
</section>
<section id="seccion-features">
<h2>Características clave</h2>
<ul>
<li>Característica 1</li>
<li>Característica 2</li>
<li>Característica 3</li>
</ul>
</section>
<section id="seccion-call-to-action">
<h2>Acción a tomar</h2>
<p>¿Qué acción debemos tomar a continuación? ¡Haga clic en el botón para obtener más información!</p>
</section>Elemento h3
El elemento h3 representa un encabezado de nivel 3. Estos elementos se utilizan para dar estructura y jerarquía a un contenido, en combinación con otros elementos como <h1> y <h2> para crear una jerarquía de títulos.
Para escribir un elemento <h3>, debes utilizar el siguiente formato:
<h1>Título principal del documento</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>- Los elementos <h3> deben ser utilizados en combinación con otros elementos como <h1> y <h2> para crear una jerarquía de títulos.
- Es importante utilizar los elementos <h3> en consecuencia con la jerarquía de títulos que deseas crear en tu página web.
- Los elementos <h3> pueden ser utilizados en diferentes contextos, como títulos de secciones, subtítulos o incluso como títulos de artículos.
Elementos h4, h5 y h6
Estos elementos se utilizan para destacar títulos y subtítulos en un texto, lo que ayuda a organizar y estructurar el contenido de una página web.
Uso de la etiqueta h4
La etiqueta h4 se utiliza para definir un título de nivel 4, es decir, un título importante pero no tan importante como los títulos de nivel 1 (h1) o nivel 2 (h2). Los títulos de nivel 4 suelen ser utilizados para sub-subtítulos o para dividir el contenido en secciones más pequeñas. Ejemplo:
<h4>Título de nivel 4</h4>Uso de la etiqueta h5
Se utiliza para definir un título de nivel 5, es decir, un título que es ligeramente menos importante que los títulos de nivel 4 (h4). Los títulos de nivel 5 suelen ser utilizados para subtítulos secundarios o para definir subtítulos dentro de secciones más grandes. Ejemplo:
<h5>Subtítulo del título de nivel 4</h5>Uso de la etiqueta h6
Se utiliza para definir un título de nivel 6, es decir, un título que es el más pequeño de todos. Los títulos de nivel 6 suelen ser utilizados para subtítulos muy pequeños o para definir subtítulos dentro de subtítulos. Ejemplo:
<h6>Sub-subtítulo del subtítulo del título de nivel 4</h6>
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024
