Ordenar correctamente los atributos en Html5

¿Cuanta importancia tiene el orden de los atributos en el código HTML? Algunos desarrolladores web le damos más y otros menos, todo depende del enfoque con que lo querais ver, cuando nos encuentramos con código de otros desarrolladores que utilizan “Buenas prácticas”, estándares y “código limpio” es cuando vemos la importancia de la forma de trabajar correctamente el código.

El fin de ordenar los atributos no es otro que facilitar la lectura del código, siguiendo siempre el mismo orden por defecto, de esta forma nos disciplinamos en escribir y en buscar los atributos y los valores en un lugar específico de la etiqueta por inercia, estas prácticas nos facilitan mucho el mantenimiento del código.

Para realizar este artículo me he basado en varios cursos y manuales de “Buenas prácticas” que he utilizado a lo largo de los años y he intentado llevar a cabo en mis desarrollos, aunque muchas veces en este aspecto me haya visto frustrado por culpa de el uso de frameworks, quiero decir con ello que es una base documentada, aunque alguien puede no estar de acuerdo conmigo, el orden es orientativo, no es necesario seguirlo al pié de la letra.

Para facilitar la lectura del código deberíamos seguir el siguiente orden:

• class
• id
• data-
• src
• type
• href
• value
• title
• alt
• boolean

Una base orientativa más completa incluyendo más atributos podría ser la siguiente para HTML5:

class, id, name, data-, action, for, src, download, type, href, value, media, ping, title, alt, aria-, role, boolean

El primer atributo que utilizamos al escribir la etiqueta es el atributo class, posiblemente es también el que más vamos a utilizar durante la maquetación de un proyecto, además es también el atributo mas reutilizable y posiblemente el más repetido, por estas razones debe ser el primer atributo en mostrarse en la etiqueta.

Como segundo atributo mostramos el identificador, este no es reutilizable y como buena práctica no debemos usarlo en exceso, deberiamos usar este atributo con moderación y en la medida de lo posible prescindir de el para la maquetación.

Los atributos propios en HTML5 juegan un papel importante en cuanto a semántica y estandarización, existe un artículo en este sitio en el que se habla de esta nueva incorporación en HTML5.
Atributos propios en HTML5.

El concepto queda mucho más claro si vemos un ejemplo

La diferencia queda clara entre una lista y la otra, los enlaces nunca serán iguales pero la mayoría de veces si lo serán las clases, en el ejemplo he hecho un consumo excesivo de los identificadores, podría haber insertado atributos “data-“, en cualquier caso, se trata de jugar con los valores para que ocupen el mismo número de carácteres siempre que nos sea posible.

Veamos otro caso en el que se cumple el mismo criterio.

Puede haber casos en los que las reglas no den el resultado deseado, como dije anteriormente no es necesario seguirlo al pié de la letra, es una base orientativa, aunque como hemos podido comprobar es bastante sólida, en todo caso el fín justifica los medios y el objetivo es generar código limpio y legible, cosa que nos beneficia a todos y nos facilita el mantenimiento de los sitios web.