El término "web semántica" se utiliza ahora de forma casi inflacionista. Sin embargo, mucha gente ni siquiera sabe en qué consiste esta tan cacareada semántica. En realidad es bastante sencillo: gracias a la semántica, se puede extraer la información necesaria/deseada de enormes cantidades de datos.
Un ejemplo concreto demostrará la importancia de la semántica. Las fotos digitales son una gran cosa. Pueden presentarse al mundo entero a través de Internet en cuanto se toman. Lo que se aplica en el ámbito privado hace tiempo que se ha impuesto en el contexto profesional. Agencias de fotografía, museos, bibliotecas y fotógrafos ofrecen fotos, cuadros o incluso versiones digitales de valiosos documentos a través de bases de datos de imágenes profesionales. En los sitios web correspondientes hay máscaras de búsqueda que pueden utilizarse para buscar en la plataforma. El ejemplo más popular de buscador de imágenes en la Web 2.0 es sin duda Flickr.
Cualquiera que ya haya utilizado este tipo de buscadores de imágenes conoce sus limitaciones: Por ejemplo, si introduce el término Kohler, se le mostrarán fotos de una gran variedad de ámbitos. El buscador de imágenes de Yahoo! presenta fotos de una teta de carbón, de un tenista llamado Kohler y del ex canciller Helmut Kohl.
Llegados a este punto, se pone de manifiesto una de las desventajas de la WWW clásica: aunque la información proporcionada puede ser entendida actualmente por los humanos, no puede ser interpretada correctamente por las máquinas - en este ejemplo, los motores de búsqueda.
Las máquinas sólo pueden leer la información si está realmente disponible. Y éste es precisamente el punto crucial en el que entra en juego la semántica.
Estructuración de documentos
En las versiones anteriores de HTML no había forma de estructurar los documentos semánticamente. Si se quería estructurar una página web, sólo se disponía de encabezamientos y párrafos de texto. He aquí un ejemplo típico de la estructura de una página web clásica:
<h1> Capítulo </h1> <p> Párrafo </p> <h2> Subcapítulo </h2> <p> Párrafo en subcapítulo </h2> <h3>
HTML proporciona los elementos h1 a h6 para estructurar el documento. Sin embargo, no se puede crear una estructura anidada realmente profunda con estos elementos. Esto es porque un elemento h7 o h8 no se proporciona en HTML. Aquí es exactamente donde entra HTML5 e introduce algunos elementos de estructuración adicionales.
- artículo
- aparte
- diálogo
- figura
- pie de página
- cabecera
- navegación
- sección
Estos elementos se presentan en este tutorial. Antes, sin embargo, una nota: no esperes nada milagroso de estos elementos desde el punto de vista visual. Es necesario utilizar CSS para garantizar que los sitios web basados en elementos semánticos también tengan un aspecto atractivo. Y, como sabes, llegaremos a eso más adelante.
Ya conoces algunos elementos semánticos, aunque a primera vista no tengan nada que ver con la semántica. He aquí un ejemplo de un elemento de este tipo:
<progress min="0" max="100" value="40"></progress>
Sobre él se genera una barra de carga. (Por cierto, el elemento progress ya se ha presentado en detalle en esta serie).
Este elemento deja claro lo poco que cuesta crear contenidos que puedan asignarse a un contexto correspondiente. El software puede reconocer inmediatamente que se trata de una barra de carga. Sin embargo, este no es el caso de las soluciones que se basan en JavaScript para generar una barra de carga.
Estructuras semánticas de elementos
En los documentos HTML "normales", los elementos div estructuran el contenido. Se asignan clases o ID a estos elementos para que puedan formatearse mediante CSS. Este principio también se utiliza en HTML5. De hecho, un estudio realizado por Google ha demostrado que en muchos documentos se utilizan siempre las mismas clases.
Un ejemplo:
<div class="nav"></div>
Muchos desarrolladores utilizan nav, por ejemplo, para acomodar la navegación dentro de este elemento div. En HTLM5, sin embargo, tiene este aspecto:
<nav>contenido</nav>
El elemento nav deja claro que no es sólo una lista de hipervínculos. De hecho, este elemento describe un bloque de contenido que contiene información sobre la navegación del sitio web en un contexto muy específico.
Estructuración moderna
¿Cómo suele ser la estructura de un documento HTML? Básicamente, es similar, independientemente del contenido que tenga finalmente la página. Suelen incluirse las siguientes áreas
- Cabecera
- Menú principal
- Área de contenido
- Zona de pie de página
Un sitio web que utilice elementos div para estructurarse podría tener el siguiente aspecto:
<body> <div id="header"> <div id="logo">Logo</div> <div id="search">Buscar</div> <div id="nav">Menú principal</div> </div> </div> <div¡div id="content"> <h1>Este es el contenido</h1> <div class="section"> <h2>Subtítulo</h2> <h3>Sección</h3> <!¡-- Este es el contenido --> </div> <div class="section"> <h2>Subtitular</h2> <!-- Aquí está el contenido --> </div> </div> <div id="sidebar"> <div id="subnav">Submenú</div> </div> <div id="footer">Área de pie de página</div> </body>
Puede que ya estés familiarizado con este tipo de construcciones div. Para que la estructura sea lógica para los desarrolladores, asignan las clases o ID correspondientes a las áreas div, que tienen nombres "parlantes". Por ejemplo, para los desarrolladores está claro que el área div con el ID footer contiene el contenido que pertenece al área footer de la página. El problema es que los nombres pueden dar una idea de la estructura del sitio web, pero éste dista mucho de estar estructurado semánticamente. Aquí es exactamente donde entran en juego los nuevos elementos HTML. Por primera vez, permiten estructurar realmente documentos y sitios web.
Eche un vistazo al siguiente documento HTML5 para entenderlo mejor:
<body> <header> <div id="logo">Logo</div> <div id="search">Búsqueda</div> <nav>Menú principal</nav> </header> ¡<articulo> <h1>Este es el contenido</h1> <sección> <h2>Subtítulo</h2> <h3>Sección</h3> <!¡-- Este es el contenido --> </section> <section> <h2>Subtitular</h2> <!-- Este es el contenido --> </section> </article> <aside> <nav>Submenú</nav> </aside> <footer>Área de pie de página</footer> </body>
Por supuesto, entraré en más detalle sobre los elementos utilizados aquí en los siguientes tutoriales. Sin embargo, un vistazo a este ejemplo ya muestra dónde están las ventajas de los elementos utilizados. Por fin puedes etiquetar las áreas de la página con elementos destinados específicamente a ellas. Todo lo que pertenece al área de cabecera de la página puede integrarse en un elemento de cabecera.
Además, ahora se dispone de elementos de sección y artículo, que pueden utilizarse para estructurar mucho mejor el contenido real de la página. Como puede ver, merece la pena echar un vistazo detallado a las posibilidades que ofrece HTML5 con respecto a la estructuración semántica de los documentos.
