Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Consejos para escribir mejor HTML

Consejos para escribir mejor HTML 28.JAN.14

Alvaro José Rios Ch
Fundador WebBizarro

Cuando aprendemos a programar muchas veces pensamos como si lo que hacemos solo lo vamos a usar o modificar nosotros solos, por eso es bueno tratar de contribuir en comunidades como github donde cada equipo tiene sus regala para contribuir y te ayuda a aprender patrones de diseño de código y a trabajar realmente en equipo.

El código Html, como muchos lenguajes, es muy permisivo a la hora de escribir es igual si escribes con mayúsculas o minúsculas y no importa mucho el orden de los atributos, solo por mencionar algunas cosas. Esto sin embargo no sería un problema si estamos trabajando en algo solos, pero generalmente estamos en grupos de trabajo y es bueno mantener una serie de patrones para que el código se encuentre unificado y sea más fácil de mantener en el futuro. Así que veamos algunos consejos que por supuesto no son reglas, pero te pueden ayudar a establecer tu propio estilo o el de tu equipo de trabajo (si no usan alguno).

 

Espacios en blanco

Creo que esta claro lo necesario que es la identación en cualquier proyecto pero lo es más cuando haces algo con HTML ya que te ayuda mucho a identificar cada bloque de código. Hay dos formas generalmente usadas para identar espacios y tabulaciones, siendo lo más recomendado usar espacios y nunca mezclarlos, adicionalmente si usas espacios debes definir la cantidad para que todo el documento se mantenga exactamente igual, generalmente lo más usado son 4 espacios.

Puedes configurar el editor para que te muestre los caracteres invisibles así puedes saber si tienes problemas de identación y quitar los espacios adicionales al final de las lineas.

 

Formato

Algunas recomendaciones en cuanto al formato son:

- Siempre usar minúsculas para escribir los tags y atributos.

- Escribir solo un elemento por cada línea.

- Agregar un nivel de identación para cada elemento anidado dentro de otro.

- Siempre colocar comillas dobles para los valores de los atributos.

- Siempre incluir los tags de cerrado.

- No colocar el slash (/) en elementos que se cierren automáticamente como los tag img

Adicionalmente puedes mantener la longitud de la linea a un máximo establecido por ejemplo 80 columnas, cuando algunos tags tengan muchos atributos puedes separarlos en múltiples líneas para que se mantenga la legibilidad del código.

 

Orden en los atributos

Una buena forma de ordenar los atributos es el siguiente: class, id, data-* y luego todo lo demás

<a class="[value]" id="[value]" data-name="[value]" href="[url]">[text]</a>

 

Nombres

Colocar nombres a las clases es algo complicado pero muy necesario y lo que debemos tomar en cuenta es, primero que las clases van a ser usadas en el HTML, CSS y JavaScript por lo que debemos usar nombres que ofrezcan información para cada uno de los lugares donde los vayamos a usar, En segundo lugar debemos evitar el uso de nombres de clases abreviados, en la medida de la posible los nombres deben ser fáciles de entender.