En la primera parte de esta serie cubrimos los fallos que conducen a los elementos estructurales de HTML5, en esta segunda parte veremos en detalle las consecuencias de esos fallos.
He dicho varias veces que HTML5 presenta un nuevo método para estructurar una página web, y probablemente se esté preguntando qué es realmente. Está justo allí en la especificación, que introduce el concepto de 'contenido de seccionamiento ': el contenido de sección es contenido que define el alcance de los títulos y los pies de página. Cada elemento de contenido de sección tiene potencialmente un encabezado y un contorno.
La especificación documenta su enfoque a encabezados, secciones y contornos para aclarar el concepto Bueno, claro para aquellos que tienen que implementar la funcionalidad en los navegadores. Para que comprendamos los elementos estructurales de HTML (sección, artículo, nav, a un lado, y sus elementos relacionados, encabezado y pie de página) y este oscuro concepto de 'contenido de sección' o 'delineado', tenemos que hacer un pequeño viaje a través del historial de HTML.
El concepto de esquematización introducido en HTML5 se remonta hasta 1991 y se incluyó en la nefasta especificación XHTML 2.0 sin salida, y finalmente ve la luz en HTML5 ... solo se comunica tan mal que la idea está bastante muerto al llegar.
Antes de HTML5, la estructura jerárquica de una página estaba determinada por los elementos del encabezado: nuestros viejos amigos h1 hasta h6. Podríamos estructurar una página diciendo que el título de la página es h1, el título del artículo puede ser h2, y quizás los subtítulos en el artículo pueden ser h3 y h4, y así sucesivamente.
Esto está bien para un documento simple, pero usar etiquetas de encabezado para crear una jerarquía lógica, o 'esquema del documento', para una página web compleja y moderna es muy difícil. Parte del problema es la falta de una forma de determinar dónde comienza y dónde se para la sección de una página. Por ejemplo, supongamos que tenemos nuestro documento mencionado anteriormente con h1 para el título de la página, h2 para el título del artículo, h3 para los subtítulos, pero luego quería marcar el título para nuestras secciones de la barra lateral con los encabezados h3 también.
El esquema del documento que crearía una estructura se vería así:
My Old Blog
My Latest Blog Post
My Blog Post Sub Heading
My Blog Post Sub Heading
About Me
Archives
Social Links
Aquí, los elementos h3 son 'propiedad' de h2 por encima de ellos, incluso si no tiene mucho sentido. Por supuesto, dividiríamos esto con algo como div para el artículo y div para la barra lateral, pero estos son ignorados por los agentes de usuario (como los lectores de pantalla) que determinan el esquema de la página por estructura de encabezado solo.
Al vincular la jerarquía de páginas directamente a lo que a menudo son niveles de encabezado de presentación, estamos limitados en la forma en que podemos estructurar una página.
En un intento de resolver este problema, HTML5 introduce el concepto de "elementos de sección", es decir, elementos especiales que dividen la página en secciones (ya lo adivinó), y esas secciones determinan el nivel de anidación de los encabezados y, de hecho, la jerarquía , o 'esquema' de la página.
Es decir, la jerarquía de la página está desacoplada de los elementos de encabezado, y en su lugar estos nuevos elementos de sección determinan qué nivel es en realidad un elemento de encabezado.
En el primer borrador Especificación XHTML 2.0 , el seccionamiento funcionó con un elemento de sección y un elemento genérico de encabezado h. Al escribir HTML, no especificamos qué nivel de rumbo queríamos usar, simplemente le permitimos al navegador determinar el nivel de anidación para un rumbo determinado. Podríamos anidar elementos de sección de 99 niveles de profundidad, y un elemento h en el nivel 99 sería equivalente a un elemento h99. De esta forma, podemos estructurar nuestros documentos lógicamente, sin preocuparnos por cómo podemos usar los elementos h1-h6 limitados.
(Esta idea realmente data de 1991, por cierto: como Jeremy Keith señaló, Tim Berners-Lee discutió la idea de un elemento de sección yh para estructurar una página al final de este octubre de 1991 correo electrónico .)
Hickson intentó introducir este mismo concepto en HTML5, pero con un grado adicional de dificultad: quería mantener la compatibilidad con versiones anteriores e introducir algunas nuevas semánticas para 'simplificar la creación' para arrancar. Por lo tanto, en lugar de tener solo un elemento de sección en HTML5, también tenemos un elemento de artículo, navegación y aparte que hace lo mismo que una sección, pero con diferentes nombres, para usar de diferentes maneras.
¿Qué dice la especificación sobre estos elementos? Te animo a que lee las especificaciones para ti , pero aquí hay un gusto:
El elemento de sección es la base de la sección para crear un contorno de documento.
El elemento de sección representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, generalmente con un encabezado.
Ejemplos de secciones serían los capítulos, las distintas páginas con pestañas en un cuadro de diálogo con pestañas o las secciones numeradas de una tesis. La página de inicio de un sitio web podría dividirse en secciones para una introducción, noticias e información de contacto.
Una nota en la especificación dice que el elemento no debe usarse con fines puramente de diseño: un div sería mejor allí, y comprensiblemente, ya que las secciones lanzadas de cualquier forma crearían un contorno de documento muy roto.
La nota continúa diciendo "Una regla general es que el elemento de sección es apropiado solo si los contenidos del elemento se enumeran explícitamente en el esquema del documento" y esa es la afirmación más clara sobre el elemento de sección en la especificación.
Cuando entendemos el concepto de seccionar y delinear, la inclusión del elemento de sección tiene sentido. No apareció en la investigación común de valores de clase, pero apareció en XHTML 2.0 y data desde 1991.
Los otros elementos estructurales que introduce HTML5, los que supuestamente se reflejaron en la investigación, hacen exactamente lo mismo que el elemento de sección, en lo que respecta al contorno del documento. También crean la jerarquía de la página y, por lo tanto, el contorno del documento.
Tome el elemento del artículo, por ejemplo. Mucha gente supone que es simplemente para artículos como este. Pero eso no es para nada. Es 'artículo' en el sentido de 'una prenda de vestir'. Es mejor considerarlo como "elemento" que como "una prenda de vestir", ya que su definición es tan amplia.
Cuando los elementos del artículo están anidados, los elementos del artículo interno representan artículos que están en principio relacionados con los contenidos del artículo externo. Por ejemplo, una entrada de blog en un sitio que acepte comentarios enviados por el usuario podría representar los comentarios como elementos del artículo anidados dentro del elemento del artículo para la entrada del blog.
En HTML5, los comentarios de los usuarios, el artículo propiamente dicho, las publicaciones en el foro e incluso los "widgets y artilugios interactivos" son todos artículos. La definición es tan amplia que es inútil: se supone que la semántica imparte significado, pero el uso de un término colectivo para una variedad tan amplia de elementos hace que el elemento carezca de significado.
Este es un ejemplo en el que hemos bifurcado las especificaciones: algunas personas siguen las especificaciones correctamente y convierten casi todo en un artículo (resúmenes de publicaciones de blogs, publicaciones de blogs, comentarios, widgets, publicaciones en foros, etc.), mientras que otros lo han mantenido solo para el artículo principal en una página, que es solo una parte de su definición amplia. Puedes pensar que no importa de ninguna manera, y en gran medida estarías en lo correcto. Pero piense en todos aquellos servicios de lectura que pretenden analizar el contenido principal de la página. ¿Qué implementación de la especificación deberían seguir? ¿Deberían seguir lo que dice la especificación, o deberían seguir la implementación de la comunidad general donde normalmente hay un solo 'artículo' canónico en una página?
Esta es una oportunidad perdida, y lo que sucede cuando la especificación no especifica realmente, y el editor y, para ser justos, la comunidad, no puede comunicar lo que dice la especificación.
Imagine si el artículo no se usó también para comentarios. Imagine si los comentarios tienen su propio elemento, por ejemplo, y la adopción se generaliza. Los fabricantes de navegadores podrían agregar una función de "comentarios silenciosos" que podría ocultar (o analizar) comentarios en páginas web. Pero Hickson ha rechazado específicamente una solicitud de un elemento de comentario . En HTML5, son los artículos todo el camino hacia abajo.
Aparte, hay otro elemento que no aparece en ninguna parte de la investigación de nombre de clase de Hickson, y tiene una definición muy peculiar para arrancar:
El elemento a un lado representa una sección de una página que consta de contenido que está relacionado tangencialmente con el contenido que rodea el elemento a un lado, y que podría considerarse separado de ese contenido. Dichas secciones a menudo se representan como barras laterales en la tipografía impresa.
El elemento se puede usar para efectos tipográficos, como comillas de extracción o barras laterales, para publicidad, para grupos de elementos de navegación y para otro contenido que se considera separado del contenido principal de la página.
Quién sabe por qué debe incluir tanto las comillas de extracción, las barras laterales, la publicidad y los grupos de elementos de navegación, pero también crea nuevas secciones en el esquema del documento. Esto significa que las comillas de extracción tienen su propia viñeta en el contorno del documento, lo que parece, digamos, "extraño". Una vez más, su uso fortuito por diseñadores web bien intencionados ha creado y creará muchos esquemas de documentos rotos.
El elemento de navegación parece ser el que más se explica por sí mismo de los elementos de sección, y afortunadamente la definición no se ha estirado más allá de la ruptura.
El elemento nav representa una sección de una página que enlaza con otras páginas o con partes dentro de la página: una sección con enlaces de navegación.
Lo cual está bien, y podría tener beneficios teóricos de accesibilidad (un agente de usuario podría saltear, o saltar a, los enlaces de navegación, no lo hacen, pero podrían).
El problema es que, en el espíritu de 'simplificar la creación' y reemplazar div con el elemento de navegación, explotamos el estilo de navegación para otro subconjunto de usuarios. Usuarios de IE6-8 con JavaScript desactivado (La investigación de Yahoo sugiere 1-2% de todos los usuarios tienen JavaScript desactivado ) son víctimas de este problema. Con JavaScript desactivado, el complemento HTML5 basado en JavaScript que ayuda a IE6-8 a comprender los elementos HTML5 no funciona, por lo que el navegador no da estilo a los elementos HTML5. Esto solo puede afectar a una pequeña cantidad de usuarios, pero ¿para qué afectarlos?
Los elementos de encabezado y pie de página son un caso clásico de tomar términos comunes y darles usos muy diferentes.
La especificación establece que ninguno de estos elementos crea nuevas secciones en el esquema del documento, a pesar de que a menudo se muestran como a la par de sección, navegación, artículo y aparte. De hecho, no hacen nada en absoluto. Simplemente están incluidos para demarcar áreas de una sección específica en el esquema del documento.
Esto es lo que dice la especificación sobre el encabezado: el elemento del encabezado representa un grupo de ayudas introductorias o de navegación.
Nota: Un elemento de encabezado suele contener el encabezado de la sección (un elemento h1-h6 o un elemento hgroup), pero esto no es obligatorio. El elemento de encabezado también se puede usar para ajustar la tabla de contenido de una sección, un formulario de búsqueda o cualquier logotipo relevante.
y pie de página: el elemento de pie de página representa un pie de página para su antecesor más cercano, el contenido de sección o el elemento raíz de sección. Un pie de página suele contener información sobre su sección, como quién la escribió, enlaces a documentos relacionados, datos de derechos de autor y similares.
En HTML5, el elemento del cuerpo es en realidad el elemento de la sección raíz, por lo que un encabezado y pie de página general tiene la intención de describir la sección del cuerpo raíz. Cualquier sección puede tener un encabezado y / o un pie de página; no están destinados solo para encabezados y pies de página generales, como podríamos haber supuesto. Los comentarios individuales pueden tener un encabezado y un pie de página, por ejemplo. De hecho, como mencionamos anteriormente, la especificación proporciona un ejemplo de pie de página que se usa en un comentario sobre el contenido real del comentario. Así es, en HTML5 los comentarios son artículos, y pueden tener un pie de página para un encabezado, y eso está en la especificación real. ¿Quería un elemento de pie de página para el encabezado de sus comentarios? ¿No? Bueno, tienes uno.
Una vez más, aquí es donde HTML5 toma los términos comunes, y los usa de maneras que son irreconocibles para el autor web común.
Pero hay algo que no hemos visto en la implementación del seccionamiento de HTML. ¿Lo viste? Tenemos los elementos de seccionamiento, pero no tenemos un elemento h genérico. No se preocupe, la solución es en la especificación :
Las secciones pueden contener encabezados de cualquier rango, pero se recomienda encarecidamente a los autores que utilicen solo elementos h1 o que usen elementos del rango apropiado para el nivel de anidación de la sección.
HTML5 quiere ser compatible con versiones anteriores, por lo que WHATWG decidió no introducir un elemento h (a pesar de introducir un grupo de nuevos elementos de sección), y en su lugar quiere reutilizar el elemento h1 para que sea el elemento h genérico. Use h1 en todas partes y permita que el algoritmo de delineación de HTML5 determine su verdadero nivel ... o eso dice la teoría.
Esta es una idea terrible por varias razones, las dos principales son la accesibilidad y el estilo.
Usar h1 en todas partes es muy malo para la accesibilidad. Los usuarios ciegos dependen en gran medida de la estructura del encabezado de un sitio. Es importante que todos recordemos cuán crucial es la estructura del encabezado para fines de accesibilidad. Por ejemplo, un diciembre Encuesta de 2008 a más de 1000 usuarios de lectores de pantalla realizado por WebAIM descubrió que el 76% de los usuarios ciegos y con discapacidad visual navegaban siempre o con frecuencia por encabezados cuando estaban disponibles. Y una encuesta de mayo de 2012 encontró que los niveles de encabezado del 82.1% eran 'muy útiles' o 'algo útiles' cuando navegaban en una página web. (Esta es una buena investigación práctica, así que tome nota).
Tener h1s en todas partes hará que los sitios sean más difíciles de navegar para los usuarios ciegos. En teoría, los lectores de pantalla utilizarían el algoritmo de esquemas HTML y navegarían utilizando el esquema del documento, pero dada la forma en que se les dijo a los autores que implementaran elementos de sección, esbozar un enredo y tratar de navegar por contornos de documentos a los que no se les ha dado ningún pensamiento ser aún peor para los usuarios ciegos.
La especificación HTML5 ofrece una salida: siga usando los niveles h1-h6 apropiados para mantener la compatibilidad con versiones anteriores. Pero ahora mantenemos dos bosquejos de documento en el documento único, y dados los problemas que han tenido los autores al considerar el esquema del documento en primer lugar, la probabilidad de que alguien mantenga tanto un esquema lógico h1-h6, como una lógica, apropiadamente el esquema de HTML5 seccionado parece remoto, en el mejor de los casos.
Pero empeora. Digamos que queremos ejecutar con un esquema HTML5 puro, y usamos h1 en todas partes. Recuerde, en la especificación de HTML5 que h1 es solo un elemento h genérico; su nivel real está determinado por cuán profundamente se anida en los elementos de corte.
Entonces, ¿cómo lo diseñamos? Bueno, podríamos agregar nombres de clase a todos nuestros elementos h1 para que podamos elegirlos, pero eso es contrario al objetivo establecido de HTML5 de simplificar la creación; y también podemos apegarnos a h1-h6 (todos los cuales son tratados como elementos h genéricos en un esquema HTML5).
Podríamos tratar de diseñarlos a través de la cascada, pero esto rápidamente se vuelve absurdo, ya que Nicole Sullivan ha señalado . De hecho, 'absurdo' solo comienza a describirlo. Cuando considere las posibles combinaciones de sección, artículo, navegación y aparte, y desee crear un estilo genérico para un encabezado que sea, por ejemplo, cinco niveles profundos (es decir, el equivalente de h5), deberá escribir estilos para todos posibles combinaciones, que se pone absolutamente ridículo . Aquí está el estilo genérico para un elemento h3:
article aside nav h1, article aside section h1,article nav aside h1, article nav section h1,article section aside h1, article section nav h1, article section section h1,aside article nav h1, aside article section h1,aside nav article h1, aside nav section h1,aside section article h1, aside section nav h1, aside section section h1,nav article aside h1, nav article section h1,nav aside article h1, nav aside section h1,nav section article h1, nav section aside h1, nav section section h1,section article aside h1, section article nav h1, section article section h1,section aside article h1, section aside nav h1, section aside section h1,section nav article h1, section nav aside h1, section nav section h1,section section article h1, section section aside h1, section section nav h1, section section section h1 {font-size: 1.00em;}Sin embargo, eso es lo que los elementos estructurales de HTML nos dan. Que desastre.
¿Hambriento por más? Parte tres de este artículo ahora está disponible y 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.
¿Utiliza elementos del artículo varias veces en un documento? ¿Las secciones son útiles o deberíamos seguir con los divs? Háganos saber sus pensamientos en los comentarios.
Imagen / miniatura destacada, usos imagen de la estructura a través de Shutterstock.