La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.
La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como "básica", y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.
En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.
Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todosescribamos HTML de calidad.
Declarar el DOCTYPE correcto
Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.
Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración
<!DOCTYPE>y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:
DOCTYPE en HTML5
<!DOCTYPE html>
DOCTYPE HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.
Recuerda cerrar las etiquetas
Un documento HTML está compuesto por muchas etiquetas que sirven para definir encabezados, párrafos e incluso secciones enteras, usualmente vienen en pares, una para abrir y otra para cerrar. Siempre que abras una etiqueta, recuerda cerrarla correctamente.
Incorrecto
<p>Lorem ipsum dolor sit amet
Correcto
<p>Lorem ipsum dolor sit amet</p>Nombra las etiquetas siempre en minúsculas
Tan importante como cerrarlas, es usar los nombres de las etiquetas siempre en minúsculas. Lo correcto es
<p> </p>, <div> </div>, <h1> </h1> no es <P> </p>, <dIv> </DIV>, <H1> </H1>, . Además de que produce nauseas leer código escrito de esa manera, es probable que los navegadores modernos no interpreten correctamente estas etiquetas.Utiliza ficheros externos para CSS y JavaScript
Aunque puedes crear funciones JavaScript y dar estilo a los elementos directamente en el documento HTML, por favor, nunca lo hagas. Utiliza siempre hojas de estilo y scripts externos en archivos separados para estos fines.
Enlaza los CSS externos al principio
Aunque en teoría puedes enlazar los archivos CSS externos en cualquier parte del documento HTML, lo más recomendable es hacerlo dentro de las etiquetas
<head> </head>, en la practica esto hará que las páginas se cargan ligeramente más rápido.Enlaza los JavaScript externos al final
En la medida de lo posible trata de enlazar los archivos JavaScript, justo antes de la etiqueta
</body>. Esto ayudará a que las páginas carguen mucho más rápido.
No es una tontería y existe una explicación para esto: cuando el navegador está cargando un script, se detiene por completo la carga del resto del sitio y continua una vez que finaliza el otro proceso. Si se trata de un scriptde gran tamaño, el usuario deberá esperar un poco y notará fácilmente que algo sucede en el fondo, algo para nada elegante.
Usa el atributo "alt" en todas las imágenes
Es una regla fácil de olvidar, sin embargo hay que hacer un esfuerzo por recordar incluir el atributo "alt" en todas las imágenes. Aunque parezca una tontería, es necesario incluir este atributo por razones de validación y accesibilidad.
Valida tu código
Validar el código de los documentos varias veces durante el proceso de creación, te ayudará a descubrir errores de manera oportuna y te ahorrará dolores de cabeza innecesarios al final, cuando pensabas que ya habías terminado. W3C pone a nuestra disposición su Markup Validation Service que nos permitirá realizar esta tarea de manera sencilla y nos avisará sobre cualquier error en nuestro código.
Memoriza todas las etiquetas
Resulta muy útil repasar la lista completa de etiquetas HTML disponibles y tratar de memorizar la mayor cantidad de ellas. Siempre puedes acceder a la referencia, pero mantenerlas en la cabeza te ayudará a escribir código mucho más rápido.
Si memorizar no es lo tuyo, te recomiendo buscar un editor con soporte para HTML (hay cientos) que te ayude a agilizar el proceso, autocompletando código y ofreciendo sugerencias.
Lee código de otros
Para cerrar, aunque no esté ligado únicamente al código HTML (ya que aplica para JavaScript, CSS y cualquier otro lenguaje) al leer código de otros desarrolladores, incluso mirando el código fuente de tus sitios web favoritos puedes aprender mucho. Inspecciona ese elemento particular que llama tu atención y aprende como lo hicieron. Revisa otros estilos y crea uno propio.
