¿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.
Buenas prácticas
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
class
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.
id
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.
data-
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.
Sintaxis
El concepto queda mucho más claro si vemos un ejemplo
<!-- Mas legible -->
<ul>
<li><a class="link" id="link-1" href="example/aBcDeFgHiJkLmNñOpQrStUvWxYz"></a></li>
<li><a class="link" id="link-2" href="example/aBcDeFg"></a></li>
<li><a class="link" id="link-3" href="example/aBcDeFgHiJkLmNñOp"></a></li>
<li><a class="link" id="link-4" href="example/aBc"></a></li>
<li><a class="link" id="link-5" href="example/aBcDeFgHiJk"></a></li>
<li><a class="link" id="link-6" href="example/aBcDeFgHiJkLmNñOpQrSt"></a></li>
</ul>
<!-- Menos legible -->
<ul>
<li><a href="example/aBcDeFgHiJkLmNñOpQrStUvWxYz" class="link" id="link-1"></a></li>
<li><a href="example/aBcDeFg" class="link" id="link-2"></a></li>
<li><a href="example/aBcDeFgHiJkLmNñOp" class="link" id="link-3"></a></li>
<li><a href="example/aBc" class="link" id="link-4"></a></li>
<li><a href="example/aBcDeFgHiJk" class="link" id="link-5"></a></li>
<li><a href="example/aBcDeFgHiJkLmNñOpQrSt" class="link" id="link-6"></a></li>
</ul>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.
<!-- Mas legible -->
<select id="" name="">
<option class="btno" value="1" selected></option>
<option class="btno" value="2"></option>
<option class="btno" value="3"></option>
<option class="btno" value="4" disabled></option>
</select>
<!-- Menos legible -->
<select id="" name="">
<option selected class="btno" value="1"></option>
<option class="btno" value="2"></option>
<option class="btno" value="3"></option>
<option disabled class="btno" value="4"></option>
</select>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.
Jonathan Arias (Colombia) 13 junio, 2019
Excelente guía para ordenar un front-end