HTML5 semantic element for info-box?

Question

Please help me with finding the right HTML5 tag for an info message box:

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

Can I use this example?

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

I want completely create my web in html5. My question is can i use element details for info-box? — marefly, Apr 12 '15 at 14:40

score 1 · Answer 1 · edited May 23 '17 at 10:27

There is no details element in HTML5 (it was part of HTML5 drafts, but got removed before HTML5 was published as Recommendation).

There is no general answer which element to use for an "info-box", as it’s not clear what such an info-box is, and in which context it gets used in your specific case.

It seems that you have added the div elements only for styling/scripting reasons, so these can be ignored for deciding which markup to use, as they are meaningless.

It seems that you have added the i element for displaying an icon, which is not appropriate. If you have to add an empty HTML element for this (instead of using CSS resp. existing elements), use span instead.

So the semantic markup for your example might be:

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

If it’s part of its section’s header, place it in header; if part of its section’s footer, place it in footer; and if it’s not related to its section’s main content, place it in aside.
If it’s representing contact information for the parent article (if any), or the body, then place it in address (possibly itself in header/footer).
Otherwise, it’s simply part of its section’s main content.

HTML5 semantic element for info-box?

1 Answers1