Bastante se ha hablado del nuevo estándar y las etiquetas semánticas. Al respecto tengo una consulta que es más una búsqueda de orientación y recomendaciones al respecto. Bastante se ha hablado de la estructura básica que sería algo así:
Código HTML :
<body> <header></header> <main> <section> <article></article> </section> </main> <aside></aside> <footer></footer> </body>
Pues bien, entendido eso, mi consulta tiene que ver en cómo jugar con la semántica y el diseño. Por ejemplo, si uso varias cajas div para posicionar los elementos y el contenido, ¿la etiqueta semántica debería ir en el primer nivel o en el más cercano al contenido? Me explico con dos ejemplos.
Ejemplo 1
Código HTML :
<footer> <div id='subir'> <img src='' alt=''> </div> <div id='footer'> <div id='links'> <ul><li></li></ul> </div> </div> </footer>
Ejemplo 2
Código HTML :
<div id='pie'> <div id='subir'> <img src='' alt=''> </div> <footer> <div id='links'> <ul><li></li></ul> </div> </footer> </div>
Como podrán apreciar, en el ejemplo 1 el footer encierra todo lo que va a ir en el pie, incluyendo todos los elementos que de cara a la semántica no tienen relevancia (como un botón subir). En cambio en el ejemplo 2 el footer incluye sólo la información que es relevante, dejando fuera todo lo demás.
Mi pregunta es cuál de las dos formas sería la mejor de cara a la semántica y a una correcta estructuración del contenido, el diseño y posicionamiento de los elementos. ¿O es irrelevante mi preocupación?
Espero sus comentarios, experiencias y sugerencias. De antemano muchas gracias.
