Técnicas para optimizar código HTML

In: Articulos Home|Desarrollo Web

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.

<body id=”home”>

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.

<body id=”home”>

<div id=”contenedor”>

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;” />.

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

Avatar

Pablinho

February 9th, 2009 at 7:56 pm

Me parece muy intertesante el #2 ( los otros ya los aplico ).
Proximo sitio q haga voy a probar esta tecnica.
Gracias.

Avatar

Pablinho

March 4th, 2009 at 11:43 pm

Por hay encontre esta pagina q habla del tema pero con mayor detalle.

http://csswizardry.com/web-design+/

Avatar

IngVillamizar

March 12th, 2009 at 5:57 am

Pablinho, Muchas gracias por el enlace 🙂

Avatar

Gabriel

March 2nd, 2011 at 3:33 am

Gracias por la información. Me ha aclarado muchas dudas y errores que estoy cometiendo.

Avatar

JhonJ|droid4pro

August 20th, 2011 at 2:27 pm

Gracias amigo por la informacion no sabia nada de esta optimizacion sera bueno aplicarlo..

Comentarios:

Suscripcion a Newsletter:

Sobre este blog ...

He abierto este blog para brindar información sobre desarrollo y diseño web principalmente. Espero que la información que les presente aquí les sea útil de alguna forma. Ah tengo cuenta de twitter en @alexanderv33