en código semántico, xhtml

Web 3.0: la web semántica

Siempre me encantó esa parte de la película «Airbag» donde «Pazos» (Manuel Manquiña) y «Fátima» (María de Medéiros) discuten a cerca de «el concepto». Bien yo espero dejarlo algo más claro que «Pazos» en cuanto a la semántica web.

Para abreviar, la web 3.0 es la evolución de la web a un estado superior de accesibilidad donde los datos cobran sentido para sistemas inteligentes capaces de manipular la información de forma mucho más eficiente. Esto se consigue gracias al buen uso de los estándares HTML y sus etiquetas, así como de formatos semánticos como el RDF o los microformatos.

Ya vimos que la estructura nos proporcionaba una base sólida, flexible y liviana para diseñar nuestras páginas. Mediante metáforas intenté explicar ese concepto que es generar «código estructural«. En resumidas cuentas no es más que una idea, un método de trabajo. Estructuramos nuestos contenidos mediante marcado puro, no contaminado por estilos.
Algo así:
<div id="cabecera">
<ul id="menu">
<li><a href="#">apartado1</a></li>
<li><a href="#">apartado2</a></li>
<li><a href="#">apartado3</a></li>
</ul>
</div>
<div id="contenido">
<h1>Título</H1>
<p>Contenidos...</p>
</div>
<div id="pie">soy el pie</div>

Este otro código también sería estructural:
<table width="200" border="1">
<tr id="cabecera">
<td><a href="#">apartado1</a></td>
<td><a href="#">apartado2</a></td>
<td><a href="#">apartado3</a></td>
</tr>
<tr id="contenido">
<td colspan="3">
<strong class="título">Soy un titulo</strong>
Mi contenido
</td>
</tr>
<tr id="pie">
<td colspan="3">
Yo soy el pie
</td>
</tr>
</table>

Como veréis no usamos marcado de presentación, todos los estilos se aplicarían a través de los id en una hoja de estilos. Eso implica que tengamos sólo estructura. Sin embargo, hay una diferencia considerable con el otro código. Carece totalmente de carga semántica actualización 24/11/2021: Su semántica es incorrecta pues deberíamos usar <table> exclusivamente para contido tabular.

La estructura es el método, la semántica «el Fin», nuestra meta. La idea no es validar el código para demostrar lo bien que sabemos maquetar. La idea es alcanzar niveles mínimos de accesibilidad (tema del que también hablaremos en este blog). Para ello es imprescindible que los tags que engloban nuestro código tengan implícito un valor semántico que dé significado específico a nuestros contenidos. Y ese es básicamente «el concepto».

Si nos fijamos en el menú, veremos que en nuestro primer código está definido como una lista de enlaces mientras que en el segundo está ubicado como contenido tabular, cosa que no es. Y lo mismo sucede con el título. Al aplicarle el tag <h1> le estamos diciendo que ese contenido es el título principal de la página.

El motivo de todo esto es que lectores de pantalla y otros dispositivos específicos para usuarios discapacitados o incluso muchos navegadores para dispositivos de pantalla pequeña, hacen uso de esa información para renderizar o sintetizar mediante voz cada contenido. Por no hablar del uso que hace el propio Google, así como el resto de buscadores, para indexar nuestros contenidos.

Dicho esto creo que queda clara la importancia de generar código semántico y el significado del propio concepto. Sin embargo, sentiros libres de preguntar cualquier duda que tengáis al respecto.

Un saludo y espero leeros por aquí.

Escribe un comentario

Comentario