El otro día hubo un pequeño debate en la lista Usable y Accesible sobre cómo estructurar correctamente un listado de resultados (por cierto, somos pocos miembros en la lista, estaría genial poder contar con gente nueva).
Del cruce de emails pude sacar varias conclusiones:
- No te fíes de los grandes pero tenlos en cuenta: Si pensamos que el listado de resultados de Google es correcto en HTML nos equivocamos. El motivo es que dentro de una lista introduce encabezados
h3y semánticamente no es correcto. Los encabezados en HTML deben ser utilizados para encabezar (valga la rebuznancia) grandes secciones de contenido. - Lista ordenada: en un listado de resultados aquellos que aparecen más arriba se les presupone una mayor relevancia o se acercan más a aquello que íbamos buscando. Por tanto utilizaremos
olpara listar nuestros resultados.
En xHTML
Veamos como quedaría la cosa. Por supuesto sobra decir que lo siguiente no es más que una propuesta.
<div id="search-results" class="list">
<h3>Listado de resultados</h3>
<ol>
<li class="result">
<a href="#" title="Ir al resultado 1">Título del resultado</a>
<p>Resumen del resultado</p>
<dl class="details">
<dt>URL</dt>
<dd>http://...</dd>
</dl>
</li>
<li class="result">...</li>
</ol>
</div>
En HTML5
Ya que estamos, vamos a ver cómo quedaría en la nueva revisión del lenguaje de marcado.
<div id="search-results">
<h1>Listado de resultados</h1>
<ol>
<li class="result">
<article>
<header>
<h1><a href="#" title="Ir al resultado 1">Título del resultado</a></h1>
</header>
<p>Resumen del resultado</p>
<footer>
<dl class="details">
<dt>URL</dt>
<dd>http://...</dd>
</dl>
</footer>
</article>
</li>
<li class="result">
...
</li>
</ol>
</div>
- Un momento, ¡has hecho trampa! ¡Hay un h1 dentro de una lista!
- No es trampa, y me explico.
En HTML conceptualmente no debemos incluir cabeceras dentro de listados. Sin embargo, dándole un repaso al borrador de HTML5 de la W3C todo queda mucho más claro:
- Dentro de una lista se espera flow content y article está considerado como tal. Con lo cual, dentro de una lista podemos meter
articles - Las cabeceras sirven para encabezar una unidad de contenido (sea
article,aside,navosection).
Con lo cual, según la especificación dada, el código es correcto. Es más, si copiáis y pegáis el código de arriba en el validador de la W3C, incluyendo el DOCTYPE, etiquetas html, head, y body, veréis que valida a la perfección.
Obviamente no es la única forma de mostrar un listado de resultados, pero nos sirve para la mayoría de los casos haciendo algún que otro ajuste según vuestras necesidades. Espero que os resulte de ayuda.