Etiquetas y semántica web

Los navegadores, tienen varias formas de acceder al código HTML de una página:

• Pulsando la combinación de teclas Ctrl + U. Te aparecerá el código fuente tal cuál lo recibe el navegador.

• Pulsando Ctrl + Shift + I y accediendo a la pestaña Elements, o simplemente haciendo clic derecho y seleccionar la opción Inspeccionar.

El documento esta formado por etiquetas, que son la base de HTML. Existen muchas etiquetas y cada una se utiliza para contener información y darle significado a dicha información, dependiendo de la etiqueta que se trate.

Estructura de una etiqueta

Una etiqueta está formada por una etiqueta de apertura, el contenido y una etiqueta de cierre.

La etiqueta de apertura indica al navegador qué tipo de elemento se va a interpretar, el contenido es la información que se muestra o se procesa, y la etiqueta de cierre señala dónde termina ese elemento.

<etiqueta>contenido</etiqueta>

En HTML no se puede utilizar cualquier palabra como etiqueta (como el ejemplo que utiliza la palabra «etiqueta»). En su lugar, existen una serie de etiquetas concretas, cada una de ellas con características propias.

Ejemplo de etiqueta

A continuación, utilizamos las etiquetas <p> y <strong> para crear un párrafo y resaltar la información más importante dentro del texto.

<p>Dentro de este texto, esta <strong>palabra</strong> es más importante que el resto.</p>

También se puede observar que se pueden anidar etiquetas (incluir etiquetas dentro de otras). Es algo que se hace continuamente en HTML y se convierte en algo habitual.

¿Qué es la semántica?

Una de las características más importante en HTML5 fue introducir información en un documento HTML5 de forma que sea semántico y no visual. Con esto se quiere decir que todos los aspectos visuales deben dejarse para el apartado de presentación, que se gestiona desde el lenguaje CSS.

En un documento HTML debe aparecer información correctamente individualizada, de modo que al leer una página comprendamos su significado, y si queremos cambiar la apariencia, lo hagamos a través de CSS. Esto es lo que se conoce como separación de la presentación del contenido.

A continuación, se muestra un layout semántico clásico de HTML5, representado en bloques, donde se puede observar cómo se organiza una página web de forma lógica y estructurada.

Ejemplo de semántica HTML

Un ejemplo donde se ve claramente este concepto es con la etiqueta <b> de HTML4 y anteriores. Dicha etiqueta se utilizaba para poner un texto en negrita:

Hola, quiero resaltar esta <b>palabra</b>.

En este caso en particular, se está utilizando una propiedad de presentación en el HTML, algo que no se debe hacer en HTML5. La misión de HTML5 es mantener sólo contenido e información semántica. Por esa razón, la forma de hacerlo en HTML5 es la siguiente:

Hola, quiero resaltar esta <strong>palabra</strong>.

En este nuevo ejemplo, se remplaza la etiqueta <b> (negrita, característica de presentación) por <strong>, una etiqueta que indica información semántica (importante, característica semántica).

De esta forma, en el HTML5 sólo se está añadiendo información particular sobre fragmentos de texto, y si queremos dotar de presentación visual, lo haremos por medio de CSS.

El objetivo de crear documentos HTML semánticos es que, aunque estamos acostumbrados a crear páginas para usuarios (o más concretamente, para navegadores), cada vez tendemos más a una Internet capaz de procesar información de forma autónoma. Ejemplo de ello son, por ejemplo, los robots o crawlers de los buscadores como Googlebot (el robot de búsqueda de Google) que es capaz de acceder a páginas web para analizar la información de la misma, entenderla e indexarla en su buscador.