Técnicas para optimizar código HTML

7 Dec 2008

A continuación les quiero compartir una serie de tips, consejos o técnicas para conseguir un código HTML más limpio, más fácil de entender, y más amigable a los motores de búsqueda. Aca están las técnicas para optimizar código HTML:

1. Declarar el DOCTYPE correctamente: Declarar esta parte del código HTML correctamente permite que la página sea valdidada, y adicionalemente le indica a los motores de búsqueda cómo deben mostrar la página web. Algo que una simple etiqueta <html> no consigue.

<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

2. Ubicar un ID para la etiqueta Body: Ubicar un ID para la etiqueta Body permite crear propiedades CSS que sean únicas para una página en particular. Por ejemplo, si yo quiero que la etiqueta H2 sea diferente en mi página principal que en las páginas interiores del sitio, yo puedo definir en el archivo CSS lo siguiente: #home h2 {} para lograr esto y no afectar la forma en la que se visualizan las etiquetas H2 en el resto del sitio.

3. Ubicar un DIV principal para todo el contenido. Ubicar todo el contenido en un ID principal da un control todal sobre la forma en la que se quiera manejar el aspecto de una página web.

4. Una sección Head corta: Establecer el título de la página, enlazar los archivos externos al sitio. No empezar a ubicar código innecesario en esta etiqueta.

<head>
<title>Desarrollo y Diseño web en Colombia</title>
<meta http-equiv=”Content-type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”screen, projection” />
</head>

5. Menú declarado semánticamente:

<div id=”menu” >
<ul>
<li><a href=”index.php” >Home</a></li>
<li><a href=”productos.php” >Productos</a></li>
<li><a href=”contacto.php” >Contacto</a></li>
</ul>
</div>

Si se quiere tener un poco más organizado el código HTML, se puede declarar en un archivo html aparte el menu, e incluirlo en el archivo principal con la función include_once de php:

<?php include_once(“menu.html”) ?>

6. Ubicar el contenido más importante al inicio. Es recomendable que el contenido html más importante esté primero que el resto del contenido. por ejemplo:

<?php include_once(“noticias_principales.html”) ?>

7. Uso de CSS y no tablas. El código CSS y el uso de hojas de estilos permite que el código HTML sea más ligero, y más entendible por los motoeres de búsqueda. Adicionalmente, es mucho más sencillo de actualizar y de realizar cambios.

8. No usar estilos directamente en el código. Se debe hacer uso de una hoja de estilos única y externa al archivo html. Es decir, se debe evitar a toda costa el uso e etiquetas con estilos como por ejemplo: <h1 style=”padding-top:20px;” />.

3 Comentarios en Técnicas para optimizar código HTML