figura - footer html5

Uso correcto de HTML5 `figure` y` aparte`

Question

Tengo una parte de una página que se ve semánticamente esto:

Encabezando un

Información textual relacionada con el título A.
Bla, bla, bla bla bla.

[Galería de imágenes relacionadas con el título A]

Puedo pensar en un par de maneras para marcar esto:

Método 1:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>

Método 2:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>

    <figure>
        <img />
        <figcaption>Image 1</figcaption>
    <figure>
    </figure>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</section>

Método 3:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>
    <aside>  <!--Method 3b: use section here-->
        <figure>
            <img />
            <figcaption>Image 1</figcaption>
        <figure>
        </figure>
            <img />
            <figcaption>Image 2</figcaption>
        </figure>
    </aside>  <!--Method 3b: use section here-->
</section>

Método 4:

<section>
    <h1>Heading A</h1>

    <p>Textual information related to heading A.<br />
    <p>Blah blah blah blah blah.</p>
</section>
<aside>
    <figure>
        <img />
        <figcaption>Image 1</figcaption>
    <figure>
    </figure>
        <img />
        <figcaption>Image 2</figcaption>
    </figure>
</aside>

¿Cuál es la forma semánticamente correcta de hacerlo?

Answer 1

Es poco probable que logre un acuerdo completo sobre una ''única manera'' de marcar esto, pero elegiría el método 2. Mi razonamiento es:

• Un elemento de figure no puede tener varios hijos de figcaption , por lo que el método 1 no es válido
• Una figure ya es un tipo de aside , por lo que no hay necesidad de envolverla: "El elemento figura representa una unidad de contenido ... que se puede alejar del flujo principal del documento sin afectar el significado del documento". ( Especificación W3C HTML5, elemento figura )
• A menos que las dos figuras estén relacionadas de alguna manera, además de estar relacionadas con la sección en la que están, no es necesario agruparlas más de lo que ya están.

Answer 2

Insertar <figure> en <aside> no tiene mucho sentido en este caso. Una regla de oro para elegir entre <figure> y <aside> es diferenciar si:

• El contenido tiene sentido por sí solo y se puede mover a una parte diferente de la página o incluso a una página separada (p. Ej., Apéndice) pero transmite información importante. Si es así, elija <figure> . // Los ejemplos son: ilustraciones, diagramas, bloques de código, gráficos, audio / video, etc. (en su mayoría, contenido gráfico), todos los cuales acompañan el tema principal del documento y, a menudo, se mencionan como una sola unidad.
• El contenido no es esencial para comprender la section en la que se encuentra, se puede sacrificar completamente o no contribuye al tema principal de esa sección. Además, el contenido solo tiene sentido dentro del contexto que lo rodea. Si es así, elija <aside> . // Los ejemplos son: citas extraíbles, información complementaria relacionada con el contexto, barras laterales como en tipografía impresa, anuncios, etc. (en su mayoría contenido textual). Puedo imaginar bien Google AdSense.

Teniendo esto en cuenta, también aceptaría el Método 2 :

• El método 1 ha sido correctamente excluido por @robertc .
• Yo excluyo el método 3a (su ejemplo no cumple con los requisitos para <aside> mencionados anteriormente, es decir, no hay razón para envolver las <figure> s con <aside> ).
• Método 3b : no es necesario anidar en otra <section> siempre que no haya un encabezado adicional ( <h2> ) para <figure> s.
• El Método 4 también está excluido por mí: el mismo argumento que para el Método 3 más que las <figure> s no se deben colocar en una sección diferente a la del texto y el encabezado relacionados.

Si la <figure> debe usarse dentro de las galerías no es obvio en la Especificación W3C . Idealmente, una página también debe contener algún texto de párrafo relacionado con el tema principal, luego las <figure> s deben ser referidas desde ese texto y ser solo "representativas", no todo el contenido principal en sí. Por otro lado , dicho uso no es en modo alguno contrario a la especificación, ya que los elementos de la galería generalmente son "autocontenidos" (no están vinculados con el contexto), en particular cuando se enriquecen con <figcaption> por lo que su significado es claro. No puedo imaginar mejor elemento para este uso.