Статьи

Совет: правильный способ использования элементов Figure и Figcaption

Декабрь 21, 2018

Элементы figurefigcaption Если вы еще не ознакомились со спецификацией , имели возможность использовать их в своих проектах или не знаете, как, вот несколько советов о том, как правильно их использовать.

Элемент figure 

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

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

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

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

Вы можете разместить несколько тегов imgfigure 

 <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 Вы можете использовать его для таких вещей, как:

  • кодовые блоки,
  • видео,
  • аудиоклипы или
  • объявления.

Вот пример figure 

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

Вложенная figurefigure

Вы можете вложить figurefigure Здесь был добавлен атрибут role 

 <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>

Дальнейшие инструкции по использованию элементов figurefigcaptionтом, как эффективно использовать ARIA в HTML5 .

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

Элемент figcaptionfigure

Не каждая figurefigcaption

Однако при использовании figcaptionfigure 

 <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>

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

Если вам нужно добавить больше семантики к изображению, вы можете использовать такие элементы, как h1p 

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

Есть ли у вас какие-либо другие советы по использованию элементов figurefigcaption

35
Share: