Comunidad de diseño web y desarrollo en internet online

Recomendaciones para una correcta maquetación semántica HTML5

Citar            
MensajeEscrito el 17 Abr 2015 12:00 am
Saludos amigos de la comunidad.

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.

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 17 Abr 2015 12:04 pm
La pregunta que debes responderte es: Desde el punto de vista del diseño o de lo que el visitante ve, <div id="pie"> ¿hace al footer de la página o no lo hace?. Si lo hace, entonces lo primero, sino, pues lo segundo.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 17 Abr 2015 06:07 pm
Interesante forma de verlo... Creo que en ese sentido, si por ejemplo le pongo un color de fondo al footer, dentro del cual estaría todo lo demás, entonces me decantaría por la primera opción, teniendo en cuenta que eso es lo que vería el visitante.

Por eareddhel

83 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 20 Abr 2015 12:08 pm
Los tags semánticos sirven para que una máquina entienda la página como la entendería un humano. Así que si un humano ve esa zona de color distinta al pie de página asume que ese es el pide de página... y tiene razón yo también lo veo así jajaja! :D

Por DriverOp

Claber

2510 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.