纠正网格中内容的语义标记-html5

Question

显示以下图像网格的 text 内容的最语义标记是什么？

我打算在flexbox或css-grid中实现它，并且我正在寻找一种更好的方法，而不仅仅是将关键字包装在div-tags中。

这是我当前的代码（使用的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

我相信最好的方法是将每个单词包装在DIV中，因为您将更好地控制每个单词。

Answer 2

如果图像未传达任何相关信息，则最好通过CSS添加它们。如果无法实现，则应提供一个空的alt属性。

如果他们确实传达了相关信息，则应具有合适的alt属性；如果它与visible关键字相同，则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一起使用。