Guía de estilo HTML y convenciones de codificación

Un código HTML coherente, limpio y ordenado facilita que otros lean y comprendan tu código. A continuación, se incluyen algunas pautas y consejos para crear un buen código HTML.

Declarar siempre el tipo de documento

Siempre declara el tipo de documento como la primera línea de su documento.

El tipo de documento correcto para HTML es:

<!DOCTYPE html>

Usar nombres de elementos en minúsculas

HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los elementos.

Sin embargo, recomendamos usar nombres de elementos en minúsculas, porque:

  • Mezclar nombres en mayúsculas y minúsculas se ve mal
  • Los desarrolladores normalmente usan nombres en minúsculas
  • Minúsculas se ve más limpio
  • Las minúsculas son más fáciles de escribir

Ejm

<body>
<p>This is a paragraph.</p>
</body>

Cerrar todos los elementos HTML

En HTML, no es necesario cerrar todos los elementos (por ejemplo, el elemento <p>). Sin embargo, recomendamos encarecidamente cerrar todos los elementos HTML.

Ejm

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

Usar nombres de atributos en minúsculas

HTML permite mezclar letras mayúsculas y minúsculas en los nombres de los atributos. Sin embargo, recomendamos usar nombres de atributos en minúsculas, porque:

  • Mezclar nombres en mayúsculas y minúsculas se ve mal
  • Los desarrolladores normalmente usan nombres en minúsculas
  • Limpiador de minúsculas
  • Las minúsculas son más fáciles de escribir

Ejm

<a href="https://websarrolladores/html/">Visita nuestro tutoríal HTML
</a>

Acotar siempre los valores de atributo

HTML permite valores de atributo sin comillas.

Sin embargo, recomendamos citar los valores de los atributos porque:

  • Los desarrolladores normalmente citan valores de atributos
  • Los valores cotizados son más fáciles de leer
  • DEBES usar comillas si el valor contiene espacios

Ejm

<table class="striped">

Especifica siempre alt, ancho y alto para las imágenes

Especifica siempre el atributo alt para las imágenes. Este atributo es importante si la imagen por alguna razón no se puede mostrar.

Además, define siempre el ancho y el alto de las imágenes con los atributos width y height. Esto reduce el parpadeo, porque el navegador puede reservar espacio para la imagen antes de cargarla.

Ejm

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Espacios y signos iguales

HTML permite espacios alrededor de los signos iguales. Pero sin espacio es más fácil de leer y agrupa mejor las entidades.

Ejm

<link rel="stylesheet" href="styles.css">

Evita las líneas de código largas

Cuando se usa un editor HTML, NO es conveniente desplazarse hacia la derecha y hacia la izquierda para leer el código HTML.

Intenta evitar líneas de código demasiado largas.

Líneas en blanco y sangría

No agregues líneas en blanco, espacios o sangrías sin una razón. Para facilitar la lectura, agrega líneas en blanco para separar bloques de código lógicos o grandes. Para facilitar la lectura, agrega dos espacios de sangría. No utilices la tecla de tabulación.

Ejm

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
 Area, and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Nunca omitas el elemento <title>

El elemento <title> es obligatorio en HTML.

¡El contenido del título de una página es muy importante para la optimización de motores de búsqueda (SEO)! Los algoritmos de los motores de búsqueda utilizan el título de la página para decidir el orden cuando se enumeran las páginas en los resultados de búsqueda.

El elemento <title>:

  • define un título en la barra de herramientas del navegador
  • proporciona un título para la página cuando se agrega a favoritos
  • muestra un título para la página en los resultados del motor de búsqueda
  • Por lo tanto, intenta que el título sea lo más preciso y significativo posible:

Ejm

<title>HTML Style Guide and Coding Conventions</title>

¿Omitiendo <html> y <body>?

Una página HTML se validará sin las etiquetas <html> y <body>.

Ejm

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Sin embargo, recomendamos encarecidamente agregar siempre las etiquetas <html> y <body>. Omitir <body> puede producir errores en navegadores antiguos. Omitir <html> y <body> también puede bloquear el software DOM y XML.

¿Omitir <head>?

La etiqueta HTML <head> también se puede omitir.

Los navegadores agregarán todos los elementos antes de <body>, a un elemento <head> predeterminado.

Ejm

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Sin embargo, recomendamos usar la etiqueta <head>.

