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

Question

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

我打算在 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 属性；如果它与可见关键字相同，则 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。

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

Correct semantic tags for content in grid - html5

html

semantic-markup