Una de los problemas que tenía HTML 4.01 era la carencia semántica dentro de sus elementos. Solo contábamos con elementos como div para poder crear una estructura de elementos y mediante clases CSS definíamos una semántica. Esto, por otro lado, era bastante confuso ya que si el CSS es para darle estilo y HTML para dar la estructura y semántica, por qué lo hacíamos al revés. Es por ello que en HTML5 se hace una revisión de los elementos y aparecen algunos elementos semánticos como article, section o nav. En un conjunto de artículos iremos revisando cómo podemos utilizarlos.
Para definir secciones en HTML5 tenemos el elemento section. Este elemento de bloque nos permite definir secciones con contenido dentro de nuestro documento. Por lo cual podremos tener tantas secciones dentro de nuestro documento como queramos o necesitemos.
La estructura del elemento section sería la siguiente:
<section><!-- Contenido de la sección --></section>
De esta manera para definir una sección en HTML5 podremos escribir lo siguiente:
<section> <h1>Primera Sección</h1> <p>Este es el contenido de la primera sección.</p> </section>
Como vemos, la sección en HTML5 empieza por un elemento de cabecera h1 el cual marcará el título de dicha sección. Hay que saber que los elementos de cabecera h1 a h6 marcan por si solo secciones dentro del documento HTML. Esto sucede para mantener compatibilidad con los documentos HTML 4.01.
Para poder analizar la semántica de nuestro documento y ver que secciones en HTML5 existen tenemos que analizar su outline. Para poder ver analizar el outline de nuestro documento podemos utilizar el validador de W3C.
