Tema: Maquetar HTML5
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/10/2013, 18:32
Avatar de hackjose
hackjose
 
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 9 meses
Puntos: 131
Maquetar HTML5
Buenas noches amigos

Voy a hacer un tutorial de HTML5 y bueno quiero hacer la pagina lo mejor posible

El diseño sera como el siguiente
un indice del lado izquierdo y del lado derecho el contenido


el codigo es este
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>HTML5 para vencer</title>
  5.     <meta charset="utf-8" />
  6.     <meta name="author" content="Jose Vega" />
  7.     <meta name="description" content="Curso de HTML5" />
  8.     <style type="text/css">
  9.     *
  10.     {
  11.         margin:0;
  12.         padding:0;
  13.     }
  14.     body
  15.     {
  16.         min-width:960px;
  17.     }
  18.     #indice, #derecha
  19.     {
  20.         float: left;
  21.     }
  22.     #indice
  23.     {
  24.         background-color: blue;
  25.         width: 20%;
  26.     }
  27.     #derecha
  28.     {
  29.         background-color: pink;
  30.         width: 80%;
  31.     }
  32.     #titulo
  33.     {
  34.         margin-bottom:20px;
  35.     }
  36.     </style>
  37. </head>
  38. <body>
  39. <section id="indice">
  40. <img src="html51.png" width="128" height="128"/>
  41.  
  42. <h1>Indice del Elementos</h1>
  43.  
  44. <ol>
  45.     <li>!Doctype</li>
  46.     <li>&lt;a&gt;</li>
  47.     <li>&lt;area&gt;</li>
  48.     <li>&lt;aside&gt;</li>
  49. </ol>
  50. </section>
  51.  
  52.  
  53. <div id="derecha">
  54. <header id="titulo">
  55. <h2>HTML5 PARA VENCER</h2>
  56. <p>Escrito por: <a href="">Nombre completo</a></p>
  57. </header>
  58.  
  59.  
  60. <article id="contenido">
  61. <h1>Elemento aside</h1>
  62.  
  63. <section>
  64.     <h1>Descripcion</h1>
  65.     <p>texto texto texto texto</p>
  66. </section>
  67.  
  68. <section>
  69.     <h1>Cuando/Como debo usarlo?</h1>
  70.     <p>texto texto texto texto</p>
  71. </section>
  72.  
  73. <section>
  74.     <h1>Ejemplo(s)</h1>
  75.     <p>texto texto texto texto</p>
  76. </section>
  77.  
  78. <section>
  79.     <h1>Lo que dice la W3C</h1>
  80.     <p>texto texto texto texto</p>
  81. </section>
  82. </article>
  83. </div>
  84.  
  85.  
  86. </body>
  87. </html>

Creen que este bien un section para el indice?

Que opinan del h2 que esta en el header#titulo?

Puse un h2 por que el h1 lo quiero reservar para lo que realmente importa

Como header no introduce una seccion entonces estamos en el primer nivel del outline y si pongo un h1 seria por asi decirlo el h1 del primer nivel y ese es el mas importante para SEO hasta donde se y no lo quiero desperdiciar para el nombre de la pagina.

Pienso que el article esta bien, que opinan?
En este caso article contendria el contenido importante, lo que nos interesa de la pagina, ese contenido que se puede reutilizar y redistribuir por ejemplo por rss

Espero me puedan ayudar
Saludos