为网格中的内容添加正确的语义标签- html5
为网格中的内容添加正确的语义标签- html5
提问于 2018-07-18 19:35:44
要显示以下图像网格的text内容，最具语义的标记是什么？
我将在flexbox或css-grid中实现它，我正在寻找一种更好的方法，而不仅仅是将关键字包装在div-tag中。
这是我当前的代码(使用了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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-19 23:02:13
如果图像没有传达任何相关信息，您最好通过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属性以设置样式。
如果图片很重要(根据你的截图，似乎不是这样)，你可以考虑在figcaption中使用figure。
Stack Overflow用户
发布于 2018-07-19 04:56:18
我认为最好的方法是将每个单词包装在一个DIV中，因为您可以更好地控制每个单词。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51401028
复制相关文章
相似问题