Tecnología y Coaching para Emprendedores

Infografía: Estructura de un Documento HTML5 Bien Redactado

html5

Cuando veo un sitio web que me gusta, no puedo evitar mirar su código fuente. Cuando veo un código limpio y bien estructurado, entonces disfruto aprendiendo de la persona que lo ha escrito. Chris Coyier ha hecho una infografía en la que se ve cómo debe ser un documento HTML5 bien estructurado, que he traducido aquí para los que no domináis el inglés.

Redactar documentos HTML fácilmente legibles, sin errores de validación y con estilos bien aplicados no es algo tan sencillo como pueda parecer a simple vista. En esta infografía veremos un documento HTML5 a tomar como modelo cara a nuestros futuros trabajos.

html5

Documento HTML5

Veamos los puntos que hemos de tener en cuenta en un documento HTML5:

  • Doctype. HTML5 tiene el mejor DOCTYPE posible.
  • Título. El título es simple y limpio. Lo primero es el propósito de la página, luego un separador y después el título del site.
  • CSS. Sólo se utiliza una hoja de estilos (el tipo de media se declara dentro de cada stylesheet). Hoy en día ya no se da soporte a IE6.
  • Body. Se aplica un ID al body para permitir dar estilo de manera única sin más código.
  • Bloques descriptivos. header, section, article, aside… palabras muy descriptivas en inglés que permiten mucho mejor que los divs saber a qué se refieren.
  • Jerarquía. Las etiquetas de titulares se utilizan para contenido y siguen una jerarquía determinada.
  • Atributos de imagen. Las imágenes incluyen texto alternativo, principalmente para personas con discapacidades visuales, así como para validar. También se incluye el ancho y alto para mejorar la eficiencia de renderizado.
  • Listas. Se utilizan las etiquetas de lista adecuadas: desordenadas, ordenadas y las menos utilizadas listas de definición.
  • Clases semánticas. Más allá de utilizar nombres descriptivos, se utilizan términos semánticos. Así todos sabemos que “col” se refiere a columna.
  • Clases. Las clases se emplean en base a la reusabilidad, ya que podemos llamar a una clase más de una vez .
  • Ids. Se utilizan cuando sólo se aplica el estilo una vez y no hay otra manera mejor de hacerlo sin IDs.
  • JavaScript. Se carga jQuery desde el servidor de Google. Sólo se utiliza un documento JavaScrippt, lo que optimiza el tiempo de carga.
  • Indentación. Se utilizan los sangrados y los espacios para indicar relaciones y facilitar la lectura del código.
  • Ruta del archivo. El contenido local utiliza rutas de archivo relativas para mejorar la eficiencia. Se utilizan rutas absolutas con contenidos sindicados.
  • Includes. Los contenidos que se utilizan en varias páginas se insertan vía includes. No hace falta que sea PHP, como es el caso en el ejemplo.
  • Caracteres especiales. Si hay caracteres especiales, se codifican.
  • Dinámico. Lo que es dinámico se mantiene dinámico.
  • Comentarios. Los comentarios facilitan la revisión en aquellos sitios que no es tan evidente a qué se refieren, facilitando así la revisión del código.
  • Estilo. Todo en este documento HTML5 tiene un estilo definido.
  • Código válido. El código de este documento HTML5 sigue todos los estándares de la W3C, validando por completo.

Esta infografía se realizó en el 2009, por lo que aún contiene referencias a IE6. Hoy en día prácticamente nadie da soporte a este navegador, si lo que queréis evitar es que se muestre la página en IE6, os recomiendo este script.

¿Te ha gustado este artículo? Deja un comentario.

mi firma

Comentarios

  • Frozen_Blast
    Responder

    Gracias por compartir y traducir la infografia, sobre todo para las personas que no sabemos mucho de Ingles

  • wan
    Responder

    Esto es justo lo que estaba buscando para estandarizar todo, recien comienzo a desarrollar en Html5 y tenia algunas dudas, porque he utilizado Dreamweaver CS6 y no respetar esta jerarquia de desarrollo. Gracias por el aporte.

    • Sandra

      Hola Wan, yo la verdad es que detesto Dreamweaver, no me gusta nada el código que genera, prefiero invertir más horas, pero hacer un código semántico:)


¿Y tú qué opinas? Deja un comentario...