Duda sobre estructurar web en HTML5

[KLAYMAN]

Hola a todos y antes de nada gracias por leer este mensaje.

Estaba desarrollando una web en HTML 4, pero he decidido ir probando HTML5 para ir acostumbrandome a lo que se nos viene encima.

El caso es que me han surgido unas cuentas dudas a las que no encuentro respuesta.

Supongamos que mi web, estructurada con una cabecera, dos columnas para el contenido principal y un pie de pagina, en HTML 4 es así:

Código HTML:

<div id="contenedor">
   <div id="cabecera">
    Cabecera
   </div>
  
<div id="cuerpo">
   <div id="principal">
   Contenido principal
   ......
   </div>
   
   <div id="lateral">
    Contenido Lateral derecho
   </div>
</div>
  
<div id="pie">
 Pie de pagina.
</div>

</div> 

En HTML5, hasta ahora tengo realizado esto:

Código HTML:

<div id="container">
   <header>
   Cabecera 
   </header>

<div id="cuerpo">
    <div id="post">
    Contenido principal
    ......
    </div>
 
  <aside>
  Contenido Lateral derecho
  </aside>
</div>
  
  <footer>
  Pie de pagina.
  </footer>

</div> 

Bien, mis dudas son básicamente:

1) ¿hay alguna etiqueta nueva definida para el contenedor principal que engloba toda la web? En mi caso <div id="container">

2) ¿hay alguna etiqueta que sustituya al "cuerpo" de la web?. En mi caso <div id="cuerpo">

3)¿El <div id="post"> de mi código podría ser una etiqueta <section>?

Creo que no se me olvida preguntar nada más.

Muchas gracias por anticipado y un cordial saludo.

[ryugen]

1) No, principalmente porque el uso que reciben esta clases de etiquetas es para maquetar y semánticamente hablando no poseen significado. Entonces está bien que permanezca en un div. Además porque la etiqueta que engloba todo el contenido de una página es "body".

2) No hay una etiqueta semantica para eso. Pero puedes complementar el marcado con WAI-ARIA. Marcando a tu cuerpo con el rol principal ( role="main"). Puedes encontrar un poco de documentación acá: http://www.w3.org/TR/wai-aria/roles#main . De esta manera las personas que requieran de una web accesible te estarán agradecidos. El objetivo de este rol/atributo, es establecer una parte del contenido del documento como el contenido principal del mismo.

3) Si cada uno de tus post trata tema independientes y que conforman una unidad temática en si mismo (pueden todos relacionarse al tema del blog), de manera de que aisladamente puedan comprederse, tu "post" debería ser "article" más que "section". Sin embargo si todos tus post tratan una unica temática y dependen uno de otros sería mas semantico el uso de "section", por ejemplo en un documento que represente el contenido de un libro o similar estructura.

Espero haberte podido aclarar algo. Cualquier cosa no dudes en preguntar.

[KLAYMAN]

ryugen eres un crack

Así da gusto preguntar con gente que ayuda y lo explica todo perfectamente.

He estado revisando webs que usan HTML5 y mirando el código fuente he visto que más o menos mi estructura web debería quedar así:

Código HTML:

<div id="container">
  <header>
  Cabecera
  </header>
  <div id="main">
       <section id="main">
	   <article>
           Contenido Artículo
           ......
	   </article>
           <article>
           Contenido Artículo
           ......
           </article>
       </section>

        
       <aside>
       Contenido Lateral derecho
       </aside>
  </div>
    
  <footer>
  Pie de pagina.
  © Copyright 2012
  </footer>
</div> 

Creo que de momento lo voy a dejar así, porque mis artículos tienen todos relación unos con otros, así que los añado a una sección y listo.

Te debo una y te dejo karma por la ayuda me has ofrecido.

Un saludo ;)

[bender3001]

Quedó muy bien, lo que te faltaría es agragar el role="main" como te comentaron anteriormente

[KLAYMAN]

Perfecto bender3001, lo miro en seguida que se me pasó totalmente eso que comentas.

Un saludo, gracias y te dejo karma por el recordatorio.

[miktrv]

Te iba a comentar el tema de poner la etiqueta <header> pero veo que ya la tienes colocada, además veo que tienes dos id con el valor "main"... esto es correcto? el id es único porque identifica a un único elemento, correcto?

Un saludo!

[KLAYMAN]

Iniciado por miktrv

Te iba a comentar el tema de poner la etiqueta <header> pero veo que ya la tienes colocada, además veo que tienes dos id con el valor "main"... esto es correcto? el id es único porque identifica a un único elemento, correcto?

Un saludo!

Pues me da que tienes razón. No se si es correcto el uso de dos etiquetas distintas con el mismo valor id.

Tendré que revisar si en algún sitio se especifica que dos elementos no puedan estar identificados de una misma manera. De todas formas, aunque no estoy muy seguro del todo, creo que esta estructura la "copié" basandome en varias webs desarrolladas en HTML5. Lo más seguro es que me equivocara, pero voy a intentar comprobarlo.

Un saludo y gracias por el aporte ;)

[ryugen]

Tanto en HTML 4 :

Attribute definitions

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

referencia: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Como en HTML5

3.2.3.1 The id attribute

The id attribute specifies its element's unique identifier (ID). [DOMCORE]

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

referencia: http://www.whatwg.org/specs/web-apps...e-id-attribute

Los ID son unicos para toda una página, entonces no hay forma ni diseño que te permita duplicarlos.

Para eso están las clases

[KLAYMAN]

Gracias por la información ryugen

Pues error mio, un fallo grave :(
Yo pensaba que se podía repetir el nombre de identificación en un documento web, siempre que fuesen distintos elementos.
Ya veo que me equivocaba completamente, así que nada, siempre se aprende algo nuevo y más con los usuarios de este foro.

Sois unos cracks ;)

Voy dejando karma, por vuestra ayuda.