1.- Siempre hay que declarar un ‘Doctype’
La declaración de un ‘Doctype’ siempre deberá de ir al inicio del código HTML. La declaración del ‘Doctype’ informa al navegador los estándares XHTML que se utilizarán en el documento para hacer la interpretación correcta del código y presentarlo como debe ser.
Recomiendo usar el ‘Doctype’ estricto. Algunos desarrolladores prefieren no utilizarlo porque es menos benevolente con los errores que los tipo transicional y suelto. Pero utilizando el tipo estricto nos aseguramos que siempre estaremos usando código acorde a los últimos estándares.
2.- Utiliza etiquetas de ‘Título’ con significado
La etiqueta <title> hace que la página sea más significativa y la hace más amistosa para los buscadores. Lo que introducimos en la etiqueta <title> es lo que Google utiliza para su lista de resultados.
3.- Usa Metaetiquetas descriptivas
Las Metaetiquetas descriptivas ayudan a que los robots de los buscadores obtengan mayor información acerca de las páginas.
La Metaetiqueta ‘Description’ (descripción)
Esta metaetiqueta describe el propósito principal de una página. Da un resumen del objetivo de la página y deberá ser diferente en cada página o sección. Google también utiliza el contenido de ésta y lo muestra en los resultados de busqueda.
Es importante no intentar saturar las descripciones, ya que los buscadores hoy en día son lo suficientemente inteligentes para detectarlo. Mejor hay que incluir contenido directo y concreto que impacte a los posible visitantes y les parezca atractivo.
Metaetiqueta ‘keywords’ (palabras clave)
Esta metaetiqueta incluye palabras separadas por comas que sean relevantes al contenido de la página y al igual que la metaetiqueta ‘description’, hay que mantenerla concisa y no saturarla.
4.- Utiliza Divs <div> para maquetar y dividir tu contenido
Considera dividir el contenido de tu página en secciones principales para organizar la información de la misma. Esto es el primer paso.
Realizando esto desde el comienzo garantiza un contenido ordenado y con una buena arquitectura de la información.
5.- Separa el contenido de la presentación
El código HTML contendrá la información, el código CSS la manera en que se presenta. Siempre hay que usar stilos separados y no en linea en conjunto con el HTML. Ésto ayudará para realizar cambios y actualizaciones de manera más eficiente.
6.- Minimiza y unifica CSS
Es común ver que un sólo sitio incluya más de una hoja de estilos (.css) para diferentes propósitos. Pero hay que recordar que cada archivo representa una solicitud HTTP, lo cual repercute directamente en el tiempo de carga de la página haciéndola más lenta.
La solución es minimizar y unificar estos archivos y terminar mejor con uno solo. Existen herramientas en linea para optimizar código CSS.
Recuerda que las referencias a las hojas de estilo van dentro de las etiquetas <head> y </head>.
7.- Minimiza, unifica y desplaza hacia abajo tu ‘javascript’
Al igual que con CSS, siempre hay que tratar de terminar con la menor cantidad de archivos externos de javascript y, adicionalmente, en la medida de lo posible, incluir el código que solicita el archivo javascript lo más cerca hacía el final del código html. Esto se debe a que no es posible hacer descargas en paralelo, lo que ocasiona que la página cargue lenta aparentemente si el comienzo de nuestro código html está saturado de llamadas a archivos externos.
8.- Usar las etiquetas de encabezados inteligentemente
Es importante aprender a utilizar las etiquetas <h1>…<h6> de manera jerarquica para asignar importancia a nuestro contenido y que éste sea clasificado adecuadamente.
9.- Utiliza la etiqueta html adecuada en el lugar adecuado
Hay que conocer a fondo las herramientas que tenemos a nuestra disposición en html y emplearlas adecuadamente, aquí algunos ejemplos:
Para denotar énfasis, debemos de usar <em> o <strong> en lugar de usar <i> o <b> que por cierto ya están decontinuadas.
Usar la etiqueta <p> para los párrafos adecuadamente y no abusar innecesariamente los saltos de linea <br />. Para agregar mayor espacio entre parrafos hay que ayudarnos de CSS usando propiedades como ‘padding’ o ‘margin’.
Las etiquetas de listas fueron creadas para complementar nuestra redacción, hay que usarlas.
- <ul> representa una lista desordenada, lo que indica que no hay una jerarquía en los elementos
- <ol> lista ordenada que implica un órden en sus elementos
- <dl> se para una lista de definiciones
10.- No abusar de las Divs
Evitar a toda costa terminar con un código lleno de <div> anidadas. Hay que usarlas cuando no haya otro elemento html que represente lo que necesitamos.
No hay que usar las DIVS como sustituto de elementos lineales para obtener elementos de bloque. En ese caso hay que utilizar elementos lineales apoyados en las propiedad ‘display: block’ de CSS.
Con esto concluímos esta primera parte. No se pierdan las 10 restantes.