Etiqueta H1 hasta H6 en HTML

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.

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.