Внутренняя фигура или фигура внутри? - PullRequest
Новая
       16

Внутренняя фигура или фигура внутри?

1 голос
/ 08 ноября 2019

Перейдите к HTML-фрагменту кода. В первом блоке есть figure, который оборачивает a тегом img. Во втором боксе есть a, который обертывает figure тегом img.

Какой из боксов является наиболее правильным?

обернуть фигуру или следует обернуть фигуру? 

* {
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  border: 1px solid #ccc;
  max-width: 200px;
  margin: .5rem;
}

img {
  vertical-align: top;
  width: 100%;
}

.text {
  padding: 2rem;
}
<!-- A inside figure -->
<div class="box">
  <figure>
    <a href="#">
      <img src="http://placekitten.com/g/500/500">
    </a>
  </figure>
  <div class="text">Text</div>
</div>

<!-- Figure inside a -->
<div class="box">
 <a href="#">
   <figure>
    <img src="http://placekitten.com/g/500/500">
   </figure>
  </a>
  <div class="text">Text</div>
</div>

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

Я бы сказал, что оба ваших варианта семантически верны, и они оба проверяются в стандартах HTML5.

Оба тега <a> и <figure> являются потоковым контентом и разрешенным контентом внутри самоготе же теги также содержимое потока в соответствии с MDN . Так что обертывание любого из них внутри другого имело бы смысл.

Если вы хотите связать содержимое рисунка, включая <img>, <figcaption> или любое содержимое потока, я бы обернул все внутри <a> tag.

Если вы хотите связать только <img> или любой другой конкретный элемент, я бы обернул все внутри тега <figure>, а затем привязку внутри.

I 'Я не уверен в проблемах доступности в этом случае, но я думаю, что это зависит от содержания.

1 голос
/ 08 ноября 2019

Я проверил и просмотрел общий HTML. также отлажен / проанализирован в Firebug (дополнения Firefox) Box-Model. a правильно обернуто в figure.

* * * * * * * * * * * Второй блок *1006* правильный. a полностью правильно упаковано в figure. 

<!-- Figure inside a -->

<div class="box">
 <a href="#">
   <figure>
    <img src="http://placekitten.com/g/500/500">
   </figure>
  </a>
  <div class="text">Text</div>
</div>

Спасибо

...