La Guía de Estilo en HTML que deberías de seguir para tener un 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

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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

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