Si tenéis un minutito me gustaría conocer vuestra opinión sobre mi primera estructura para diseñar una web.
La he hecho en HTML5, y la he pasado por validator w3 y me ha dado OK. Pero tengo alguna duda.
1. ¿Es correcto crear un div contenedor para que aparezca todo centrado?
2. He leído que se puede meter un artículo dentro de una sección, pero ¿es correcto meter una sección dentro de otra?
3. Para convertir la web a HTML4, ¿valdría con cambiar el DOCTYPE y las etiquetas nuevas (header, section, aside…) por div? ¿O habría que hacer algo más?
Muchas gracias por vuestra ayuda.
Código HTML :
<!DOCTYPE html> <html lang="es"> <head> <title>Somos lo que comemos</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh" content="3";> <link href="css.css" type="text/css" rel="stylesheet" media="all" /> <style type="text/css"> </style> </head> <body> <div id="contenedor"> <div id="banner">banner publicitario</div> <header id="cabecera">Cabecera de la web</header> <nav> <ul class="ulline"><li class="listline">menu a</li><li class="listline">menu b</li><li class="listline">menu c</li><li class="listline">menu d</li></ul> </nav> <section id="sectiona"> <h1>titular</h1> <section> <article>foto</article> <footer>pie de foto</footer> </section> <section> <article>foto</article> <footer>pie de foto</footer> </section> <section> <article>foto</article> <footer>pie de foto</footer> </section> <section> <article>foto</article> <footer>pie de foto</footer> </section> <section> <article>foto</article> <footer>pie de foto</footer> </section> <section> <article>foto</article> <footer>pie de foto</footer> </section> </section> <aside> <div id="banner">banner publicitario</div> <ul><li>aside</li><li>+ vistos</li><li>temas</li><li>facebook</li><li>twenti</li></ul> </aside> <address> dirección </address> <footer id="footerfin"> footer fecha, enlaces relacionados, nube de tags </footer> </div> </body> </html>
Código HTML :
body{ font-family:helvetica, arial, sans-serif } #contenedor{ width:900px; margin:0 auto 0 auto; background-color:#FFE6AF; } #banner{ height:70px; padding:5px; background-color:#E0E0E0; } #cabecera{ width:890px; height:70px; margin:0; padding:5px; background-color:#C1C1C1; } nav{ width:890px; margin:0; padding:5px; background-color:#E0E0E0; } .ulline{ margin:0px; padding:0px; } .listline{ margin:0; padding-left:5px; padding-right:20px; display:inline; } #sectiona{ width:701px; height:630px; margin:0; padding:5px; background-color:#C1C1C1; float:left; } section{ width:228px; height:276px; margin:5px 5px 0 0; background-color:#A3A3A3; float:left; } article{ width:218px; height:226px; margin:0px; padding:5px; background-color:#E0E0E0; } footer{ padding:5px; } aside{ width:170px; height:630px; margin:0; padding:5px; background-color:#C1C1C1; float:right; } address{ width:890px; height:70px; margin:0; padding:5px; background-color:#E0E0E0; clear:both; } #footerfin{ width:890px; height:70px; margin:0; background-color:#C1C1C1; clear:both; }