Sobre 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:

Y también varias entradas que he escrito sobre la divitis:

Otro artículo 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:

  • Accessibility – Many a11y tools are pretty smart, and try their best to parse the structure of a page to help guide users through it in the way the page’s author intends, and to give users easy jump points to navigate quickly to the section of the page they care about. But <div>s don’t really impart any useful info about the structure of a document. The smartest a11y tool in the world still ins’t a human, and can’t be expected to parse class and id attributes and recognize all the weird and wild ways that devs all over the world name their blocks. I can recognize that class=”article-header-level-2″ is a subheading, but a robot can’t. (And if it can, get it out of my computer, I’m not ready for the AGI revolution just yet.)
  • Readability – To read this code, you need to carefully scan for the class names, picking them out from between the <div class=”…”></div> boilerplate. And once you’re a few levels deep in the markup, it becomes tricky to keep track of which </div> closing tags go with which <div…> opening tags. You start to rely very heavily on IDE features like coloring different indentation levels or highlighting the matching tag for you to keep track of where you are, and in larger documents it can require a lot of scrolling on top of those features.
  • Consistency and standards – It can be frustrating to start a new job or move to a new project and have to learn from scratch all the crazy markup conventions used across the codebase. If everyone had a standardized way to mark up common structures in web documents, it would be much easier to skim an HTML file in an unfamiliar codebase and get a quick handle on what it’s supposed to represent. If only there was such a standard…

HTML5: de HTML4 a HTML5

[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.

A punto de morir por la divitis

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:

marca-validation

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.

marca-div

 

Divitis: abuso de div y span

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”