La divitis es una enfermedad que sufren muchos desarrolladores web: es el uso innecesario de elementos div, algunas veces con varios niveles de anidamiento, para etiquetar una página web.
Si crees que sufres de divitis te recomiendo las siguientes lecturas:
Y también varias entradas que he escrito sobre la divitis:
La divitis es una enfermedad antigua, el primer artículo que conozco que habló sobre esta enfermedad es del año 2006: Divitis: what it is, and how to cure it
Ahora he encontrado otro artículo, Stop using so many divs! An intro to semantic HTML, que explica los siguientes problemas de la divitis:
La divitis es una enfermedad que sufren muchos desarrolladores web: es el uso innecesario de elementos div, algunas veces con varios niveles de anidamiento, para etiquetar una página web.
Si crees que sufres de divitis te recomiendo las siguientes lecturas:
[kml_flashembed movie=”http://www.youtube.com/v/vRqQRrULSxI” width=”560″ height=”315″ wmode=”transparent” /]
Transcripción:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo emplear los nuevos elementos semánticos de HTML5 para transformar la estructura de una página web de las versiones antiguas de HTML a la última versión.
En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, así que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar.
En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas.
Incluso en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas.
Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta.
O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web.
Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span.
Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces.
Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div.
En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.
Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5.
Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene:
Una cabecera.
Una barra o menú de navegación.
Un panel con información adicional, como por ejemplo noticias.
La zona de contenido principal formada por
dos entradas o artículos.
Una imagen en una de las entradas.
Y un pie de página.
Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web.
La cabecera se etiqueta con header.
La barra o menú de navegación con nav.
Un panel con información adicional con aside.
La zona de contenido principal con main.
Las entradas o artículos con article.
Una imagen con figure.
Y el pie de página con footer.
En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web.
Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web.
A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5.
En primer lugar vamos a ver el código HTML de la cabecera.
Este es el típico código de una cabecera de una página web: un div y un h1.
En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header.
Ahora la barra o menú de navegación del sitio web.
Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.
Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios.
Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.
Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos.
La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article.
Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura.
Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.
Por último, el pie de página.
En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar.
En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.
Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una página web.
Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.
Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.
Muchas gracias por tu atención.
La divitis es una enfermedad que tienen muchos desarrolladores web: abusar del uso de la etiqueta div, todo tiene que estar encerrado por una etiqueta div, y un div debe estar encerrado dentro de otro div, y así hasta aburrirse.
Afortunadamente, esta enfermedad tiene cura, sólo hay que leer un poco, por ejemplo Divitis: what it is, and how to cure it y cambiar esta mala costumbre.
Hace unos días estaba dando clase y enseñé la página de Marca a mis alumnos porque nunca falla, siempre tiene miles de errores de validación:
Por alguna razón apareció el tema de la divitis y me pregunté cuántas etiquetas div tiene la página de Marca.
¡1370 etiquetas div!
¡1370 etiquetas div!
¡1370 etiquetas div!
No lo voy a escribir 1370 veces.
Hoy es un buen día para recordar dos de las enfermedades más comunes del desarrollo web:
Visto en Twitter:
Developers had a benign malady: divitis. Now there is a new, malignant malady: sectionorrhea — @stevefaulkner #a11y #ParisWeb
Esta cita parece que es del gran Steve Faulkner.
La divitis fue y sigue siendo una enfermedad muy común entre los desarrolladores web. Ahora parece que la enfermedad ha mutado en sectionorrhea.
Hace tiempo que escribí sobre este tema, Divitis: abuso de div y span. Desgraciadamente, es una enfermedad que no ha sido erradicada y de vez en cuando aparece.
Hace unas semanas, un alumno del curso iDESWEB me dijo que no había explicado cómo usar la etiqueta <div>. Le recomendé que leyera el siguiente artículo, Divitis: what it is, and how to cure it.
Acabo de encontrar el artículo Divitis: Abuso de etiquetas div y span. Un artículo muy interesante donde se comenta el mal uso que se hace en muchos casos de las etiquetas div y span.
También explican lo mismo en Errores comunes del desarrollo web:
<span>-mania
Una forma común de estilizar algo con CSS es meterlo dentro de un elemento
<span>y ponerle una propiedad con una clase. Estoy seguro que todos hemos visto cosas como<span>y<span>.¿Por qué? En la mayoría de los casos es completamente innecesario, no tiene valor semántico y hace que el código quede ilegible. Usen elementos de cabecera para la cabecera, pongan párrafos en los elementos de párrafo, hagan listas con los elementos de listas de HTML. Usen CSS para estilizar esos elementos. Si es necesario, añadan atributos de clase o id.
Divitis and classitis
Relacionado con <span>-mania. Añadir elementos div y atributos class innecesarios.
Por qué? Ver “<span>-mania” y “falta de semántica”