En HTML5, los títulos y subtítulos se definen utilizando las etiquetas <h1> hasta <h6>. Cada etiqueta representa un nivel de encabezado y se utiliza para identificar la importancia de un título o subtítulo dentro de un documento.

Es importante tener en cuenta que los navegadores y motores de búsqueda utilizan los títulos y subtítulos para comprender la estructura y el contenido de una página, por lo que es recomendable utilizarlos adecuadamente.

Tabla de contenidos

Toggle

• Etiqueta H1 en HTML
• Etiqueta H2 en HTML
• Etiqueta H3 en HTML
• Etiqueta H4 en HTML
• Etiqueta H5 en HTML
• Etiqueta H6 en HTML
• Atributos
  • Ejemplo
• Más ejemplos

Etiqueta H1 en HTML

<h1> es una etiqueta de encabezado en HTML5 que se utiliza para definir el título principal de una página web. Esta etiqueta es la más importante de todas las etiquetas de encabezado y debe ser utilizada para el título principal que describe el contenido general de la página.

Por ejemplo:

<h1>Bienvenido a mi sitio web</h1> Lenguaje del código: HTML, XML (xml)

Etiqueta H2 en HTML

<h2> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos secundarios debajo del título principal definido con la etiqueta <h1>.

Esta etiqueta es la segunda en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una página en secciones y subsecciones.

Por ejemplo:

<h1>Bienvenido a mi sitio web</h1> <h2>Sección 1</h2> <h2>Sección 2</h2> Lenguaje del código: HTML, XML (xml)

Etiqueta H3 en HTML

<h3> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos terciarios debajo de un subtítulo secundario definido con la etiqueta <h2>.

Esta etiqueta es la tercera en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una sección en subsecciones más específicas.

Por ejemplo:

<h1>Bienvenido a mi sitio web</h1> <h2>Sección 1</h2> <h3>Subsección 1</h3> <h3>Subsección 2</h3> <h2>Sección 2</h2> Lenguaje del código: HTML, XML (xml)

Etiqueta H4 en HTML

<h4> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos cuartarías debajo de un subtítulo terciario definido con la etiqueta <h3>.

Esta etiqueta es la cuarta en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una subsección en partes más específicas.

Por ejemplo:

<h1>Bienvenido a mi sitio web</h1> <h2>Sección 1</h2> <h3>Subsección 1</h3> <h4>Parte 1</h4> <h4>Parte 2</h4> <h3>Subsección 2</h3> <h2>Sección 2</h2> Lenguaje del código: HTML, XML (xml)

Etiqueta H5 en HTML

<h5> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos quintarías debajo de un subtítulo cuartaría definido con la etiqueta <h4>.

Esta etiqueta es la quinta en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una parte en sub partes más específicas.

Por ejemplo:

<h1>Bienvenido a mi sitio web</h1> <h2>Sección 1</h2> <h3>Subsección 1</h3> <h4>Parte 1</h4> <h5>Subparte 1</h5> <h5>Subparte 2</h5> <h4>Parte 2</h4> <h3>Subsección 2</h3> <h2>Sección 2</h2> Lenguaje del código: HTML, XML (xml)

Etiqueta H6 en HTML

<h6> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos sextarios debajo de un subtítulo quinario definido con la etiqueta <h5>.

Esta etiqueta es la sexta y última en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una sub parte en partes más específicas.

Por ejemplo:

<h1>Bienvenido a mi sitio web</h1> <h2>Sección 1</h2> <h3>Subsección 1</h3> <h4>Parte 1</h4> <h5>Subparte 1</h5> <h6>Detalle 1</h6> <h6>Detalle 2</h6> <h5>Subparte 2</h5> <h4>Parte 2</h4> <h3>Subsección 2</h3> <h2>Sección 2</h2> Lenguaje del código: HTML, XML (xml)

Atributos

Las etiquetas de encabezado <h1> a <h6> en HTML5 no tiene atributos específicos, ya que su propósito principal es definir la jerarquía y organización del contenido. Sin embargo, aquí están algunos de los atributos más comúnmente utilizados:

• id: Este atributo se utiliza para especificar un identificador único para un elemento, que se puede utilizar como destino para enlaces.

• class: Este atributo se utiliza para especificar una o más clases CSS que se aplicarán al elemento.

• style: Este atributo se utiliza para definir estilos inline CSS para el elemento.

• lang: Este atributo se utiliza para especificar el idioma de un elemento.

• title: Este atributo se utiliza para especificar un título o descripción adicional para un elemento.

• dir: Este atributo se utiliza para especificar la dirección del texto, ya sea de izquierda a derecha (ltr) o de derecha a izquierda (rtl).

Estos atributos se pueden aplicar a cualquiera de las etiquetas de encabezado <h1> a <h6>, según sea necesario.

Ejemplo