¿Cerrar elementos HTML vacíos?

En HTML, es opcional cerrar elementos vacíos.

Ejm

<meta charset="utf-8">

Ejm 2 (también permitido)

<meta charset="utf-8" />

Si esperas que el software XML / XHTML acceda a tu página, mantén la barra de cierre (/), ya que es necesaria en XML y XHTML.

Agregar el atributo lang

Siempre debes incluir el atributo lang dentro de la etiqueta <html> para declarar el idioma de la página web. Esto está destinado a ayudar a los motores de búsqueda y navegadores.

Ejm

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Meta datos

Para garantizar una interpretación adecuada y una correcta indexación del motor de búsqueda, tanto el idioma como la codificación de caracteres <meta charset = “charset”> deben definirse lo antes posible en un documento HTML.

Ejm

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

Configuración de viewport (ventana gráfica)

La ventana gráfica (viewport) es el área visible del usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en una pantalla de computadora.

Debes incluir el siguiente elemento <meta> en todas tus páginas web.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.

La parte width = device-width establece el ancho de la página para seguir el ancho de la pantalla del dispositivo (que variará según el dispositivo).

La parte initial-scale = 1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.

Comentarios HTML

Los comentarios cortos deben escribirse en una línea, como esta:

Ejm

<!-- This is a comment -->

Los comentarios que abarcan más de una línea deben escribirse así:

Ejm

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

Los comentarios largos son más fáciles de observar si están sangrados con dos espacios.

Usar hojas de estilo

Utiliza una sintaxis simple para vincular a hojas de estilo (el atributo type no es necesario):

Ejm

<link rel="stylesheet" href="styles.css">

Las reglas CSS cortas se pueden escribir comprimidas, así:

Ejm

p.intro {font-family:Verdana;font-size:16em;}

Las reglas de CSS largas deben escribirse en varias líneas:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Coloca el soporte de apertura en la misma línea que el selector
  • Usa un espacio antes del soporte de apertura
  • Usa dos espacios de sangría
  • Utiliza punto y coma después de cada par propiedad-valor, incluido el último
  • Solo usa comillas alrededor de los valores si el valor contiene espacios
  • Coloca el corchete de cierre en una nueva línea, sin espacios iniciales

Cargar Javascript en HTML

Utiliza una sintaxis simple para cargar scripts externos (el atributo type no es necesario):

Ejm

<script src="myscript.js">

Acceder a elementos HTML con JavaScript

El uso de código HTML “desordenado” puede provocar errores de JavaScript. Estas dos declaraciones de JavaScript producirán resultados diferentes:

Ejm

getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";

Usar nombres de archivo en minúsculas

Algunos servidores web (Apache, Unix) distinguen entre mayúsculas y minúsculas en los nombres de archivo: no se puede acceder a “london.jpg” como “London.jpg”.

Otros servidores web (Microsoft, IIS) no distinguen entre mayúsculas y minúsculas: se puede acceder a “london.jpg” como “London.jpg”.

Si usas una combinación de mayúsculas y minúsculas, debes tener en cuenta esto.

Si pasas de un servidor que no distingue entre mayúsculas y minúsculas a un servidor que distingue entre mayúsculas y minúsculas, ¡incluso los pequeños errores romperán su web!

Para evitar estos problemas, utiliza siempre nombres de archivo en minúsculas.

Extensiones de archivo

Los archivos HTML deben tener una extensión .html o .htm. Los archivos CSS deben tener una extensión .css. Los archivos JavaScript deben tener una extensión .js.

¿Diferencias entre .htm y .html?

¡No hay diferencia entre las extensiones de archivo .htm y .html!. Ambos serán tratados como HTML por cualquier navegador web y servidor web.

Nombres de archivo por defecto

Cuando una URL no especifica un nombre de archivo al final (como “https://websarrolladores.com/”), el servidor simplemente agrega un nombre de archivo predeterminado, como “index.html”, “index.htm”, ” default.html “o” default.htm “.

Si tu servidor está configurado sólo con “index.html” como nombre de archivo predeterminado, tu archivo debe llamarse “index.html” y no “default.html”.

Sin embargo, los servidores se pueden configurar con más de un nombre de archivo predeterminado; normalmente, puede configurar tantos nombres de archivo predeterminados como desee.