Глава 8.14. Подписи к демонстрационному материалу

До этого мы рассматривали случаи, когда текст играл главную роль. Но не всегда так бывает — текст может служить вспомогательным элементом, например, быть подписью к отдельно стоящему изображению. В таком случае картинку уместно обернуть в тег <figure>, а подпись к ней заключить в тег <figcaption>.

Давайте разберём ещё несколько примеров подписей к демонстрационному материалу.

Подпись к видеоролику

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

Пример подписи к видеоролику

<figure> <video src="kitten.mov"></video> <figcaption>Смешное видео с котиками</figcaption></figure>figure { padding: 20px; background-color: #ffffff;} video { width: 100%;} figcaption { position: relative; margin: 8px 0; font-family: "Georgia", "Times New Roman", serif; font-style: italic; font-weight: normal; font-size: 16px; line-height: 20px; text-align: center; color: #ad9d85;} figcaption::after { content: ""; position: absolute; bottom: -8px; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 50px; height: 1px; background-color: #d6cec2;}

Подпись к диаграмме или схеме

В качестве содержимого <figure> может быть интерактивная SVG-диаграмма. При этом подпись также записывается в <figcaption>.

Пример подписи к диаграмме

<figure> <figcaption>Диаграмма распределения трудностей работы из дома</figcaption> <div class="diagram"> … </div></figure> figure { background-color: #ebddf1; } figcaption { padding: 15px; font-family: "Arial", sans-serif; font-style: italic; font-weight: normal; font-size: 22px; line-height: 20px; text-align: center; letter-spacing: 0.01em; color: #ffffff; background-color: #dec1e0; }

Подпись к листингу кода

Листинг кода может также быть подписан аналогично случаям выше.

Пример подписи к листингу кода

<figure> <figcaption>Пример разметки заголовков</figcaption> <pre><code> <span class="color">&lt;h1&gt;</span>Навык «Вёрстка текстового содержания страниц»<span class="color">&lt;/h1&gt;</span> … </code></pre></figure> figure { padding: 10px 22px; background-color: #31384f; border-left: 2px solid #ab5bdb; font-family: "Courier New", monospace; font-style: normal; font-weight: normal; font-size: 18px; line-height: 30px; } figcaption { padding: 5px; border-bottom: 2px solid #292F42; font-size: 22px; line-height: 30px; color: #f2f2f2; opacity: 0.3; } pre { margin: 5px 0; color: #f2f2f2; }.color { color: #ff6b00; }

Дополнительная теория~ 8 минут