2
\$\begingroup\$

Wikipedia uses Infoboxes for many of its articles. They contain basic information in a structured form about the topic. Take for example the articles about Stack Overflow and donkeys.

Their structure is something like:

  • Title
  • Icon or Image
  • One or more sections
    • Each containing on or more key value pairs
    • or a text

Wikipedia uses for Infoboxes Tables.

My approach in HTML5 is:

<aside class="infobox">
  <h1>Donkey</h1>
  <img src="donkey-image.jpg" alt="A donkey at Clovelly, North Devon, England standing on a meadow">
  <section>
    <h2>Conservation status</h2>
    Domesticated
  </section>
  <section>
    <h2>Scientific classification</h2>
    <dl>
      <dt>Kingdom</dt><dd>Animalia</dd>
      <dt>Phylum</dt><dd>Chordata</dd>
      <dt>Class</dt><dd>Mammalia</dd>
      <dt>Order</dt><dd>Perissodactyla</dd>
      <dt>Family</dt><dd>Equidae</dd>
      <dt>Genus</dt><dd>Equus</dd>
      <dt>Subgenus</dt><dd>Asinus</dd>
      <dt>Species</dt><dd>E. africanus</dd>
      <dt>ubspecies</dt><dd>E. a. asinus</dd>
    </dl>
  </section>
  <section>
    <h2>Trinomial name</h2>
    <span>quus africanus asinus</span>
    <a href="/wiki/Carl_Linnaeus">Linnaeus</a>, <a href="/wiki/10th_edition_of_Systema_Naturae">1758</a>
  </section>
</aside>

Is this HTML correct and useful? Are there better ways to write it?

This question is not only about Wikipedia but on how to write such constructs like infoboxes, that are used on other sites as well.

\$\endgroup\$

migrated from stackoverflow.com Apr 17 '15 at 16:22

This question came from our site for professional and enthusiast programmers.

1
\$\begingroup\$

First of all use one h1 on the page (it's not stated anywhere but it's generally good practice), which means you cannot use in sidebar. I would start with h3 and do subheadings as h4 in your case.

Using aside (http://html5doctor.com/aside-revisited/): When used in article tag it will be good structure, however when outside of it, it will mean that it's a sidebar(not connected to article itself).

You might as well use figure and fiugurecaption element with images and their caption (it's nice to provide image probably there).

One more thing. If your infobox is separate content why not use article instead of aside? Let's say you are writing text about peanuts. If you want to put that peanuts are produced in kongo in infobox it qualify as separate content in my opinion.

EDIT:

About wikipedia. Wikipedia is using tables as the data inside is table alike. In your case too. dl doesn't really make sense in this case as it shows that is dictionary definition list, where it actually is table data. It will be better visible when you add for example english name next to latin you will see even more that data is table suitable

\$\endgroup\$
  • \$\begingroup\$ The infobox would be inside <article>. \$\endgroup\$ – Pyfisch Apr 10 '15 at 14:54
  • \$\begingroup\$ Updated: The infobox would be inside article. I really do not see that infoboxes are table data. dl has been a "dictionary definition list" in HTML4 but now it is a "association list consisting of zero or more name-value groups". html5doctor.com/the-dl-element Isn't this what the values in an infobox are? You propose to start with h3, but if I do the structure is like <h1>Peanuts</h1><aside class="infobox"><h3>Peanuts</h3>... the h2 is skipped, this is also not logical I think. \$\endgroup\$ – Pyfisch Apr 10 '15 at 15:08
  • \$\begingroup\$ I would still use table. You cannot really consider that as description list. there's quite easy connection type of data -> data which tables are done for. so first column: types. second: values. However I wouldn't put to much concern to that \$\endgroup\$ – Maciej Paprocki Apr 10 '15 at 16:55
  • \$\begingroup\$ When it comes to h2. Maybe in this special case you can use h2, however in most of articles you have sub headings which should have more importance than probably infobox. It just seems more natural as they have this same kind of importance. There's nothing wrong in missing h2 I think. \$\endgroup\$ – Maciej Paprocki Apr 10 '15 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.