This little image is from a key describing what each line on a graph represents. The colours are dynamically decided on the server. The graph is drawn using Raphael.js.

How should I markup the lines in the key? Images are impossible as I have no idea what the colours of the lines will be.

It feels wrong using a border, should it be a little div? or a hr? Or even using Raphael to draw them? (That feels like overkill) Or some other suggestion.

Looking for the best semantic markup suggestion.

Graph Key

  • Image doesnt work Menno Geelen about 9 years ago
  • Hmm no hotlinking from twitpic it seems. John Wards about 9 years ago

1 answer


I think I would do it with a horizontal rule, something like this:


.row { float: left; }

hr {
  width: 20px;
  background-color: #FC0;
  height: 1px;
  float: left;
  margin: 7px 5px 7px 0pt;
  border: 1px solid #FC0;

small { float: left; }


<div class="row"><hr><small>Target</small></div>

Obviously you'll need to adjust the margin on the <hr/> to get it central depending on your font size.

Answered about 9 years ago by John Catterfeld
  • I've just double checked this solution and IE7 (so presumably IE6) doesn't play fair. In which case I personally would use a `<div>` instead. John Catterfeld about 9 years ago