Search code examples
htmlsemantic-markup

Correct semantic tags for content in grid - html5

What would be the most semantic tag to display the text contents of the following image grid?

I going to implement it in either flexbox or css-grid and I'm searching a better way than just wrap the keywords in div-tags.

image grid

Here's my current code (used 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>

Solution

  • If the images don’t convey any relevant information, you would ideally add them via CSS. If that’s not possible, you should provide an empty alt attribute.

    If they do convey relevant information, they should have a suitable alt attribute; if it would be the same as the visible keyword, the alt attribute should be empty.

    You could provide a list, representing what’s good about the business:

    <!-- 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>

    Add span/div elements and class attributes as needed for styling.

    If the images are of importance (doesn’t seem to be the case according to your screenshot, though), you could consider using figure with figcaption.