En la primera parte de esta serie miramos los fallos que conducen a los elementos estructurales nuevos en HTML5; en la segunda parte de la serie miramos en detalle las consecuencias de esos fallos; en esta parte final buscaremos un camino a seguir y sacaremos algunas conclusiones sobre el estado actual del juego.
Este no es un problema abstracto: la gente en realidad tiene que enseñar esto. La próxima generación de diseñadores y desarrolladores web se enseñará con HTML5 como punto de partida. Lo siento por quien tenga que intentar y explicar el bosquejo y el corte a la cosecha actual y futura de estudiantes. Quizás sabiamente se apegarían al formato simple que tenemos que todavía funciona bien: use divs con una ID o clase / es.
Es razonable sugerir que quizás los agentes de usuario en el futuro, como los navegadores y los lectores de pantalla, hagan más con los elementos estructurales de HTML5, y eso los hará más aceptables para nosotros como autores.
Bruce Lawson de Opera sugirió eso en el Lista de correo de WHATWG en 2009 :
Después de todo, no conozco ningún agente de usuario que pueda usar el tiempo, la sección, el pie de página, la cuadrícula de datos, etc., pero en su mayoría esperamos que lo haga pronto.
Y esto es lo que Hickson, el editor de HTML5, dijo en respuesta:
Yo no. La mayoría de los elementos nuevos solo están destinados a facilitar el diseño, para que no tengamos que usar clases.
Todo eso, y el editor no ve a los agentes de usuario ni siquiera usando estos elementos. Están ahí, dice, para evitar que usemos clases. Dicho de otra manera, el creador de estos elementos parece no estar seguro de por qué están incluidos en la especificación, excepto "hacer que el estilo sea más fácil".
Hay una escuela de pensamiento que dice que solo necesitamos un puñado de nueva semántica de todos modos. Después de todo, la especificación se hincharía si se agregaran decenas o cientos de términos nuevos.
Por un lado, estoy de acuerdo. En términos de estructurar una página web básica, diría que estaríamos mejor sin los elementos de sección de HTML en conjunto. Lo que una vez fue un ejercicio sencillo en el uso de divs se ha convertido en un desastre complicado en HTML5 sin ganancia neta.
Sin embargo, en términos de semántica en general, hay casos en los que se puede agregar más significado sobre la estructura de nuestra página web (ya sea HTML4, 5 o lo que viene después) usando atributos adicionales en nuestros elementos existentes.
Una de las cosas más fáciles de implementar en un sitio existente o nuevo son los puntos de referencia de ARIA. (ARIA significa Aplicaciones de Internet enriquecidas accesibles y es una especificación que define una forma de hacer que las aplicaciones web y las páginas web sean más accesibles).
Los puntos de referencia de ARIA son un subconjunto de la especificación general de ARIA y un tipo simple de metadatos que permite a los usuarios ciegos y con problemas de visión con lectores de pantalla saltar a las partes significativas de una página, es decir, los "puntos de referencia". Simplemente agregamos role = "landmark-name" a un elemento existente, de la misma manera que agregaríamos class = "class-name" a un elemento. Los puntos de referencia de AIRA son discutido en comparación con HTML5 aquí .
Los puntos de referencia de ARIA son mucho mejores para lo que hacemos actualmente. La denominación es un poco vaga, pero al menos reflejan la práctica real de autoría web. Por ejemplo, podemos usar:
(Tenga en cuenta que el banner, la información principal y el contenido solo se deben usar una vez por documento).
Los puntos de referencia de ARIA son una solución simple que mejora las opciones de navegación para los usuarios de lectores de pantalla, sin adentrarse en el turbio territorio del documento en HTML. Son rápidos y fáciles de implementar, y realmente deberían ser parte de tu plantilla básica de proyecto HTML.
Así que tenemos más semántica para la accesibilidad, pero también tenemos más semántica disponible para los motores de búsqueda.
Primero, permítanme ser absolutamente claro que los elementos de HTML5 no tienen ningún beneficio para SEO en absoluto. Es un mito, y tenemos que ponerlo en la cama. Usar una etiqueta de artículo no le ayudará a usted ni a su rango de cliente más alto que el siguiente tipo. Puede confiar en que Google ya ha descubierto cómo encontrar y clasificar su contenido.
Sin embargo, los motores de búsqueda están interesados en comprender la mejor manera de mostrar (observar: no clasificar ) el contenido web de una manera más estructurada.
Por lo tanto, los principales motores de búsqueda, a lo largo de los años, han presentado o adoptado formas estándar existentes para marcar los datos estructurados en una página web para que puedan extraer la información adecuada. Por ejemplo, al buscar reseñas, puede haber notado que las calificaciones por estrellas aparecen en los principales resultados de Google. Este es un caso en el que los motores de búsqueda pueden extraer la puntuación de la revisión de forma estandarizada y mejorar la visualización de sus resultados. Las recetas son otro ejemplo, donde el tiempo de cocción se incluye para cada resultado. Si bien estos datos no mejoran el rango de un sitio, un resultado más detallado puede alentar a más usuarios a hacer clic, por lo que hay un beneficio potencial para un sitio, y a menudo es necesario en una carrera armamentista donde todos sus competidores lo están haciendo de todas formas.
Si bien este tipo de datos abundantes ha existido por un tiempo en varias formas, solo el año pasado los principales motores de búsqueda lanzado una nueva y amplia gama de estándares para este tipo de datos estructurados. Los llaman 'esquemas' y están alojados en Schema.org . Usan el estándar de microdatos de HTML, y ya han sido implementados por eBay, IMDB, Rotten Tomatoes y más.
Este es el mayor salto hacia una web más semántica en años, y sin embargo se hizo a puertas cerradas con poca fanfarria y sin ningún proceso de estándares en absoluto. Fue lanzado sobre nosotros sin previo aviso, y desde entonces principalmente ha volado bajo el radar de la comunidad de diseño web. También hay mucha superposición con la semántica HTML5, por ejemplo, hay esquemas para artículos , web páginas y web elementos de página , entre muchos más esquemas que incluyen todo, desde Episodios de TV a condiciones médicas . También es el camino recomendado de describir videos en la web.
Después de todo el debate sobre la semántica de HTML (y la falta de ella), los motores de búsqueda han dejado en claro que quieren mucha más información semántica en nuestro marcado, pero va a suceder sobre las estructuras existentes, y no con elementos nuevos.
Pero seguramente para nosotros, como comunidad interesada en la semántica y los estándares web, ni el enfoque limitado y defectuoso de la semántica de HTML, ni el enfoque cerrado y abandonado de los principales motores de búsqueda es el mejor camino a seguir.
En algunos sentidos, el caballo semántico de HTML5 se ha atornillado; depende de nosotros contener el daño. En cuanto a schema.org, se trata de un mundo completamente nuevo, y uno que deberíamos examinar minuciosamente, u otro pequeño grupo determinará qué es lo mejor para nosotros, y para la web. De hecho, puede haber sucedido ya.
Vamos a concluir con algunas conclusiones.
Hay muchas partes buenas en la especificación HTML5, desde nuevas funciones de formularios hasta la API de Historia y la implementación de Canvas. De hecho, sin el WHATWG, que ha sido la fuerza impulsora detrás de HTML5, todavía estaríamos atascados con HTML4 / XHTML 1.0 mientras esperábamos que el W3C actuara de forma conjunta. Sin embargo, solo porque HTML5 y toda la tecnología relacionada a su alrededor es nueva y emocionante, no significa que tengamos que aceptar todo lo que recibimos.
A veces vale la pena ver cómo se elabora la salchicha HTML, para que sepamos lo que estamos comiendo. Y en el caso de la semántica estructural de HTML, prefiero pasar.
¿Hambriento por más? El libro de Luke "The Truth About HTML5" está disponible por tiempo limitado a través de nuestro sitio hermano MightyDeals.com con un asombroso 50% de descuento.
¿Has usado los puntos de referencia ARIA o Schema.org? ¿Ves un futuro para los elementos estructurales de HTML5? Háganos saber en los comentarios.
Imagen / miniatura destacada, usos imagen de la estructura a través de Shutterstock.