Introducción al HTML Semántico

El HTML semántico trae grandes beneficios, en cuanto a usabilidad, accesibilidad, posicionamiento en buscadores y también a la hora de retocar o cambiar el código. En él los tags estructuran contenido pero a la vez se aplican de manera coherente con el significado del mismo. Es por esto que hoy en día todo desarrollador web debería apuntar a un HTML “semánticamente correcto”.

¿Qué es exactamente el HTML Semántico?

La semántica es el estudio del significado, cómo es creado y cómo se aplica a los signos. “¿Por qué x significa x? es una pregunta propia de la semántica.

HTML es el lenguaje que usamos para escribir páginas web. Es entendido por Navegadores Web estándares y docenas de otros tipos de user-agents como celulares, spider-bots, etc.

Ahora bien, HTML trabaja con dos tipos de elementos principales:

• Tags
• Contenido (texto)

Algunos tags serán contenido, como imágenes, películas Flash, metadata, etc. Pero la mayoría de los tags tendrán como finalidad brindar estructura al contenido.

Como ya dijimos, en HTML semántico los tags estructuran contenido pero a la vez se aplican de manera coherente con el significado del mismo.

Por ejemplo:

• Los tags <p> y </p> sólo deberían ser usados para indicar un párrafo (característica de la estructura). Nunca debería ser usado para agregar espacio. Nunca uses una serie de <p> para agregar esta finalidad.
• Los tags <b> y </b> (para la negrita o bold) y <i> y </i> (para la cursiva o itálica) no deberían usarse nunca, porque son propios del formateo de texto, no de la estructura del contenido. En cambio <strong> </strong> (gruesa) y <em></em> (de énfasis, en inglés) son apropiadas. Darán el mismo resultado pero le darán significado a la estructura del contenido.

Siempre separa el estilo del contenido.

El HTML nunca debería usarse para aplicar una forma de presentación, ese es el trabajo de los estilos CSS.

¿Por qué el HTML Semántico es mejor?

• Facilidad: Antes que nada es código “limpio”, prolijo. Mucho más fácil de leer y editar. Además favorece la colaboración entre desarrolladores, por ejemplo, al implementar código en una plantilla o aplicación web. Otra ventaja es que al usar menos código, las páginas se cargarán más rápido.
• Accesibilidad: Las páginas web no sólo tienen vida dentro del navegador. Al imprimir una página web con HTML Semántico se podrá usar un CSS para tal fin, manteniendo el aspecto del texto. Al usar un lector por voz, el énfasis se verá reflejado en el sonido.
• SEO: Los robots y spiders como Googlebot entienden mejor el HTML Semántico, por lo que nuestros sitios serán mejor indexados, lo que se reflejará en nuestro posicionamiento en los resultados y la ganancia de tráfico.
• Rediseño: Cuando el contenido está separado del estilo (usando CSS, por ejemplo), la estructura es mejor comprendida por user agents, incluyendo lectores de feeds RSS, celulares, spiderbots, etc. Con el auge del open-source y los usuarios que crean aplicaciones, widgets, etc. que levantan contenido de nuestra página, la información será mejor comprendida y por ende difundida correctamente, lo que también implica un beneficio para nosotros.

Este artículo es sólo un disparador, la idea es que todos comencemos a interiorizarnos en lo que es el HTML Semántico y sus beneficios.

Fuente: WebDesignFromScratch