Question

请帮我找一个信息框的正确HTML5标签：

<div class="info-box">
   <div class="info-box-icon">
      <i class="fa fa-exclamation"></i>
   </div>

   <div class="info-box-message">
      <p>In the case of questions or problems, please contact us at the email address <a href="mailto:my@adress.com">my@adsress.com</a></p>
   </div>

</div>

我可以使用这个例子吗？

<details class="info-box">
   <div class="info-box-icon">
      <i class="fa fa-exclamation"></i>
   </div>

   <summary="info-box-message">
      <p>In the case of questions or problems, please contact us at the email address <a href="mailto:my@adress.com">my@adsress.com</a></p>
   </summary>

</details>

Answer 1

HTML5中没有details元素（它是HTML5草稿的一部分，但在HTML5作为推荐发布之前被删除）。

对于＆＃34; info-box＆＃34;，没有一般答案使用哪个元素，因为不清楚这样的信息框是什么，以及它在特定情况下使用的上下文。< / p>

您似乎仅为样式/脚本原因添加了div元素，因此可以忽略这些元素以决定使用哪个标记，因为它们毫无意义。

您似乎添加了i元素来显示图标not appropriate。如果必须为此添加空HTML元素（而不是使用CSS和现有元素），请改用span。

因此，您的示例的语义标记可能是：

<p class="info-box">
  In the case of questions or problems, please contact us at the email address <a href="mailto:my@example.com">my@example.com</a>
</p>

如果它是其部分标题的一部分，请将其放在header;如果它的部分页脚的一部分，将其放在footer;如果它与其部分的主要内容无关，请将其放在aside 如果它代表父article（如果有）或body的联系信息，请将其放在address中（可能在header / footer中）。
否则，它只是其部分主要内容的一部分。

信息框的HTML5语义元素？

1 个答案: