html - 更正网格中内容的语义标签 - html5

Question

要显示以下图像网格的文本内容，最语义化的标签是什么？

我打算在 flexbox 或 css-grid 中实现它，我正在寻找一种比将关键字包装在 div 标签中更好的方法。

这是我当前的代码(使用 flexbox)

<div class="d-flex flex-wrap gridcontainer">
<div class="gridimage">
    <img src="placeholders/img16.jpg" />
</div>
<div class="gridkeyword">
    <p class="gridkeyword__keyword">Process-Oriented</p>
</div>
<div class="gridkeyword">
    <p class="gridkeyword__keyword">Valence</p>
</div>
<div class="gridimage">
    <img src="placeholders/img12.jpg" />
</div>
<div class="gridkeyword">
    <p class="gridkeyword__keyword">Quality</p>
</div>
<div class="gridimage">
    <img src="placeholders/img18.jpg" />
</div>

Answer 1

如果图片没有传达任何相关信息，您最好通过 CSS 添加它们。如果那不可能，您应该提供一个空的 alt属性。

如果他们确实传达了相关信息，他们应该有一个合适的 alt属性;如果它与可见关键字相同，则 alt属性应为空。

您可以提供一份列表，代表企业的优点:

<!-- images are decoration, added via CSS -->
<ul>
  <li>Process-oriented</li>
  <li>Valence</li>
  <li>Quality</li>
</ul>

<!-- images are decoration, or the 'alt' would be the same as the keywords -->
<ul>
  <li><img src="" alt="" /> Process-oriented</li>
  <li>Valence <img src="" alt="" /></li>
  <li>Quality <img src="" alt="" /></li>
</ul>

<!-- images are relevant -->
<ul>
  <li><img src="" alt="Our machines … foobar." /> Process-oriented</li>
  <li>Valence <img src="" alt="We … foobar." /></li>
  <li>Quality <img src="" alt="The best … foobar." /></li>
</ul>

添加span/div元素和 class样式所需的属性。

如果图像很重要(不过根据您的屏幕截图，情况似乎并非如此)，您可以考虑使用 figure与 figcaption .