Правильный способ использовать элементы figure и figcaption

<figure>
<img src="dog.jpg" alt="Maltese Terrier">
</figure>

Несколько изображений внутри figure

<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
</figure>

Другие элементы, используемые с figure

<figure>
<pre>
<code>
p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}
</code>
</pre>
</figure>

Вложение figure в другой тег figure

<figure role="group">
<figcaption>Dog breeds</figcaption>
<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<figcaption>Adorable Maltese Terrier</figcaption>
</figure>
<figure>
<img src="dog2.jpg" alt="Black Labrador">
<figcaption>Cute black labrador</figcaption>
</figure>
</figure>

Правильно использование figcaption

<figure>
<figcaption>Three different breeds of dog.</figcaption>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
</figure>
<figure>
<img src="dog1.jpg" alt="Maltese Terrier">
<img src="dog2.jpg" alt="Black Labrador">
<img src="dog3.jpg" alt="Golden Retriever">
<figcaption>Three different breeds of dog.</figcaption>
</figure>

Вы можете использовать потоковые элементы в figcaption

<figure>
<img src="dogs.jpg" alt="Group photo of dogs">
<figcaption>
<h2>Puppy School</h2>
<p>Championship Class of 2016</p>
</figcaption>
</figure>

--

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

More from Medium

Use Emoji in HTML, PHP, JavaScript and CSS

Use Emoji in HTML, PHP, JavaScript and CSS

How To Run A JavaScript File With Node.js In Ubuntu

Popular JavaScript Frameworks

conjoon installer updates