El HTML semántico aporta grandes beneficios en nuestra Web, en cuanto a usabilidad, accesibilidad, posicionamiento en buscadores y también a la hora de modificar el código.

¿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. El cual nos permite dar un significado al contenido que escribimos.

Algunas etiquetas HTML serán contenido, como imágenes, películas Flash, metadata, etc. Pero la mayoría de las etiquetas o tags tendrán como finalidad brindar estructura al contenido. Las etiquetas HTML sirven para organizar y dar significado al contenido, usandolo de manera coherente y significativa.

Ejemplos de uso del Marcado Semántico:

  • Las etiquetas <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, hay muchos que utilizan las eqtiquetas </p> para generar espacios.
  • Las etiquetas <b> y </b> (para la negrita o bold) y <i> e </i> (para la cursiva o itálica) no deberían usarse nunca, porque son propios del formateo de texto, y no de la estructura del contenido. No estamos dando significado alguno a ese texto, simplemente lo estamos modificando su formato. En cambio <strong> y </strong> (gruesa) y <em> y </em> (de énfasis, en inglés) son apropiadas. Obtendremos el mismo resultado pero le darán significado a la estructura del contenido.

Separa siempre los estilos del contenido:

En el HTML no se deben aplicar los estilos, ya que para eso existen las hojas de estilos CSS, que se encargan de este trabajo. De esta manera nuestro código estará “más limpio”

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

  • Facilidad: Conseguiremos un código más limpio. Mucho más fácil de leer y modificar. Además favorece la colaboración entre desarrolladores, a la hora de que una desarrollador tenga que implementar dicha plantilla le será mucho más fácil de trabajar y la carga será menor, ya que el peso de las páginas es menor.
  • Accesibilidad: Aplicando la semántica a nuestro código HTML, facilitara de manera muy importante en conseguir que nuestra página Web sea accesible, y más facil de adaptarla a dichas prioridades.
  • 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 y en el aumento 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, móviles, spiderbots, etc. Con el auge del open-source y los usuarios que crean aplicaciones, widgets, etc. que obtienen contenido de nuestra página, la información será mejor comprendida, lo que también implica un beneficio para nosotros.

Esto es solo una pequeña introdución a la semántica HTML. Siempre surgen dudas de cual es el marcado correcto, ya que nos podemos encontrar con diferentes formas de darle el significado correcto al contenido de la página. Por ejemplo la títpica pregunta que nos hacemos: “¿Esto son dos párrafos o una lista de dos elementos?”. Más adelante se subirán nuevos artículos con ejemplos de uso concretos para diferentes etiquetas o tags.

Os dejo un enlace para comprender el significado de las etiquetas HTML y el uso correcto de ellas para marcar el contenido de nuestra Web: Técnicas de uso HTML.