semanticas - Marcando una lista de resultados de búsqueda con semántica HTML5

semantica html5 ejemplos

Question

Hacer una lista de resultados de búsqueda (como en Google) no es muy difícil, si solo necesitas algo que funcione. Ahora, sin embargo, quiero hacerlo a la perfección, utilizando los beneficios de la semántica de HTML5. El objetivo es definir la manera de facto de marcar una lista de resultados de búsqueda que potencialmente podría ser utilizada por cualquier motor de búsqueda futuro.

Por cada golpe, quiero

• ordénalos aumentando el número
• mostrar un título seleccionable
• mostrar un breve resumen
• Muestra datos adicionales como categorías, fecha de publicación y tamaño del archivo.

Mi primera idea es algo como esto:

<ol>
<li>
<article>
<header>
<h1>
<a href="url-to-the-page.html">
The Title of the Page
</a>
</h1>
</header>
<p>A short summary of the page</p>
<footer>
<dl>
<dt>Categories</dt>
<dd>
<nav>
<ul>
<li><a href="first-category.html">First category</a></li>
<li><a href="second-category.html">Second category</a></li>
</ul>
</nav>
</dd>
<dt>File size</dt>
<dd>2 kB</dd>
<dt>Published</dt>
<dd>
<time datetime="2010-07-15T13:15:05-02:00" pubdate>Today</time>
</dd>
</dl>
</footer>
</article>
</li>
<li>
...
</li>
...
</ol>

No estoy realmente contento con el <article/> dentro de <li/> . En primer lugar, el resultado de búsqueda no es un artículo en sí mismo, sino un breve resumen de uno. En segundo lugar, ni siquiera estoy seguro de que se le permita poner un artículo dentro de una lista.

Tal vez las etiquetas <details/> y <summary/> son más adecuadas que <article/> , pero no sé si puedo agregar un <footer/> dentro de eso.

Todas las sugerencias y opiniones son bienvenidas! Realmente quiero que cada detalle sea perfecto.

Answer 1

Apuntar a una plantilla HTML5 "perfecta" es inútil porque la especificación en sí está lejos de ser perfecta, con la mayoría de los casos de uso prescritos para los nuevos elementos "semánticos", en el mejor de los casos, oscuros. Mientras su documento esté estructurado de manera lógica, no tendrá ningún problema con los motores de búsqueda (la mayoría de las nuevas etiquetas no tienen el menor impacto). De hecho, seguir la especificación de HTML5 a la letra, por ejemplo, usar etiquetas <h1> dentro de cada nuevo elemento de sección, puede hacer que su sitio sea menos accesible (por ejemplo, a lectores de pantalla). No te esfuerces por ser ''perfecto'' o cercano, porque no existe; HTML5 no está pensado para eso. Solo concéntrate en mantener tu marcado lógico y ordenado.

Answer 2

He encontrado que un buen recurso para HTML5 es HTML5Doctor . Consulte el archivo del artículo para ver las implementaciones prácticas de las nuevas etiquetas. No te importa una referencia completa, pero es lo suficientemente agradable como para introducirse en ella :)

Como se muestra en la página del elemento de pie de página, las secciones pueden contener pies de página :)

Answer 3

Lo marcaría de esta manera (sin utilizar ningún vocabulario o microformatos RDFa / microdatos; por lo tanto, solo uso lo que ofrece la especificación de HTML5):

<ol start="1">
<li id="1">
<article>
<h1><a href="url-to-the-page.html" rel="external">The Title of the Page</a></h1>
<p>A short summary of the page</p>
<footer>
<dl>
<dt>Categories</dt>
<dd><a href="first-category.html">First category</a></dd>
<dd><a href="second-category.html">Second category</a></dd>
<dt>File size</dt>
<dd>2 <abbr title="kilobyte">kB</code></dd>
<dt>Published</dt>
<dd><time datetime="2010-07-15T13:15:05-02:00">Today</time></dd>
</dl>
</footer>
</article>
</li>
<li id="2">
<article>
…
</article>
</li>
</ol>

atributo de start para ol

Si el motor de búsqueda utiliza la paginación, debe asignar el atributo de start al ol , de modo que cada li refleje la posición de clasificación correcta.

id para cada li

Cada li debe obtener un atributo de id , de modo que pueda vincularlo. El valor debe ser el rango / posición.

