etiqueta figure dentro de a

[MiguelWhite]

Hola amigos,
tengo un pequeña duda con html5

el sigueinte ejemplo seria correcto? Yo creo que no, pues figure parece ser una etiqueta de bloque, y no se aconseja meter una etiqueta de bloque dentro de una de linea.

Código HTML:

<a href="">
    <figure>
        <figcaption>titulo</figcaption>
        <p>texto texto texto</p>
    </figure>
</a>
 

habria que ponerlo de esta otra forma ??

Código HTML:

<figure>
        <figcaption><a href="">titulo</a></figcaption>
        <p><a href="">texto texto texto</a></p>
</figure>
 

saludos
gracias :)

[Rafael]

Dos cosas. Dentro de un a puedes poner lo que necesites poner, ya sea de bloque o no. Una imagen picable puede ser de bloque por ejemplo.

Pero no entiendo porqúe necesitas un figure ahí so no tienes ninguna imagen.

[MiguelWhite]

Hola Rafa,
sii tienes razon, me dejé el img, al escribir el ejemplo se me olvido.
Seria algo asi, porque un h2 se puede meter dentro del figcaption?

Código HTML:

<a href="">
        <figure>
               <img src="" />
               <figcaption><h2>texto texto texto</h2></figcaption>
       </figure>
 </a>
 

saludos
gracias

[Rafael]

De que puedes sí, pero semánticamente no porque el h2 te marca una estructura, y el figure puede estar fuera de la estructura y jerarquía.

¿Sí sabes para qué es el figure?

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Imagina un libro científico:

La planta etiquetus hyperlincus tiene hojas de estilos (ver figura 3).

Y entonces la figura la pones con su diagrama dentro. Esta figura puede estar en esa página o en otra. Obviamente un heading 2 no conviene que esté danzando por ahí.

[Amiancht]

Iniciado por Rafael

De que puedes sí, pero semánticamente no porque el h2 te marca una estructura, y el figure puede estar fuera de la estructura y jerarquía.

¿Sí sabes para qué es el figure?



Imagina un libro científico:

La planta etiquetus hyperlincus tiene hojas de estilos (ver figura 3).

Y entonces la figura la pones con su diagrama dentro. Esta figura puede estar en esa página o en otra. Obviamente un heading 2 no conviene que esté danzando por ahí.

Eso depende de lo que vayas a hacer. Si resulta que lo que estas haciendo es una galeria de imagenes con secciones en una misma página, entonces sería correcto un h2 o semejante en el figcaption.

Imagina un código así:

Código HTML:

<h1>Galeria de animales</h1>
<figure>
   <figcaption><h2>Aves</h2></figcaption>
   <img src="img/pollo.jpg">
   <img src="img/gallina.jpg">
</figure>
<figure>
   <figcaption><h2>Reptiles</h2></figcaption>
   <img src="img/tortuga.jpg">
   <img src="img/serpiente.jpg">
</figure>
 

Y no solo eso, sino que incluso se pueden anidar "figures" dentro de otros "figures", un ejemplo sacado de las especificaciones de HTML 5:
https://www.w3.org/TR/html5/grouping...figure-element

Código HTML:

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>