HTML for Wikipedia infoboxes 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:

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


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