Escribir código HTML no es cosa fácil, más allá de que existan miles de aplicaciones que lo hagan. Escribir en serio HTML es una tarea ardua y que requiere de toda nuestra concentración.
He aquí una lista a tener en cuenta a la hora de sentarse a escribir nuestro código fuente.
Un código HTML bien escrito es la clave para una excelente lectura por parte de los robots y optima carga de cara al usuario.
Un código fuente correctamente jerarquizado es de vital importancia de cara al posicionamiento SEO. El H1 debe ser único en cada una de nuestras páginas, si no lo creen así, pregúntense cuantas veces compraron un libro con más de un título?
Es muy importante comentar nuestros códigos, de esta manera logramos una organización del mismo de fácil lectura para nosotros y para todo aquel que deba trabajar sobre el mismo.
Si queremos lograr un código limpio, validado y de fácil entendimiento no debemos utilizar tags de más para lograr espacios, saltos de carro, etc. Un ejemplo claro de esto son los muy utilizados “espacios en blanco”
O bien ver saltos de carro para que nuestro footer se posicione donde queremos, cosas tales como:
<p> </p> <p> </p> <p> </p> <div id=”footer”>
Muchos trabajan con DreamWeaver el cuál es un programa de gran ayuda a la hora de empezar, pero no prestan atención al código resultante de trabajar en la visión diseño. El DW es un gran soft para la creación de páginas Webs, pero deja mucha ‘basura’ en nuestro código perjudicándonos sin saberlo.
La vista ‘codigo’ en DW no posee esta falla, Es más te ayuda bastante ya que al abrir cualquier tag automáticamente te lo cierra. Por eso si vas a trabajar en DW en el modo ‘diseño’, después revisalo integramente en el modo ‘Codigo’.
TIP: revisen los tags de img y los JS que crea DW
Así como en el punto anterior mencionamos que DW muchas veces deja “basura” en el código, también tenemos que decir que muchas veces el maqueteador del sitio no presta atención y hace desastres (total si le doy F12 se ve bien) que luego repercuten seriamente en nuestra estructura. Un DIV mal cerrado, una LI, UL, P o cualquier tag mal cerrado puede provocar el caos total en nuestro sitio, por eso es d esuma importancia prestar especial atención a este punto.
Para algo utilizamos una Hoja de Estilos, entonces ¿porqué escribir CSS en nuestro tag?
Esto de escribir el style en el tag nos perjudica a todos, piensen en las actualizaciones! Por otro lado ejecutar esta técnica va totalmente en contra de los puntos mencionados anteriormente.
La etiqueta <noscript> se usa para proveer un contenido alternativo para los usuarios que tienen deshabilitado la función de JS en su browser o tienen un browser que no soporta JS. Por eso esta etiqueta NO está en desuso, todo lo contrario. Debemos proveer a nuestros clientes de la información a como de lugar y no por “verse linda” dejar a muchos fuera.
Estamos cansados de ver códigos donde se dibujan tablas con divs con display:inline o display:table-cell, a ver si nos queda claro… LAS TABLAS SON PARA TABULAR DATOS NO LOS DIVS!
Estamos totalmente en contra de ese fanatismo sin sentido de crear todo con DIVs porque las tablas están en desuso (¿?) por favor!!! Quién les dijo tal cosa!!!?
Creo que este es uno de los puntos más importantes a la hora de escribir nuestro código. Utilicemos nombres realistas y de ser posible en inglés (de este modo todo el mundo lo entenderá) para el HEADER utilicemos HEADER no otro nombre, lo mismo para el FOOTER el SIDEBAR y porque no el MAINCONTENT.
Las clases deben hacer referencia a lo que están modificando, no ponerles “colorAzulCabezal” ¿Qué es eso!!? O las conocidas “Estilo1”, “Estilo2” típico de trabajar en el modo diseño de DreamWeaver, por favor prestemos real atención a estos nombres!
Últimamente estoy recibiendo códigos donde los tags “ALT” / “TITLE” brillan por su ausencia. Si sabemos bien para qué sirven cada uno de estos tags, porque no usarlos? Nos da “fiaca” pensamos que no sirven del todo!? Si es así están sumamente equivocados. Estos tags son tan importantes como cualquier otro y a veces más importantes así que utilícenlos que sirven.
Por una internet más limpia y más fácil para todos!
seguinos y enterate de nuestros últimos proyectos, y actualizaciones de urbanchip