Map legend with CSS

Question

How would you style a legend map with css only (no images)?

Do I use div element for little squares of color or a span element?

Something like this: http://golondrinas.cornell.edu/Maps/Map%20legend.png

Answer 1

I'd personally use a definition list:

dt {
width: 40px;
height: 40px;
display: inline-block;
overflow: hidden;
border: 1px solid #000;
}
.aqua {background-color: aqua; color: aqua; }
.orange {background-color: #f90; color: #f90; }
.black {background-color: #000; color: #000; }

dd {
display: inline-block;
width: 15em;
margin: 0 0 0 1em;
}


<dl>
<dt class="aqua">Aqua</dt>
<dd>T. bicolor range</dd>
<dt class="black">Black</dt>
<dd>T. thalassina range</dd>
<dt class="orange">Orange</dt>
<dd>T. euchrysea range</dd>
</dl>

I'm not sure it's any more semantic than @Tor Valamo's answer, but it feels like it makes more sense to me.

---

Edited to add link to a jsbin demo in response to comment by OP.

Answer 2

You can use whatever you want. There's no best practice for this rather rare example.

The description "a coloured box" fits a div best I think. span would usually mean something inline, but could work as well, seeing as there is one per line, so to speak. You would have to make it inline-block, which isn't supported in all browsers, or block, but a div is block by default, so no hassle with that. With a div however you would need to possibly float it, i'm not quite sure. With both you'd have to set the width.

So to summarize, there's none that is better than the other, but div would be more semantically correct, since span should usually contain something that it "spans".