Acerca de la semántica web

lunes, 20 de agosto de 2012


En un contexto de desarrollo web, la semántica hace referencia a un marcado semántico, es decir, a un marcado utilizado por su significado y utilidad.

El marcado empleado por su utilidad se sirve de elementos de encabezado (por ejemplo, del h1 al h6 ) para marcar encabezados, elementos de párrafo ( p ) para párrafos, listas ( ul , ol , dl , datalist o menu ) para listas, tablas para tablas de datos, etc.

Decir que fueron útiles hace años, cuando la web estaba formada solamente por algunos sitios web y los autores utilizaban las tablas para codificar sitios enteros, las celdas de tabla o párrafos para los encabezados, y pensaban en otras formas creativas para conseguir el diseño que buscaban. (La verdad es que esos autores tenían menos instrumentos a su disposición de los que tienen los autores hoy en día. Había ocasiones en las que codificar un diseño de tres columnas era realmente imposible sin utilizar tablas o imágenes.)

Sin embargo, hasta ahora los autores no siempre tenían claro qué elemento HTML utilizar para cada unidad funcional de la página HTML, y las especificaciones "activas" como HTML 5 requieren que los autores tengan en cuenta qué elementos de marcación evolucionarán, lo que hace necesario el uso de elementos alternativos "sin sentido", como div o span .

Para saber qué elementos ofrece HTML y cuál es su significado, es necesario consultar las especificaciones de HTML. Existen índices con todas las especificaciones y elementos HTML que simplifican un poco la consulta y la búsqueda del significado de un elemento. Sin embargo, en muchos casos puede que sea necesario comprobar qué dice la especificación HTML .

Por ejemplo, fijémonos en el elemento de code :

El elemento code representa un fragmento de código informático. Podría ser el nombre de un elemento XML, un nombre de archivo, un programa informático o cualquier otra cadena que un ordenador pueda reconocer.

Semántica controlada por autor

El significado de los elementos HTML está definido por las especificaciones HTML, pero el ID y los nombres de clase también pueden tener significado. Normalmente los ID y los nombres de clase, como los microdatos , están controlados por el autor, con la única excepción de los microformatos . (En este artículo no se tratan los microdatos ni los microformatos.)

El ID y los nombres de clase dan mucha libertad a los autores para trabajar con los elementos HTML. Hay algunas reglas prácticas básicas que se deben seguir para garantizar que esta libertad no comporte problemas:

Ventajas de utilizar un marcado semántico

Emplear el marcado tal como se debería utilizar, junto con un uso moderado de los ID y los nombres de clase funcionales, tiene muchas ventajas:

  • Es la forma profesional de trabajar.
  • Es más accesible.
  • Es más sostenible.
  • Casos especiales
Los elementos "neutros" (elementos con un significado ambiguo) y los elementos presentacionales son casos especiales.

div y span proporcionan un mecanismo genérico para estructurar los documentos. Se pueden utilizar siempre que no haya otro elemento disponible que coincida con lo que el contenido en cuestión representa.

Anteriormente, los elementos b , strong , i , y em se confundían con frecuencia. Los autores utilizaban b , e i para conseguir un resultado que tuviera un buen formato, y normalmente los reemplazaban por strong y em respectivamente. Sin ánimo de remover el pasado, HTML 5 da a los cuatro elementos una razón de ser del modo siguiente:

b "un fragmento de texto estilísticamente destacado de la prosa normal sin darle ninguna importancia adicional, como palabras clave en el resumen de un documento, nombres de producto en una reseña u otros fragmentos de texto cuya tipografía habitual sea la negrita" <p>Los componentes <b>laterales</b> e <b>inferiores</b> están gastados.
strong "contenido de gran importancia" <p><strong>Advertencia.</strong> Este calabozo es peligroso.
i "un fragmento de texto en una voz o tono diferentes o que destaca de otra forma de la prosa habitual, como una designación taxonómica, un término técnico, una frase hecha de otro idioma, un pensamiento, un nombre de barco u otra prosa cuya tipografía habitual sea la cursiva" <p>El término <i>contenido de la prosa</i> se ha definido anteriormente.
em "pone énfasis en el contenido" <p><em>Los gatos</em> son animales muy monos.

Por último, existen elementos que se utilizan puramente con fines de presentación. Estos elementos serán compatibles para siempre con los agentes (navegadores), pero deberían dejarse de utilizar porque el marcado presentacional no es sostenible y se tendría que realizar con hojas de estilo. Algunos de los más populares son:

  • center
  • font
  • s
  • u

Cómo saber si vas por buen camino

Una forma rápida de consultar la semántica de tu página y de comprobar cómo la interpretaría un lector de pantalla es desactivar CSS, por ejemplo utilizando la extensión de la barra de herramientas de Web Developer para Chrome y para Firefox . Aunque solamente sirve para identificar los problemas relacionados con el uso de CSS para transmitir significado, puede ser útil.

También hay otras herramientas, como el extractor de datos semánticos del W3C , que proporcionan indicaciones sobre el significado del código HTML.

Otros métodos van desde las revisiones por pares (prácticas recomendadas de codificación) hasta las pruebas de usuario (accesibilidad).

Algunas normas

Incorrecto Correcto Motivo 
<p class="heading">foo</p>
 
<h1>foo</h1>
 		Existen elementos destinados a los encabezados. 
<p><font size="2">bar</font></p>
 
<p>bar</p>

p { font-size: 1em; }
 		Cuesta mantener el marcado de presentación. 
<table>
  <tr>
    <td class="heading">baz</td>
  </tr>
  <tr>
    <td>scribble</td>
  </tr>
</table>
 
<h1>baz</h1>
<p>scribble</p>
 		Utiliza elementos de tabla para los datos tabulares. 
<div class="newrow">foo</div>
<div>1</div>
<div class="newrow">bar</div>
<div>2</div>
 
<table>
  <tr>
    <th>foo</th>
    <td>1</td>
  </tr>
  <tr>
    <th>bar</th>
    <td>2</td>
  </tr>
</table>
 		Utiliza elementos de tabla para los datos tabulares. 
foo bar.<br><br>baz scribble.
 
<p>foo bar.</p>
<p>baz scribble.</p>
 		Define los párrafos con elementos de párrafo, no con saltos de línea.

Escrito por , Senior Web Architect, Google Webmaster Team, Publicado por Javier Pérez , equipo de Calidad de búsqueda.