Guía de estilos y convenciones de codificación HTML5

Los desarrolladores web a menudo no están seguros sobre la codificación de estilos y sintaxis a usar en HTML. Entre el 2000 y 2010, muchos desarrolladores web convirtieron HTML a XHTML. Con XHTML, los desarrolladores fueron forzados a escribir código valido y bien formado. HTML5 es un poco menos riguroso cuando se trata de validación del código.

Ser inteligente y prueba a futuro

El uso consistente de estilos hace más fácil entender tu HTML. En el futuro, programas como lectores XML quieran poder leer tu HTML. Usando una sintaxis bien formada y cercando a XHTML es inteligente. Siempre mantén tu código ordenado, limpio y bien formado.

Usar el correcto tipo de documento

Siempre se debe declarar el tipo de documento en la primera línea en el documento:

<!DOCTYPE html>

Sí se desea coherencia con las etiquetas en minúsculas, se puede usar también:

<!doctype html>

Usar nombres de elementos en minúsculas

El HTML5 permite mezclar letras mayúsculas y minúsculas en los nombres de elementos. Se recomienda usar nombres de elementos en minúsculas a razón de que en XHTML es requerido, es más fácil de escribir y luce más limpio.

<section>
  <p>Esto es un párrafo.</p>
</section>

Cerrar todos los elementos HTML

En HTML5, no es necesario cerrar todos los elementos como por ejemplo el elemento <p>. pero es recomendable cerrar todos los elementos.

<!-- Válido pero no recomendado -->
<section>
 <p>Esto es un párrafo.
</section>

<!-- Válido y recomendado -->
<section>
  <p>Esto es un párrafo.</p>
</section>

Cerrar todos los elementos HTML vacíos

En HTML5, es opcional cerrar los elementos vacíos pero es recomendable cerrarlos.

<!-- Permitido -->
<meta charset="utf-8">

<!-- Permito y recomendado -->
<meta charset="utf-8" />

El cierre con de elementos vacíos con "diagonal" es requerido en XHTML y XML. Sí espera que software acsese a la página, es buena idea mantener los cierres con "diagonales".

Usar nombres de atributos en minúsculas

HTML5 permite mezclar letras mayúsculas y minúsculas en los nombres de los atributos. Se recomienda usar letras minúsculas a razón de que en XHTML es requerido, es más fácil de escribir y luce más claro.

<!-- Permitido pero no compatible con XML ni XHTML -->
<div CLASS="menu">

<!-- Recomendado y compatible con XML y XHTML -->
<div class="menu">

Usar comillas en los valores de atributos

El HTML5 permite atributos sin comillas. Se recomienda el uso de comillas a razón de es más fácil de leer y debe usarse si el valor contiene espacios.

<!-- Esto no funciona porque el valor contiene espacios -->
<table class=table striped>

<!-- Funciona pero no es compatible con XML ni XHTML -->
<table class=striped>

<!-- Funciona y es compatible con XML y XHTML -->
<table class="striped">

Usar atributos en Imágenes

Siempre agregara el atributo alt a las imágenes. El atributo es importante cuando la imagen por alguna razón no es mostrado. También, siempre el ancho y alto. Esto reduce el parpadeo porque el navegador puede reservar espacio para la imagen antes de cargarla.

<!-- Funciona pero no es recomendado -->
<img src="algo.gif">

<!-- Funciona y es lo recomendado -->
<img src="algo.gif" alt="HTML5" style="width: 128px; height: 128px;">

Espacios y Signos de Igualdad

HTML5 permite los espacios alrededor de los signos igual (=), pero sin los espacios es más fácil de leer y agrupa mejor las entidades.

<!-- Funciona pero es confuso para leer -->
<link rel = "stylesheet" href = "styles.css">

<!-- Funciona y es fácil de leer -->
<link rel="stylesheet" href="style.css">

Evitar líneas de código largas

Cuando se usa un editor HTML, un inconveniente es desplazarse hacia a la derecha e izquierda del código HTML. Es recomendable tratar de evitar líneas de código mayor a 80 caracteres.

Líneas en blanco y Sangrías

No agregue líneas en blanco sin alguna razón. Para facilitar la lectura, agregue líneas en blanco para separar bloques de código largos y lógicos. También agregue dos espacios en blanco para sangrías y no utilice la techa tabulación. Pero no utilice líneas en blanco y sangrías innecesariamente. No es necesario dar sangría a cada elemento:

<body>

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nisi rutrum, 
vehicula lacus quis, sagittis urna. Suspendisse quis eros ante. Sed consectetur 
lectus nec tristique posuere.</p>

<!-- Ejemplo de Tabla -->
<table>
  <tr>
    <th>Nombre</th>
    <th>Descripción</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Descrición de A.</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Descrición de B.</td>
  </tr>
</table>

<!-- Ejemplo de Lista -->
<ul>
  <li>Letra A</li>
  <li>Letra B</li>
  <li>Letra C</li>
</ul>

</body>

Omisión de HTML y BODY

En HTML5, la etiqueta <html> y la etiqueta <body> puede ser omitida. El siguiente código se validara como HTML5:

