Puede ser que cuando estés dando forma a la estructura semántica a tu documento HTML5 te vuelvas loco con la organización de las secciones entre los elementos section y article combinados con los títulos de cabecera h1 a h6. Es por ello que tienes que conocer cómo funcionan las subsecciones implícitas en HTML5.
Y es que manejando el outline de un documento HTML5 tenemos que saber que no solo los elementos section generan una sección, si no que los elementos de cabecera h1 a h6 también generan secciones.
Pero vayamos paso a paso. Lo primero será crear una semántica básica. En la cual encontremos dos secciones en un documento HTML5.
Primera Sección
Este es el contenido de la primera sección.
Segunda Sección.
Este es el contenido de la segunda sección.
Vemos claramente que las secciones están delimitadas mediante el elemento section y a su vez el título de la sección lo demarca el elemento h2.
¿Qué sucede si insertamos un nuevo elemento de cabecera dentro de la sección? Pues que lo que estamos haciendo es crear subsecciones implícitas en HTML5. Esto sucede por mantener la compatibilidad con HTML 4.01 en el cual las secciones podían estar demarcadas por elementos de cabecera h1 a h6.
De esta manera si tenemos el siguiente código:
Artículo principal
Texto del artículo principal.
Subsección
Contenido secundario del artículo principal
Podemos comprobar que el elemento section demarca la primera sección con el título especificado en el título de cabecera h2. Pero acto seguido tenemos el elemento h3 el cual, por si solo, define una nueva sección.
Esto lo podemos validar mediante el validador de W3C el cual nos muestra el outline del documento HTML55.
Así que ya sabes que cuando manejes documentos HTML deberás de tener mucho cuidado a la hora de definir subsecciones implícitas en HTML5.
