imagen 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.
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!.
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:
si te gustó esta entrada, tal vez quieras suscribirte via RSS
Hola, soy
Comentarios
deja un comentario
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.
@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)
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.
@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>
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?.
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.
Buen aporte, me ha gustado lo sufuciente como para comentar :P
Deja un comentario