Aquí está un ejemplo completo que incluye las etiquetas de encabezado <h1> a <h6> con algunos de los atributos más comunes:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ejemplo de etiquetas de encabezado</title> <style> h1 { color: blue; text-align: center; } h2 { color: green; text-align: left; } h3 { color: red; text-align: right; } h4 { color: orange; text-align: center; } h5 { color: pink; text-align: left; } h6 { color: purple; text-align: right; } </style> </head> <body> <!-- Etiqueta h1 con atributos id y class --> <h1 id="titulo-principal" class="encabezado" style="font-size: 36px;">Bienvenido a mi sitio web</h1> <p>Este es un ejemplo de etiquetas de encabezado en HTML5 con algunos de los atributos más comunes.</p> <!-- Etiqueta h2 con atributos id y class --> <h2 id="seccion-1" class="subtitulo" style="font-size: 24px;">Sección 1</h2> <p>En esta sección se encuentra información sobre el primer tema.</p> <!-- Etiqueta h3 con atributos id y class --> <h3 id="subseccion-1" class="subtitulo-2" style="font-size: 18px;">Subsección 1</h3> <p>En esta subsección se encuentra información más detallada sobre el primer tema.</p> <!-- Etiqueta h4 con atributos id y class --> <h4 id="parte-1" class="subtitulo-3" style="font-size: 16px;">Parte 1</h4> <p>En esta parte se encuentra información adicional sobre el primer tema.</p> <!-- Etiqueta h5 con atributos id y class --> <h5 id="subparte-1" class="subtitulo-4" style="font-size: 14px;">Subparte 1</h5> <p>En esta subparte se encuentra información específica sobre el primer tema.</p> <!-- Etiqueta h6 con atributos id y class --> <h6 id="detalle-1" class="subtitulo-5" style="font-size: 12px;">Detalle 1</h6> <p>En este detalle se encuentra información detallada y concreta sobre el primer tema.</p> </body> </html> Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utilizan las etiquetas de encabezado <h1> a <h6> para estructurar el contenido de la página web. También se utilizan los atributos id, class y style para establecer identificadores únicos, clases para aplicar estilos CSS y estilos inline, respectivamente.

Tenga en cuenta que los atributos id y class son opcionales y pueden ser utilizados según las necesidades de la página web.

Más ejemplos

Aquí están dos ejemplos más avanzados que utilizan las etiquetas de encabezado <h1> a <h6> en HTML5:

Ejemplo 1:

<!DOCTYPE html> <html> <head> <title>Ejemplo de Encabezados</title> <style> h1 { color: blue; text-align: center; } h2 { color: green; text-decoration: underline; } h3 { color: red; font-style: italic; } h4 { color: purple; font-weight: bold; } h5 { color: yellow; text-transform: uppercase; } h6 { color: orange; font-size: 16px; } </style> </head> <body> <h1 id="main-title">Título Principal</h1> <p>Este es el primer nivel de encabezado, usado para el título principal de la página web.</p> <h2>Sección 1</h2> <p>Este es el segundo nivel de encabezado, usado para secciones importantes de la página web.</p> <h3>Subsección 1.1</h3> <p>Este es el tercer nivel de encabezado, usado para subsecciones de la sección anterior.</p> <h4>Subsección 1.1.1</h4> <p>Este es el cuarto nivel de encabezado, usado para subsecciones más detalladas de la sección anterior.</p> <h5>Detalle 1.1.1.1</h5> <p>Este es el quinto nivel de encabezado, usado para detalles específicos de la sección anterior.</p> <h6>Subdetalle 1.1.1.1.1</h6> <p>Este es el sexto y último nivel de encabezado, usado para subdetalles adicionales de la sección anterior.</p> </body> </html> Lenguaje del código: HTML, XML (xml)

Este ejemplo muestra cómo se pueden establecer estilos CSS para las etiquetas de encabezado <h1> a <h6> mediante la etiqueta <style> en el encabezado de la página web. Además, se utiliza un identificador id en la etiqueta <h1> para establecer un enlace directo a esa sección de la página web.

Ejemplo 2:

<!DOCTYPE html> <html> <head> <title>Ejemplo de Encabezados Avanzado</title> <style> h1 { background-color: blue; color: white; padding: 10px; text-align: center; } h2 { background-color: green; color: white; padding: 8px; text-align: left; border-radius: 10px; } h3 { background-color: red; color: white; padding: 6px; text-align: right; border-radius: 10px; } h4 { background-color: purple; color: white; padding: 4px; text-align: center; border-radius: 10px; } h5 { background-color: yellow; color: black; padding: 2px; text-align: left; border-radius: 10px; } h6 { background-color: orange; color: black; padding: 1px; text-align: right; border-radius: 10px; } </style> </head> <body> <h1 id="main-title">Título Principal con Fondo de Color</h1> <p>Este es un ejemplo avanzado que muestra cómo se pueden establecer colores de fondo y estilos de alineación para las etiquetas de encabezado `<h1>` a `<h6>`.</p> <h2>Sección 1 con Bordes Redondos</h2> <p>Este ejemplo también muestra cómo se pueden agregar bordes redondos a las etiquetas de encabezado mediante la propiedad `border-radius` de CSS.</p> <h3>Subsección 1.1 con Alineación a la Derecha</h3> <p>Además, se pueden establecer diferentes estilos de alineación para cada nivel de encabezado, como se muestra en este ejemplo con la propiedad `text-align` de CSS.</p> <h4>Subsección 1.1.1 con Alineación Centrada</h4> <h5>Detalle 1.1.1.1 con Alineación a la Izquierda</h5> <h6>Subdetalle 1.1.1.1.1 con Alineación a la Derecha</h6> </body> </html> Lenguaje del código: HTML, XML (xml)

En este ejemplo se utiliza encabezados de nivel 1 a nivel 6 para crear una estructura de contenido con diferentes estilos visuales. El código incluye una sección de cabecera (<head>) que contiene un título para la página y una sección de estilo (<style>) que define los estilos para cada encabezado.

Los estilos incluyen el color de fondo, el color del texto, la alineación y el tamaño de la padding (espacio alrededor del texto) para cada encabezado. También se agrega un borde redondo a los encabezados de nivel 2 a nivel 5 usando la propiedad border-radius.

En la sección de contenido (<body>), se utiliza la etiqueta <h1> para el título principal con un ID específico (“main-title”) que se puede usar para establecer estilos adicionales. Luego, se utilizan las etiquetas <h2>, <h3>, <h4>, <h5> y <h6> para las secciones y subsecciones del contenido, con diferentes estilos de alineación y bordes redondos según corresponda.