Micaela 15 de febrero de 2010 a las 08.00
   Imprimir artículo
elWebmaster.com

Respetando la jerarquía en HTML


htmlLos encabezados pueden ser un tema difícil. En el artículo de hoy vamos a ver el uso efectivo de las etiquetas que designan los titulares.

Con una revisión rápida de la jerarquía de los encabezados de nuestro sitio conseguiremos una mejora tanto en usabilidad como en el ranking de los motores de búsqueda.

El tamaño no importa

Cuando primero comencé a aprender HTML, parecía lógico utilizar las etiquetas de título cuando deseaba fuentes grandes. Esto es un error común de novato. Para un diseñador de páginas web que acaba de empezar, los usos adecuados de las etiquetas H1- H6 pueden no ser tan obvios.

Estas etiquetas no deben utilizarse simplemente porque ofrecen variantes rápidas en los tamaños de fuente, este es un trabajo que vamos a dejarle al CSS. Esto permite al diseñador centrarse en hacer que el código sea relevante a los contenidos que debe mostrar.

headings-importance

Los encabezados tienen una misión mucho más importante en la semántica de un sitio web. Ellos ayudan a destacar la jerarquía de los contenidos. Vamos a aplicar esta idea de la jerarquía a este sitio de muestra:

heading-website-sample
¿Cómo organizar los titulares en el sitio de arriba? ¿Cuál es el elemento más importante para una página? ¿Cuáles son secundarios a otras piezas?

Aquí hay una interpretación de los encabezados de acuerdo con el contenido de la lista de arriba.

heading-website-sample-noted

No siempre existe una solución general a la organización de los encabezados del sitio. En realidad, se reduce a cuál es el contenido en el que deseas poner el foco, y cuál puede caer en el fondo.

Hacer un Esquema

Cuando se utiliza lógicamente, la jerarquía de cabecera debería formar un esquema.

¿Necesitas ayuda para visualizarlo? El validador HTML del W3C tiene una característica muy útil que arma un esquema basado en la jerarquía de etiquetas de cabecera. He aquí un ejemplo usando la página principal de Smashing Magazine.

Los títulos deben reflejar la estructura lógica del documento, no deben utilizarse simplemente para dar énfasis, o para cambiar el tamaño de la fuente.

Un inconveniente del servicio de esquema del W3C es que sólo funciona en documentos HTML válidos.

Afortunadamente, existe una alternativa para todos aquellos que no viven o mueren por la validación de la página con la barra de herramientas Web Developer para Firefox. En la barra de herramientas, vayan a Información> Ver Esquema del documento para obtener un esquema al que no le importa si has incluido una etiqueta ALT o no.

Diggea esa jerarquía

Digg es un ejemplo excelente de jerarquía de titulares bien arreglada, mientras se mantiene una página simple; sin necesidad de sobrecargarla. Incluso con grandes cantidades de contenido, la página principal de Digg sólo mantiene 3 niveles de profundidad.

digg-header-heirarchy

Cosechar los frutos

El arreglo adecuado de los titulares no es sólo una buena práctica idealista. Tiene algunas ventajas muy reales, especialmente cuando se trata de la optimización del motor de búsqueda.

Los motores de búsqueda serán capaces de rastrear e indexar tus páginas con mucha más eficacia si las etiquetas están ayudando a indicar las partes importantes. Con un arreglo inteligente de palabras clave, puedes aumentar los resultados de búsqueda para cualquier cantidad de temas.

Fuente: Build Internet


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. sergiomas dice:

    Yo siempre he creido en esa disposición de encabezados por ejemplo, pero con el tema SEO los H1 toman una importancia tal que hay que saltar un puesto todos los encabezados.

    Me explico:
    Dejando la home a un lado, la vista de un artículo en Smashing Magazine debería considerar colocar el
    H1 al título del artículo y no al de su identidad para resultar más relevante.

    Supongo que el HTML5 dispondrá un método más natural para el escalado de jerarquías.

  2. Nicolás Metri dice:

    Hola a todos,
    yo tengo mi sitio web y realmente nunca he trabajado en esto de los encabezados y etiquetas h1, h2 aunque la disposición de mi página estaría bastante adecuada a estas etiquetas. Sin embargo Google (el que más me interesa) tiene indexada muchas de mis páginas, estoy bastante satisfecho con la idexación. Me gustaría saber si imlementar esto de las etiquetas h1, h2 podría mejorar el posicionamiento de mis páginas en Google. En caso de que lo sea lo usaría sin dudas, ya que nunca está de más, pero si solo es últil para indexar entonces ya no me interesa tanto :)

    Son los mejores, siempre los leo y me encanta el Blog :)

    Saludos!

  3. Valentin Mari dice:

    Que buen artículo… Yo nunca utilize las etiquetas h1,2,3,4,5 y 6… Pensaba que eran “del viejo html”..
    Siempre use CSS para los titulos y encabezados… Buena data..

  4. fabiola dice:

    eh aca al veces encontramos lo q buscamos y bueno el webmaster es una ayuda eh antes ni sabia de elwebmaster pero gracias al Ing Fouré

  5. Fran dice:

    Buen artículo, los encabezados son una buena arma para que los buscadores lo tengan fácil y podamos darle una idea más exacta de lo que contiene nuestra página asi cómo cuales son los puntos más importantes.

    Aún así a veces los motores se los saltan y no resaltan estos elementos como deberian.

    Saludos

  6. Jose Miguel dice:

    Gracias por la informacion, hace poco que me entere que el tamaño del titulo era importante en el seo, y estaba un poco perdido, esto ha aclarado mis dudas.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder