Artículos
HTML5

Secciones en HTML5

23/Sep/2018

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:

De esta manera para definir una sección en HTML5 podremos escribir lo siguiente:

Primera Sección

Este es el contenido de la primera sección.

Cómo 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.

Código Fuente

Descárgate el código fuente de Secciones en HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios