<h1> - <h6> en HTML5Las etiquetas <h1> a <h6> en HTML5 son elementos de encabezado que se utilizan para definir títulos o subtítulos dentro del contenido de una página web. Estas etiquetas ayudan a estructurar el contenido jerárquicamente, mejorando tanto la semántica de la página como su accesibilidad.
<h1>: Representa el nivel más alto de encabezado. Normalmente, se utiliza para el título principal de la página.<h2>: Representa el segundo nivel más alto de encabezado. Se usa para secciones principales dentro del contenido.<h3>: Nivel tres, se utiliza para subsecciones de <h2>.<h4>: Nivel cuatro, que detalla aún más las subsecciones de <h3>.<h5>: Nivel cinco, detalla aún más las subsecciones de <h4>.<h6>: Representa el nivel más bajo de encabezado.Aunque las etiquetas de encabezado tienen el mismo conjunto de atributos globales que la mayoría de los elementos HTML, no tienen atributos específicos adicionales. Los atributos globales permiten mayor control y flexibilidad en la forma de los encabezados:
class: Para asignar una clase o clases CSS al encabezado.id: Para asignar un identificador único que puede ser utilizado en anclas y estilos CSS.style: Para incluir estilos CSS en línea.title: Para proporcionar información adicional sobre el elemento, que generalmente se muestra como una herramienta de información.accesskey: Un atajo de teclado para enfocar el elemento.contenteditable: Indica si el contenido del elemento es editable.dir: Define la direccionalidad del texto.draggable: Especifica si el elemento es arrastrable.hidden: Oculta el elemento sin eliminarlo del DOM.lang: Establece el idioma del contenido.spellcheck: Indica si el elemento debe tener una verificación ortográfica.tabindex: Establece el orden del enfoque del teclado.<h1> - <h6> en HTML5 con ejemplos sencillos<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Encabezados</title>
</head>
<body>
<h1>Encabezado de Nivel 1</h1>
<p>Este es el párrafo siguiente al encabezado de nivel 1.</p>
<h2>Encabezado de Nivel 2</h2>
<p>Este es el párrafo siguiente al encabezado de nivel 2.</p>
<h3>Encabezado de Nivel 3</h3>
<p>Este es el párrafo siguiente al encabezado de nivel 3.</p>
<h4>Encabezado de Nivel 4</h4>
<p>Este es el párrafo siguiente al encabezado de nivel 4.</p>
<h5>Encabezado de Nivel 5</h5>
<p>Este es el párrafo siguiente al encabezado de nivel 5.</p>
<h6>Encabezado de Nivel 6</h6>
<p>Este es el párrafo siguiente al encabezado de nivel 6.</p>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Encabezados con Atributos</title>
<style>
.importante { color: red; }
</style>
</head>
<body>
<h1 id="principal" class="importante" title="Este es el encabezado principal">Encabezado de Nivel 1</h1>
<p>Esto es un párrafo que sigue al encabezado principal.</p>
<h2 id="seccion1">Sección 1</h2>
<p>Esto es el contenido de la primera sección.</p>
<h3 class="importante">Subsección Importante</h3>
<p>Este es el párrafo dentro de una subsección importante.</p>
<h4 style="font-weight: bold;">Subsección Detallada</h4>
<p>Este párrafo se encuentra dentro de una sección detallada.</p>
</body>
</html>En resumen, los elementos <h1> a <h6> son fundamentales para la estructura de un documento HTML, permitiendo crear una jerarquía clara y accesible de encabezados. Se pueden emplear con diversos atributos globales para personalizar aún más su comportamiento y presentación.