Semántica de html5:¿div contenedor o section contenedor?

ferminako · #1 (**permalink**) 30/10/2012, 12:36

De normal cuando maqueto una web en xhtml tengo un div contenedor y dentro de el x divs sub contenedores y dentro de estos los divs con los contenidos como regla general...

Pero al pasar a html5 , y usar sections en vez de divs normales tengo duda de si debo crear o no, un gran div contenedor como hacia antes o debo sustituirlo por un section con id contenedor por ejemplo que a su vez contenga otros sections con su ids subcontenedor en logar de los divs subcontenedor que hacia antes y dentro de ellos ya los section articles etc...

Gracias!

pzin · #2 (**permalink**) 30/10/2012, 14:03

Hay un foro sobre HTML5. Sabiendo tu mismo que el tema no es relativo a CSS —por el título— sorprende que lo publiques en CSS.

tunait · #3 (**permalink**) 30/10/2012, 14:13

Movido a HTML5 ;)

ferminako · #4 (**permalink**) 30/10/2012, 14:59

sorry , hice otro tema referente a css y no em dicuenta al publicar este que estaba en el foro no adecuado. :S

hackjose · #5 (**permalink**) 30/10/2012, 17:13

En la documentacion viene un ejemplo,
meramente dice que si nuestro contenido tiene secciones o se puede poner por secciones, cada seccion es un elemento section

ejemplo

Se trata de la pagina de graduacion de la universidad

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
<h1>Fiesta de graduacion generacion 2008-2012</h1>
<p>
una pequeña descripcion............ a continuacion presentamos la lista de graduados y los horarios
</p>
<section id="lista">
nombre1, nombre2, nombre3,.....nombre(n)
</section>
<section id="horarios">
de 10 a 12 ........
de 12 a 3 ...........
</section>
</body>
</html>

En este caso nuestro contenido lo podemos organizar como
un titulo
una pequeña introduccion
2 secciones, la seccion de invitados y del horarios

Como son secciones van en un elemento section

espero haberte ayudado

saludos

ferminako · #6 (**permalink**) 31/10/2012, 02:32

Entiendo lo que dices y te agradezco tu respuesta, pero yo suelo meter esos section en un div contenedor, seria correcto hacerlo o necesitria un section contenedor?? o directamente no tiene sentido un div o section contenedor ??

Por cierto no estoy de acuerdo con tu ejemplo segun dive into html5 eso deberia ir en un header con un hgruoup y dentro el h1 y h2:

Código HTML:

Ver original<header>
    <hgroup>
      <h1>Title goes here</h1>
      <h2>Subtitle </h2>
    </hgroup>
 </header>

Gracias!

hackjose · #7 (**permalink**) 31/10/2012, 12:31

usa hgroup por que esta usando 2 elementos h

si usara solo uno, el hgroup no seria necesario

Por otro lado veria si meto los section en divs o articles, dependiendo de la semantica

Slds

emprear · #8 (**permalink**) 31/10/2012, 17:49

Cita:

Iniciado por ferminako

De normal cuando maqueto una web en xhtml tengo un div contenedor y dentro de el x divs sub contenedores y dentro de estos los divs con los contenidos como regla general...

Pero al pasar a html5 , y usar sections en vez de divs normales tengo duda de si debo crear o no, un gran div contenedor como hacia antes o debo sustituirlo por un section con id contenedor por ejemplo que a su vez contenga otros sections con su ids subcontenedor en logar de los divs subcontenedor que hacia antes y dentro de ellos ya los section articles etc...

Gracias!

Podés hacer de una etiqueta semántica un elemento estructural por medio de css, pero si tenes que utilizar un elemento que sea solo estructural y no tenga relevancia semántica, debés seguir utilizando <div>

Por supuesto habría que ver el "producto terminado" para ver si estás haciendo un uso correcto de las etiquetas

SAludos

ferminako · #9 (**permalink**) 02/11/2012, 01:05

Dado que son divs meramente estructurales para maquetar la página y carecen de semántica, entiendo que no seria incorrecto usarlos como contenedores y subcontenedores para dar forma a la página y ya dentro de ellos los tags semanticos, que evidentemente tb responderan a su funcion estructural pero responderan a su semántica.

Gracias!

Hazuki · #10 (**permalink**) 03/11/2012, 08:22

En HTML5 Doctor publicaron un diagrama de flujo que ayuda a elegir la etiqueta adecuada en casos así. La versión online se puede leer en Scribd:

http://www.scribd.com/doc/92533332/H...y-HTML5-Doctor