Теги figure и figcaption

Новые теги HTML5

Теги figure и figcaption

Тег figure представляет некоторый поток, возможно, с заголовком, который является самодостаточным и, как правило, ссылается как единое целое от основного потока документа.

Элемент может быть использован, чтобы комментировать иллюстрации, диаграммы, фотографии, листинги и т.д., которые относятся к основному содержанию документа, но это может, не влиять на поток документов, удаляясь от основного содержания, например, в сторону страницы, посвященные страницам или приложениям.

Первый дочерний элемент тега figure тег figcaption, если таковой имеется, представляет заголовок, содержание элемента. Если нет дочернего элемента figcaption, то нет никакой подписи.

Этот пример показывает элемент figure для разметки кода:

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

а здесь мы видим применение элемента figure для разметки фотографии:

<figure>
 <img src="bubbles-work.jpeg"
 alt="Bubbles, sitting in his office chair, works on his
 latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>

В этом примере мы видим образ, который не является фигурой, а также изображения и видео, которое есть:

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

Здесь часть стихотворения отмечено, используя figure:

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

В этом примере, который может быть частью более крупной работы обсуждается замок, figure имеет три изображения в нем:

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