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.