<!doctype html>
<head>
  <title>Título de la Página</title>
</head>

<h1>Título</h1>
<p>Este es un Párrafo...</p>

Sin embargo, no se recomienda omitir las etiquetas <html> y <body>. La etiqueta <html> es la raíz del documento y es el lugar recomendado para especificar el lenguaje de la página:

<!doctype html>
<html lang="es-mx">

Es importante declarar el lenguaje para la accesibilidad de aplicaciones como lectores de pantalla y motores de búsqueda. Omitir la etiqueta <html> o <body> puede bloquear el software DOM y XML. Omitir la etiqueta <body> puede producir errores en versiones anteriores de Internet Explorer 9.

Omisión de HEAD

En HTML5, la etiqueta <head> puede ser omitida también. De forma predeterminada, los navegadores web agregan todos los elementos antes de <body> para un elemento <head>. Puede reducir la complejidad del HTML omitiendo la etiqueta <head>.

Sin embargo, no se recomienda omitir la etiqueta <head>. Omitir etiquetas no es familiar para los desarrolladores, se necesita tiempo establecerse como una guía.

Meta Data

El elemento <title> es requerido en HTML5. El título lo hace significativo. Para garantizar la correcta y adecuada interpretación en la indexación de los motores de búsqueda, tanto el lenguaje y la codificación de caracteres deben definirse lo antes posible en el documento.

<!dobtype html>
<html lang="es-mx">
<head>
  <meta charset="UTF-8">
  <title>Título de la Página</title>
</head>

Viewport

HTML5 introduce un método para que los diseñadores web tomen el control sobre la ventana gráfica, esto mediante la etiqueta <meta>. La ventana gráfica es el área visible del usuario de una página web. Esto varia dependiendo del dispositivo desde donde se visualiza, y será más pequeña en un teléfono móvil que en una pantalla de computadora. Se debe incluir el siguiente elemento <meta> para la vista en todas las páginas web.

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

Un elemento de vista gráfica <meta> da al navegador web instrucciones de como contralar las dimensiones y la escala de la página web.

La parte width=device-width especifica el ancho de la página para seguir el ancho de la pantalla del dispositivo, el cual varía dependiendo del dispositivo.
La parte initial=1.0 especifica el nivel del zoom inicial cuando la página es cargada por primera vez en el navegador web.

Hojas de estilos

Use sintaxis simple para los enlaces para las hojas de estilos. El atributo type es opcional.

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

Las reglas cortas pueden escribirse comprimidas como esta:

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

Las reglas largas deberían escribirse sobre múltiples líneas como estas:

body {
  background-color: lightgray;
  font-family: "Arial Black", Helvetica, sans serif;
  font-size: 16px;
  color: black;
}

Cargando Javascript en HTML

Use sintaxis simple para cargar scripts externos. El atributo type es opcional.

<script src="miscript.js">

Acceso a elementos HTML con Javascript

Como consecuencia del uso desordenado de estilos HTML puede dar como resultado errores de Javascript. Las siguientes dos declaraciones Javascript producirán diferentes resultados:

var objeto = getElementById("Demo");
var objeto = getElementById("demo");

Usar letras minúsculas para nombres de archivos

Algunos servidores web como Apache o Unix si diferencian entre mayúsculas y minúsculas para los nombres de archivos, es decir, london.jpg no hace referencia a London.jpg.

En otros servidores como Microsoft e IIS no diferencian entre mayúsculas y minúsculas para los nombres de archivos, es decir, london.jpg si hace referencia a London.jpg.

Si usa una mezcla de mayúsculas y minúsculas, debe ser extremadamente consistente en esto. Sí, se muda después a un servidor que no diferencia entre mayúsculas y minúsculas cualquier pequeña diferencia o error puede dejar de visualizarse el sitio web. Evite estos problemas usando siempre letras minúsculas para los nombres de archivos.

Las Extensiones de los Archivos

Las extensiones para los archivos HTML deben ser .html o .htm.
Las extensiones para los archivos CSS deben ser .css.
Las extensiones para los archivos Javascript deben ser .js.

Diferencias entre las extensiones .html y .htm

No hay diferencia entre las extensiones .html y .html. Ambos serán tratados como HTML por cualquier navegador web o servidor web.

Las diferencias son más que nada culturales:

La extensión .htm denota a los antiguos sistemas DOS en donde se limitaban a las extensiones a 3 caracteres.
La extensión .html denota a los sistemas operativos Unix en donde no tenían esta limitación.

Diferencias Técnicas en los servidores

Cuando una URL no especifica un nombre de archivo, es decir, la URL http://www.exasoluciones.com/html/ el servidor retorna el archivo por defecto. Regularmente los archivos por defecto son index.html, index.htm, default.html y default.htm.

Sí el servidor es configurado únicamente con index.html como nombre de archivo por defecto, el archivo debe ser nombrado index.html y no index.htm. Sin embargo, los servidores pueden ser configurados con más de un nombre de archivos por defecto, y normalmente se puede especificar tantos nombres de archivos por defecto como sea necesario.

De cualquier manera, la extensión completa para archivos HTML es .html, así que no hay razón para no usarla.