Etiquetas de titulares
Las etiquetas de titulares o cabeceras sirven para enfatizar el texto que va a actuar como un título de algun elemento de la pagina: una sección, toda la página, un apartado, un bloque.. .
Un ejemplo sencillo: un libro de texto. Cada capítulo suele tener un título en letras grandes y muy llamativas, luego puede llevar un subtítulo con letras algo más pequeñas, a continuación van los apartados del tema cuyo título es menos impactante que el título del capítulo, luego dentro de cada apartado pueden aparecer subapartados con un título algo menos impactante, pero resaltado respecto al texto del capítulo. Pues cada estilo usado para esos títulos es lo que se llaman etiquetas de cabecera o titulares (headings) en HTML.
Existen 6 niveles, de mayor a menor importancia: <h1>
hasta <h6>. Los efectos los puedes ver en estas lineas que siguen
Esto sería titular en estilo H1
Esto sería titular en estilo H2
Esto sería titular en estilo H3
Esto sería titular en estilo H4
Esto sería titular en estilo H5
Esto sería titular en estilo H6
Estas etiquetas tienen apertura y cierra de la forma <h1>texto</h2>. Pueden modificarse mediante CSS. No conviene abusar de estas etiquetas, se deben usar de forma razonable.
Por ejemplo: una página web solo tiene un título, por tanto basta con una sola etiqueta h1. Tendrá más utilidad cuando aparezcas en un lista de un buscador. Luegos las secciones de la página podrían tener titulos en h2, estos ya si pueden repetirse.
Puedes tener varias etiquetas h1 en la página, pero siempre para titulos raiz de algún bloque independiente dentro del documento. Puedes usar h1 para el título de article, que es un contenido que no pierde sus entido si se lee independiente de la página.
¿Y en las section? En principio también las section podrían tener titulos de nivel 1, pero habitualmente son elementos hijos de un elemento principal superio, no por flujo si no por semántica, en esos casos normalmente tiene más sentido utilizar niveles por encima del 1 para sus cabeceras.
Mir este video de Google sobre las etiquetas h1 en la página web. Se deduce claramente que debes ponerte en la piel del usuario para presentar tu página y usar las etiquetas H1 según sea necesario para él.
Por último tener en cuenta que se comportan como un elemento de párrafo, es decir que añaden un espacio en blanco por delante y por detrás. Y, como ocurre con los párrafos, no se deben anidar unas dentro de otras.
Coge tu página de ejemplo01a.htm y modifícala con estos nuevos estilos. te deberá quedar algo como esto
<body>
<header>
<h1>Zona para tus libros</h1>
</header>
..........
<header>
<h2>Presentación</h2>
</header>
..........
<h3>El libro electrónico. </h3>
..........
<h3>El libro en papel.</h3>
..........
<footer>
<h5>Copyleft 2014</h5>
</footer>
Solo está señalado el texto que debes modificar en el ejemlo01a.htm y tendrás algo con esta apariencia ejercicio01b.htm. Como ves cada titular tiene un aspecto distinto en función del nivel o importancia dentro de la página. De todas maneras ese formato puede cambiarse con etiquetas de estilo, incluso podrías tener etiquetas h3 de mayor tamañoy más destacadas que las h1, por ejemplo.