htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

Listas con encabezados y el elemento figure

Listas con encabezados y el elemento figure

Leyendo este FAQ en la página de WHATWG, encontré una sección que me pareció interesante llamada «Feature Proposals» (algo así como Propuestas Especiales o Propuestas Principales) en la que se nombran algunas de las propuestas que han sido presentadas para la especificación del HTML 5, pero que por uno u otro motivo no fueron tomadas en cuenta. Además, en la mayoría de ellas, dan una breve razón del rechazo y nos dan otro camino por el cual se puede resolver el mismo problema que solucionaba la propuesta.

Una de estas sugerencias es que el HTML5 debería soportar encabezados (o cabezas) para las listas. En principio me pareció una buena idea, poner una etiqueta especial (por ejemplo «lh«) dentro de la etiqueta ul, antes de los respectivos li. En primera instancia no suena raro.

Pero, en el mismo texto de «respuesta» a la propuesta en cuestión, se brindan dos tipos de soluciones distintas que me parecieron más lógicas y de mejor semántica que la anterior.

La primera y más novedosa: englobar la lista entera (ul) entre el nuevo elemento figure. El elemento figure es uno de los nuevos elementos en HTML5, el cual también puede incluir otro elemento llamado legend. Esto es lo que dice la documentación actual sobre estas dos etiquetas:

«El elemento figure representa algún «contenido corriente» («flow content»), opcionalmente con una leyenda, que está contenida en sí mismo y está típicamente referenciado como una unidad del flujo principal del documento.

Por lo tanto el elemento puede ser usado para ilustraciones, diagramas, fotos, listas de código, etc, que están referidos desde el contenido principal del documento, pero eso puede ser movido, sin afectar el flujo del documento, fuera del contenido primario, por ejemplo al lateral de una página, a páginas dedicadas, o a un apéndice.»

El elemento hijo, llamado legend, puede estar o no, y precisamente sirve como leyenda del contenido de su elemento padre.

Teniendo esto en cuenta, es que proponen alguna de estas dos soluciones (ambos códigos son los que están en la página del FAQ ya mencionada) para que las listas tengan encabezado si así fuese necesario:

1
2
3
4
5
6
7
8
<figure>
    <legend>Apples</legend>
    <ul>
        <li>Granny Smith</li>
        <li>Evil Apple of Knowledge</li>
        <li>Apple, Inc</li>
    </ul>
</figure>

En donde la lista (ul) con sus respectivos ítems (li) están contenidos dentro de la etiqueta figure, siendo la etiqueta legend el encabezado de la lista.

La otra solución brindada es utilizar listas de definición (dl) para un grupo de listas, siendo el término de definición (dt) el encabezado de cada lista, y la lista en sí contenida en cada definición (dd). Como siempre, con el ejemplo se entiende mejor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<dl>
    <dt>Dry:</dt>
    <dd>
        <ul>
            <li>1c flour</li>
            <li>1/4c sugar</li>
            <li>1tsp baking soda</li>
        </ul>
    </dd>
    <dt>Wet:</dt>
    <dd>
        <ul>
            <li>1 egg </li>
            <li>1/2c milk</li>
            <li>1tsp vanilla extract</li>
        </ul>
    </dd>
</dl>

¿Qué te parece la propuesta, y las dos formas alternativas brindadas por el WHATWG?

Cómo siempre digo, si encuentras algún error, ya sea conceptual, ortográfico o de traducción, házmelo saber. Así como tu opinión o crítica.

Comparte conocimiento:
Share on twitter
Twitter
Share on linkedin
Linkedin
0
Share on facebook
Facebook
0
Share on google
Google
Please Add coin wallet address in plugin settings panel
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

2 comentarios para “Listas con encabezados y el elemento figure”

  1. harry izquierdo dice:

    = La idea de esta etiqueta es marcar contenido que tiene imágenes, diagramas, ilustraciones, fotos y ejemplos de código.
    no em parece correcto suar esa etiqueta para las listas investigare mas a fondo sobre eso

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)