Representa un grupo etiquetas de encabezado
que definen el título de la sección a la que pertenece. Permite asociar títulos
secundarios, como subencabezados, títulos alternativos, e incluso lemas, con el
encabezado principal, sin contaminar la estructura del documento.
En anteriores versiones de HTML teníamos
que usar el elemento div para definir nuevas secciones creando documentos no
tan lineales generando problemas especialmente para los software especializados
en ayudar a personas discapacitadas. HTML5 introduce nuevos elementos para el
seccionamiento automático de nuestro documento. A su vez introduce el elemento <hgroup> que esconde todos los
elementos de encabezado dentro de él bajo una misma entrada del esquema
formando tan solo una sección
(<hgroup><h1>Título</h1><h2>Subtítulo</h2></hgroup).
En versiones anteriores de HTML se podía
tener sólo una etiqueta H1 en nuestro documento, pero HTML5 permite el uso de un H1 para cada una de las
etiquetas semánticas básicas. El problema es que aunque nuestra página no sólo se
hace para los navegadores, sino que también nos interesa que los motores de
búsqueda lo indexen bien, Google sigue recomendando que se utilice un sólo H1
indicando que en el caso de que se encuentren varios H1 dentro de una misma
página, éstos pasarán a ser interpretados como párrafos (p) perdiendo así todo
su significado de posicionamiento.
En términos más generales HTML5 aporta
precisión a las características de seccionamiento y encabezado, lo que permite
crear esquemas de documentos más predecibles y que pueden ser utilizados por el
navegador más fácilmente para mejorar la experiencia del usuario.
Propiedades de página. 5 Parte (Encabezados)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Encabezados</title>
<style type="text/css">
h1 {font-size: 16px;color: #F00;}
h2 {font-size: 16px;color: #F00;}
h3 {font-size: 16px;color: #F00;}
h4 {font-size: 16px;color: #F00;}
h5 {font-size: 16px;color: #F00;}
h6 {font-size: 16px;color: #F00;}
body,td,th {
font-size: 36px;
}
</style>
</head>
<body>
<h1>TITULO 1</h1>
<h2>TITULO 2</h2>
<h3>TITULO 3</h3>
<h4>TITULO 4</h4>
<h5>TITULO 5</h5>
<h6>TITULO 6</h6>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Encabezados</title>
<style type="text/css">
h1 {font-size: 16px;color: #F00;}
h2 {font-size: 16px;color: #F00;}
h3 {font-size: 16px;color: #F00;}
h4 {font-size: 16px;color: #F00;}
h5 {font-size: 16px;color: #F00;}
h6 {font-size: 16px;color: #F00;}
body,td,th {
font-size: 36px;
}
</style>
</head>
<body>
<h1>TITULO 1</h1>
<h2>TITULO 2</h2>
<h3>TITULO 3</h3>
<h4>TITULO 4</h4>
<h5>TITULO 5</h5>
<h6>TITULO 6</h6>
</body>
</html>
