10 buenas prácticas en HTML - haz tu código limpio

Para que nuestro código esté limpio y sea fácil su desarrollo y mantenimiento en el caso de HTML tenemos que seguir ciertas prácticas que es lo que vamos a ver en este articulo.
10 buenas prácticas en HTML - haz tu código limpio
Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Programadores, programadoras mi nombre es Kiko Palomares, para que nuestro código esté limpio y sea fácil su desarrollo y mantenimiento en el caso de HTML tenemos que seguir ciertas prácticas que es lo que vamos a ver en este artculo, comenzamos con la

Punto 1: declara el DOCTYPE

Con el DOCTYPE le indicamos al navegador que estándar hemos utilizado para nuestro código HTML, de esa forma el navegador leerá o interpretará más bien nuestro documento de una forma u otra.

Deberíamos de utilizar siempre el DOCTYPE más actualizado, el de HTML5.

En algunos códigos antiguos vereis este DOCTYPE, el cual está obsoleto, es de versiones antiguas de HTML

Punto número 2: cierra las etiquetas

Esto es muy importante en HTML, todas las etiquetas tienen que ser cerradas, y además en el mismo orden que fueron abiertas.

Algo así sería incorrecto, tenemos una etiqueta que no hemos cerrado

La forma correcta sería la de abajo, es necesario cerrar todas las etiquetas en el orden que las abrimos
¿Todas? ¿seguro?

Pues no, todas no, en HTML5 tenemos excepciones, las etiquetas vacías, que son esos casos especiales en lo que no necesitan cerrarse.

Como por ejemplo la etiqueta
, que sirve para hacer un break de la línea y que pase al siguiente renglón, aquí vemos un ejemplo que está mal, y abajo como sería correcto, sin cerrarla.

Estas etiquetas que no necesitan cerrarse son estas:

Punto número 3: escribe las etiquetas en minúsculas

En realidad si las escribes en mayúsculas o minúsculas no afecta al funcionamiento, funciona igual en ambos casos, pero la legibilidad es mejor en minúscula, así que es recomendable siempre escribir las etiquetas, los atributos y los valores en minúscula.

Aquí vemos un ejemplo mal, con las etiquetas escritas en mayúsculas, y abajo uno escrito bien, con las etiquetas en minúsculas.

Punto número 4: pon el atributo ALT en las imágenes

Esto es algo que se suele pasar muy fácilmente, poner el atributo alt en las imágenes, porque si bien es cierto que aparentemente no pasa nada si no lo ponemos, el ponerlo mejora mucho la accesibilidad de la web, los lectores de pantalla, por ejemplo usado para personas ciegas, leen ese atributo, y si esa imagen tiene cierta relevancia en la página es necesario que tenga una buena descripción en su atributo alt.

Punto número 5: usa una indentación coherente

Esto en realidad lo deberíamos de hacer en cualquier lenguaje informático, sin una indentación buena la legibilidad del código se vuelve muy difícil.

Para el que no lo sepa, indentar es dejar espacios al principio de la línea para ver claramente los niveles de anidación del código, en el caso de HTML que etiqueta está dentro de otra.

Para esto tenemos varias opciones, podemos usar tabulaciones o espacios, aquí cada uno que use lo que más le guste, yo personalmente uso tabs. Lo importante es que siempre sea lo mismo.
¿Y vosotros? ¿que utilizais, espacios o tabs?

Precisamente os hice esta pregunta en mi cuenta de Instagram, y aquí podemos ver el resultado de la encuesta.

Por cierto, si aun no me sigues en instagram, no te imaginas la cantidad de cosas que estás perdiendo, sígueme

Punto número 6: no pongas los estilos en el documento de HTML

Me da igual que sea un simple margin, no tienes perdón, no pongas los estilos en el html, utiliza clases de CSS y pon los estilos en un archivo CSS.

El HTML es el contenido, y el CSS es el diseño visual, y son dos cosas que se han de mantener separadas, porque cuando lo hacemos todo junto es mucho más difícil de leer el código y cada vez se vuelve más complicado hacer cambios, lo que hace que tu código no sea muy mantenible.

Punto número 7: no uses divs para todo

Hay programadores que tienen la costumbre de usar la etiqueta div para organizar todo el contenido de la página.
Pero desde HTML5 tenemos las etiquetas estructurales, que nos sirven para definir cada parte de la página de forma más adecuada.
Usando estas etiquetas no nos hace falta ponerle clases o IDs a cada elemento para identificarlo o para ponerle un estilo CSS, y mientras menos ID y menos clases tengamos en nuestro código este será más pequeño y más limpio.

Punto número 8: no pongas el valor de los atributos booleanos

En HTML existen lo que se llaman los atributos booleanos, que son aquellos que si los incluyen son true, y si no los incluyes son false.
Algunos de estos atributos son checked, selected, disabled, y bueno tenemos algunos más.

Aquí podemos ver un ejemplo donde usamos el atributo disabled, solo con ponerlo ya es suficiente, no hace falta que pongamos nada como valor de este atributo.

Punto número 9: indica la codificación de los caracteres

En el header de la página deberíamos de incluir el meta que indica la codificación de los caracteres, para que el navegador sepa cuál usar y se nos vean bien todos los caracteres especiales donde se incluye la ñ.

El UTF-8 es el más común y extendido, si usas este ya te va bien.

Punto número 10: revisa que etiquetas existen

Si vas a crear y no sabes que existe una cierta etiqueta para eso, acabarás usando un div para eso, por ejemplo si quieres hacer una tabla y no sabes que la etiqueta table existe, te harás con divs, así que un punto es saber qué etiquetas existen.

Evidentemente es difícil saberse todas las etiquetas que existen, son muchas, pero al menos yo te recomendaría que le echases un vistazo a la lista de todas etiquetas, te las mirases por encima, veas para qué sirven, porque aunque no las memorices, cuando llegue el día que tengas que hacer algo concreto para lo cual exista una etiqueta, al menos te acordarás de que había una etiqueta para ello, y podrás ir a buscarla. Te dejaré en la descripción un enlace donde podrás ver la lista de todas las etiquetas.

Todas las etiquetas: https://www.w3schools.com/tags/default.asp


Cursos gratuitos relacionados:

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats