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 todos escribamos 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 y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

DOCTYPE en HTML5

DOCTYPE HTML 4.01 Strict

DOCTYPE XHTML 1.0 Strict

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

Lorem ipsum dolor sit amet

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

,

,

no es

,

,

, . 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 , 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