La Guía de Estilo en HTML que deberías de seguir para tener un Código Limpio

Guía de estilo

Sé inteligente y piensa en el futuro

Un estilo consistente hace que sea más fácil para otros entender el código HTML.

Mantén tu código ordenado, limpio y bien formado.

Uso correcto del Document Type

✔️ <!DOCTYPE html>

❌ <!doctype html>

Usa minúsculas para las etiquetas

Cierra todos los elementos

Cierra los elementos vacíos

Usa minúsculas para los atributos

Valor de atributos entre comillas

Atributos de imágenes

Espacios y símbolos de igual

Evita líneas de código muy largas

Cuando usas un editor de HTML, hacer scroll horizontal es un inconveniente, así que es recomendable que una línea no pase de los 80 caracteres.

Líneas en blanco e indentación

No añadas líneas en blanco sin razón.

Para legibilidad añade líneas en blanco para separar bloques de código.

Añade espacios de indentación para mejorar la legibilidad, pero no hace falta indentar todos los elementos.

Omitir el <html> y el <body>

Aunque está permitido, no es recomendable.

Omitir el <head>

Igual pasa con el <head>

Meta data

El <title> es obligatorio en HTML.

Para que los navegadores y los motores de búsqueda interpreten bien el contenido es necesario especificar el idioma y la codificación de caracteres tan pronto como sea posible.

Configurando el viewport

Para que se vea bien la página en todos los dispositivos es necesario incluir el meta del viewport.

Comentarios en HTML

Los comentarios cortos deberían ser como este:

Y los largos como este:

Hoja de estilos CSS

En el link no es necesario el el atributo type

Cargar JavaScript

No es necesario usar el atributo type.

Usa nombre de ficheros en minúscula

Los servidores linux distinguen entre mayúsculas y minúsculas, pero otros como los de Microsoft no.

Así que para que no haya confusión es mejor siempre poner todos los nombres de archivos en minúscula, y así evitar problemas.

Extensiones

  • Los ficheros de HTML deberían tener la extensión .html o .htm
  • Los ficheros de CSS deberían tener la extensión .css
  • Los ficheros de JavaScript deberían tener la extensión .js

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.