Hola gente, que tal.
Ya son bastantes páginas web las que he desarrollado utilizando HTML5 y las nuevas etiquetas tan útiles que trae consigo. Pero claro, estas etiquetas ( refiriéndonos a la semánticas ) nos dejan total libertad acerca de como utilizarlas, por lo que quizás, en ocasiones no estemos utilizando correctamente todos los tags.
Sinceramente, cada vez que comienzo un nuevo proyecto me vuelven a atacar las mismas preguntas, vuelvo a irme a la documentación oficial, busco y rebusco en foros, ingleses, españoles y de la lengua que sea, para poder encontrar que opina cada diseñador y como utilizan los tags nuevos, como los anidan.
Entonces voy a lanzar una serie de cuestiones, que, podríamos intentar solucionar entre todos. Para realizar esto vamos a fijarnos en la documentación oficial de W3C acerca de HTML5, fijando siempre como base lo que explica la documentación sobre cada tag.
HTML5 y los TAGS semánticos
Primero y ante todo, para las personas que no sepan a que nos referimos con tags semánticos, vamos a dar una pequeña introducción:
- Un tag semántico es un tipo de tag( etiqueta, marca, etc ) introducida en la nueva versión de
HTML, HTML5. Este tipo de tags nuevos intenta solucionar algunos problemas respecto al uso de bloques DIV, añadiendo un extra para indicar a las spider de los buscadores, que es lo que contiene es bloque. Básicamente describen el contenido del bloque.Ahora vamos a fijarnos en las nuevas etiquetas de HTML5, semánticas:
- header
- nav
- section
- article
- aside
- figure
- figcaption
- footer
- details
- summary
- mark
- timePero vamos a fijarnos en las que sirven para crear la estructura de la página web: header, nav, section, article, aside y footer.
Bien, a simple vista, con estos nuevos tag vemos que se describe fácilmente una estructura de fichero HTML muy básico, tan básico, que en realidad nunca o casi en ninguna ocasión vamos a encontrarnos ante un proyecto de este tipo, si no que, necesitaremos anidar y anidar y anidar bloques de contenido, creando así un arquitectura de información mas profesional y usable.
Ahora, partiendo de un HTML, index.html normal:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Lanzo algunas preguntas :
- ¿ Como iniciaríais este documento HTML ?
- ¿ Como soléis anidar los bloques ?Supongamos que tenemos que recrear en HTML5 esta estructura:
Como podemos ver, el documento HTML se divide en cinco bloques cada uno, donde tenemos en el primer bloque y mas superior el header, donde podríamos encontrar, por ejemplo: el logo, acceso, buscador. Seguidamente abajo de este bloque nos encontramos con el menu principal, donde como es lógico se situará un menu, que puede tener links a otras secciones de la web, a un lector RSS, a twitter, cualquier cosa. Mas abajo vamos a colocar un slider bastante grandote y seguidamente el contenido relevante. Y para terminar el footer.
En primera instancia podríamos crear el documento HTML5 de esta forma:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section class="slider">
<section>
<section class="content">
<section>
<footer>
</footer>
</body>
</html>
Por orden natural, la estructura HTML5 sería formada de esta forma, pero, a mi me surgen varias dudas cuando te preguntas, el header no cubre toda la pantalla, es decir, el header va a ser un bloque de 1200px centrado y de fondo blanco, pero claro, para ello debería utilizar otro tag como padre para decir al navegador: ..oye, que este va centrado, pero tiene un padre que si se ajusta al body y ayuda a centrar el header real... Este problema se ve mejor en un bloque que tenga un color de fondo.
Imaginarios el bloque menu, este tiene un color negro, pero en realidad, el menu tiene 1200px de acho y está centrado, si no tuviese un padre, a los lados del menu se vería el fondo del body.
En este marco de trabajo, ya nos encontramos a donde quería llegar.
- ¿ De que forma anidaríais entonces el nav ?
- ¿ Sería correcto ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section class="menu-wrapper"> ><!-- Ocupa el 100% y es de color negro -->
<nav class="menu"> <!-- 1200px y con el color de fondo de su padre -->
</nav>
</section>
</html>
Desde mi punto de vista, me parece mas lógico crear el documento HTML5 así, pues estamos diciendo que es una sección, que tiene un nav dentro, y que este nav contiene directamente ya todos los links del menu principal.
Por el contrario:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<nav class="menu-wrapper"> ><!-- Ocupa el 100% y es de color negro -->
<div class="menu"> <!-- 1200px y con el color de fondo de su padre -->
</div>
</nav>
</html>
Semánticamente para mi no es nada correcto, por un lado, por que estamos creando un nav el cual el spider va a entrar y va a necesitar acceder al div para saber que hay. Realmente no se como se tomaría el spider esto, pero estoy seguro que naturalmente es bastante peor que la opción anterior a esta última.
Por el contrario, el de arriba, el spider entraría a una sección, sabe que va a encontrar información importante y por si fuese poco, se encuentra el nav e inmediatamente se encuentra con todos los links.
Como conclusión propia y quizás esté equivocado, abogo por diferenciar las estructuras con los tag sections y desde ahí ir creando lo que vaya surgiendo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<header>
</header>
</section>
<section>
<nav>
</nav>
</section>
<section>
<aside>
</aside>
</section>
<section>
<section>
</section>
<aside>
</aside>
</section>
....
</html>
Me he enrollado mucho, ¿ que opinan ustedes ?,¿ como lo trabajan ?
esperemos a los profesionales!! jaja
