Que tan correcto es usar esto en HTML5?

ulisess · #1 (**permalink**) 19/12/2011, 19:22

Tengo una duda la cual no he podido aclarar, estoy haciendo un diseño que quiero que el fondo del header se repita en todo el ancho del la pagina, sea cual sea el tamaño de la ventana, mi duda es, que tan correcto es usar un div como "wrapper" y otro dentro de este (que es el que repetiria la imagen de fondo en todo el ancho) un "header-background" y despues usar etiquetas semanticas dentro de estos.

por ejemplo:

Código:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<div id="wrapper">//este ocuparia todo el ancho y alto de la pagina
       <div id="header-background">//este repetiría el fondo del header a todo el ancho de la pagina.
            <header>
                      <h1>titulo del sitio.. etc</h1>
            </header>
             <nav>//aqui el nav por que mi menu esta dentro del header
                   //aqui los menus
             </nav>
       </div>
        <section>
              //aqui contenido etc
        </section>

        <div id="footer-background">//este div contiene el fondo que se repite al lo ancho de la pagina
                <footer>
                      //aqui el contenido del footer
                </footer>
        </div>
        
</div>
</body>
</html>

Funciona, pero quisiera saber que tan correcto es, y si no desaprovecho las bondades de HTML5 usando divs con etiquetas semanticas.

De antemano gracias.

ryugen · #2 (**permalink**) 19/12/2011, 20:43

Mi humilde opinión es la siguiente:

--> De ser posible usaría el siguiente marcado:

Código HTML:

Ver original<header><!--dentro del wrapper, este llevaria el fondo-->
             <h1>titulo del sitio.. etc</h1>
             <nav><!--aqui el nav por que mi menu esta dentro del header-->
                   
             </nav>
</header>

Me parece lo más semtantico, pero en el caso de que sea necesario por cuestiones de diseño introducir un div intermedio, cambiaría el nombre de la clase: en lugar de "header-background" que está orientada a su estilo, la nombraría "header-container" que esta enfocado a su signifcado.

Finalmente porque pondría el "nav" dentro del "header" porque de acuerdo al WHATWG():

Cita:

The header element represents a group of introductory or navigational aids.

Fuente: http://www.whatwg.org/specs/web-apps...header-element

Entonces, tu header introduciría el sitio y asistiría a la navegación tal cual dice la definición.

Saludos

ulisess · #3 (**permalink**) 20/12/2011, 00:24

Gracias no me habia fijado en eso, otra duda que tengo es, en el capitulo de mejorando.la de introduccion a HTML5 @freddier dijo que los floats ya no eran necesarios, que se usaba inline-block, como es esto?, como puedo mover secciones sin floats?, por el momento uso display: inline-block; y position(top,left) y me ha funcionado, pero es a lo que se referia @freddier?