Archivo de junio de 2010

Diferencias entre div, section y article

Martes, 15 de junio de 2010

Cuando empecé a estudiar HTML5 me vi también en la tesitura de diferenciar div, section y article. Aunque no fue sencillo, tampoco fue demasiado complicado entender cuáles son los detalles que marcan la diferencia entre unos y otros.

Básicamente está en la carga semántica que le queramos dar al contenido. ¿Cuándo usamos un div, un section o un article?

  • Usaremos article para representar cualquier información que tenga sentido propio por si misma y sea propensa a la reutilización, por ejemplo, mediante sindicación. Un ejemplo: un post de un blog, el resumen de ese post en una portada, un hilo en un foro, un comentario…
  • Usaremos section para agrupar contenido relacionado. Puede servirnos para enmarcar un conjunto de artículos, o incluso nuevas y diferentes secciones, o artículos que se dividan en secciones… la variedad es infinita.
  • div no tiene ninguna intención semántica, es un simple “agrupador” de contenido que nos ayudará a pintarlo con CSS.

Imaginemos un documento. ¿Qué es un documento al fin y al cabo? Una gran cantidad de información. Esta viene divida en secciones, una forma de ayudarnos a entender mejor esta información. Y las secciones pueden (o no) estar divididas en más secciones, que aglutinarán el contenido de nuestro documento (los artículos). Estos además, si su complejidad lo requiere, podemos dividirlos en más secciones y así, ad infinitum. Por compararlo a algo estaríamos hablando del cuerpo humano hasta llegar al nivel de detalle molecular (un cuerpo tiene brazos, el brazo tiene músculos, los músculos células, etc…).

En el artículo anterior puedes ver cómo quedaría el loop de WordPress: una sección para indicar contenido relacionado (los post) y dentro de cada post una sección para aglutinar más contenido relacionado (los comentarios).

¿A que es sencillo?

Publicado en html5 | No hay comentarios »

Loop de WordPress en HTML5, un ejemplo práctico

Lunes, 14 de junio de 2010

Ya está aquí, ya llegó, HTML5 ha venido para quedarse y cada vez escuchamos más y más cosas de la actualización del lenguaje de marcado web por excelencia. El otro día me preguntaba cuándo WordPress daría el salto, supongo que todavía tendremos que esperar.

En cualquier caso, podemos empezar a soltarnos un poco tomando como base la archifamosa plantilla Kubrick, por defecto en nuestro CMS favorito y pasándola a HTML5. Me ahorro el PHP, que lo carga el diablo.


<section id="content" class="posts">
  <h1 hidden>Artículos</h1>
  <article id="post-X" class=hentry>
    <header>
      <h1><a href="url-del-articulo" title="Título del artículo" rel="bookmark">Título del artículo</a></h1>
      <time pubdate>Fecha de publicación</time>
    </header>
    <div class="post-content"> .... </div>
    <footer>
       <p>Publicado en
         <a href="url-categoria" title="Ver todas las entradas de Categoría">categoría</a>
       </p>
    </footer>
    <aside class="comments">
       <h1 hidden>Comentarios</h1>
       <article id="comment-X">
         <h1>
           <a href="url-del-comentarista" title="Ir al blog de X" rel="external nofollow">Nombre del comentarista</a>
         </h1>
         <div><p>Contenido del comentario</p></div>
         <footer>
           <time pubdate>Fecha de publicación del comentario</time>
         </footer>
       </article>
       <!-- repite este misma estructura para el resto de comentarios -->
    </aside>
  </article>
</section>

Etiquetas:, ,
Publicado en html5, wordpress | No hay comentarios »