1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

El diseño web es como el legoimagen de woordenaar

Como NO usar el elemento div

Ya vimos para que sirve el elemento <div> y cómo debería ser usado, ahora vamos a ver uno de los errores más comunes en el uso de este elemento y cómo evitarlo.

El problema

Lo que pasa es que la mayoría de diseños abusan del elemento <div>, y no estoy hablando de cualquier diseño, sino de sitios muy visitados. Sólo por poner un ejemplo veamos a Techcrunch, específicamente la lista de artículos.

No hay necesidad de poner el código fuente, es mucho más fácil verlo con un gráfico.

artículos con div

Sí, cada post es un div, uno debajo de otro, lo bueno es que obviamente cada post está separado, lo no tan bueno, es que hay una forma mucho mejor escribir ese HTML.

Semántica 101

Si tenemos una lista de posts, por que hacerla con <div>s si HTML tiene justo el elemento que necesitas: ¡listas!

Lo sé, hacer esto con listas es lo más simple del mundo (la primera vez que vi esto pensé: Duh! por que no se me ocurrió antes!), y aún así no mucha gente lo hace.

No cualquier tipo de listas

Obviamente estas entradas no están al azar, están ordenadas por fecha de creación, eso nos da una pista... Listas ordenadas.

¿Que pasaría si cambiamos todos esos elementos <div> por <li> y los colocamos dentro de un <ol>?

Pues tu código tendría mucho más significado. En vez de estar diciendo, aquí tengo X secciones lógicas (<div>) podrías decir: Hey!, esta es una lista de artículos!.

artículos con ol

Recuerda, construir un buen HTML o XHTML es como jugar Lego, sólo se trata de usar las piezas correctas para armar lo que quieres.

Nota final: No abuses de los divs, trata de buscar el elemento HTML adecuado para cada situación.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Laren Laren

    El objetivo de evitar usar divs en lugares donde no es "necesario" es bueno. Es una muy buena práctica, generalmente para aquellos que comienzan a pasarse de <table> a <div> y suelen abusar hasta que leen artículos como este.
    ---
    Pero así como existe la "divitis" existe también la "listitis". Muchos diseñadores abusan de ese tag. Es mejor barajar la opción de usar <p> (que admite varias etiquetas dentro) o las listas de definición(para los artículos sirve).
    ---
    De todas maneras es bueno tener varios tags a la mano para barajar alternativas.

  2. Avatar de Germán Germán

    @Laren, <p> es un elemento de bloque que sirve para identificar un párrafo y debería sólo se usado para marcar párrafos.
    Cada elemento tiene una función y es justamente para eso que deben ser usados.
    Puedes leer un poco más del elemento <p> aquí: (http://www.w3.org/TR/html401/struct/text.html#h-9.3.1)

  3. Avatar de Laren Laren

    Tienes toda la razon con el el usar P para parrafos. Pero si te das cuenta, los artículos son parrafos. Mejor dicho son un título y su parrafo.
    ---
    Una buena forma de expresarlos sería usando un contenedor global para todos los artículos y etiquetas semanticas para cada elemento. Algo asi:
    /---/
    <div id="articulos">
    <h3>Mi Artículo 01</h3>
    <p>
    <img src="la_imagen_de_cada_articulo" />
    Texto en parrafo de mi artículo. Tal como TechCrunch lo muestra
    </p>
    <a>Leer más
    </a>
    <h3>Mi Artículo 02</h3>
    <p>
    <img src="la_imagen_de_cada_articulo" />
    Texto en parrafo de mi artículo. Tal como TechCrunch lo muestra
    </p>
    <a>Leer más</a>
    </div>
    /---/
    Esa es una opción. La otra es usar listas de definición que de por sí ya traen el elemento título.

  4. Avatar de Germán Germán

    @Laren, a lo que yo me refiero es a esto:

    <ol id="articulos">
    <li>
    <h3>Mi Artículo 01</h3>
    <p>
    <img src="la_imagen_de_cada_articulo" />
    Texto en parrafo de mi artículo. Tal como TechCrunch lo muestra
    </p>
    <p><a>Leer más
    </a></p>
    </li>
    <li>
    <h3>Mi Artículo 02</h3>
    <p>
    <img src="la_imagen_de_cada_articulo" />
    Texto en parrafo de mi artículo. Tal como TechCrunch lo muestra
    </p>
    <p><a>Leer más</a></p>
    </li>
    </ol>

    Y si quieres le puedes dar un id y/o class a cada <li>

  5. Avatar de Laren Laren

    Pues si, tienes razón, eso está correcto. La gran pregunta es porqué no se usa tanto si OL es tan flexible en cuanto a diseño y cumple la función correcta?.

  6. Avatar de Alvaro Pereyra Rabanal Alvaro Pereyra Rabanal

    Probablemente porque el uso semántico del HTML no es tan promocionado/conversado/platicado/comunicado, etc., como sí lo es el hecho de maquetar con XHTML/CSS.

    La mayoría de tutoriales que tratan el segundo tema, prácticamente intercambian el <table> por el <div>, olvidando que existen infinidad de etiquetas más apropiadas para realizar el trabajo.

    Obviamente, como enfoque académico, es entendible: no puedes disparar tantos conceptos nuevos y esperar que el lector o alumno los entienda en su totalidad. Debes empezar a pocos. Sin embargo, esos artículos pocas veces ahondan más en el tema, y dejan a los nuevos iniciados con la -falsa- sensación que con utilizar <div>s basta.

  7. Avatar de David David

    Buen aporte, me ha gustado lo sufuciente como para comentar :P

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910