Uno podría pensar que la id debería darse al article , pero creo que esto sería incorrecto: el rango / orden podría cambiar por tiempo. No se refiere a un resultado específico sino a una posición de resultado.

Quitar el header

No es necesario si contiene solo el encabezado ( h1 ).

Agregue rel="external" al enlace

El enlace a cada resultado de búsqueda es un enlace externo (que conduce a un sitio web diferente), por lo que debe obtener el valor rel external .

Quitar nav

Los enlaces de categoría no son de navegación en el alcance del article . Así que quita la nav .

Cada categoria en un dd

Usaste:

<dt>Categories</dt>
<dd>
<ul>
<li><a href="first-category.html">First category</a></li>
<li><a href="second-category.html">Second category</a></li>
</ul>
</dd>

En su lugar, debe enumerar cada categoría en su propio dd y eliminar la ul :

<dt>Categories</dt>
<dd><a href="first-category.html">First category</a></dd>
<dd><a href="second-category.html">Second category</a></dd>

abbr para el tamaño del archivo

La unidad en "2 kB" se debe marcar con abbr :

2 <abbr title="kilobyte">kB</code>

Eliminar el atributo pubdate

Ya no está en la especificación.

Otras cosas que se podrían hacer.

• proporcione el atributo hreflang al enlace si el resultado vinculado tiene un idioma diferente al del motor de búsqueda
• proporcione el atributo lang a la descripción del enlace y al resumen si está en un idioma diferente al del motor de búsqueda
• resumen: use blockquote (con el atributo de cite ) en lugar de p , si el motor de búsqueda no crea un resumen en sí mismo, sino que utiliza la meta-descripción o un fragmento de la página.
• descripción del título / enlace: use q (con el atributo cite ) si la descripción del enlace es exactamente el título de la página web vinculada

Answer 4

1) Creo que deberías seguir con el elemento del article , como

[el] elemento del article representa una composición autocontenida en un documento, página, aplicación o sitio y se pretende que sea distribuible o reutilizable de forma independiente [source]

Simplemente tienes una lista de documentos separados, así que creo que esto es completamente apropiado. Lo mismo ocurre con la primera página de un blog, que contiene varias publicaciones con títulos y esquemas, cada uno en un elemento de article separado. Además, si pretende citar algunas oraciones de los artículos (en lugar de proporcionar resúmenes), incluso podría usar elementos blockquote , como en el ejemplo de una publicación en el foro que muestra las publicaciones originales a las que responde un usuario.

2) Si se pregunta si está permitido incluir elementos de article dentro de un elemento li , simplemente aliméntelo al validador. Como puedes ver, está permitido hacerlo. Además, como dice el [source] :

Contextos en los que se puede utilizar este elemento:

Donde se espera el contenido de flujo .

3) No usaría elementos de nav para esas categorías, ya que esos enlaces no forman parte de la navegación principal de la página:

solo las secciones que constan de bloques de navegación principales son apropiadas para el elemento de nav . En particular, es común que los pies de página tengan una lista corta de enlaces a varias páginas de un sitio, como los términos de servicio, la página de inicio y una página de derechos de autor. El elemento de footer solo es suficiente para estos casos, sin un elemento de nav . nav

4) No utilice los details y / o elementos de summary , ya que se utilizan como parte de elementos interactivos y no están destinados a documentos simples.

ACTUALIZACIÓN: sobre si es una buena idea usar una lista (des) ordenada para presentar los resultados de la búsqueda:

El elemento ul representa una lista de elementos, donde el orden de los elementos no es importante, es decir, cuando cambiar el orden no cambiaría sustancialmente el significado del documento. [source]

Como una lista de resultados de búsqueda en realidad es una lista, creo que este es el elemento apropiado para usar; sin embargo, como me parece que el orden es importante (espero que el mejor resultado coincidente esté en la parte superior de la lista), creo que debería usar una lista ordenada ( ol ) en su lugar:

El elemento ol representa una lista de artículos, donde los artículos han sido ordenados intencionalmente, de modo que cambiar el orden cambiaría el significado del documento. [source]

Usando CSS puedes simplemente ocultar los números.

EDIT: Whoops, me acabo de dar cuenta de que ya usaba un ol (debido a mi fatiga, pensé que usaba una ul ). Dejaré mi ''actualización'' como está; después de todo, podría ser útil para alguien.