糾正網格中內容的語義標記-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

我相信最好的方法是將每個單詞包裝在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一起figcaption 。