What is the semantically correct way to break these lines?

Question

I've got the following footer for a project I'm working on:

<footer>
  License: <a href="#">Creative Commons BY</a>
  Email: <a href="mailto:#">email@mail.com</a>
  Telephone: <a href="tel:#">0123456789</a>
</footer>

For this footer I want each link (and their prefixes) to be displayed on a separate line, and I would like to do it as semantically valid as possible, without adding unneccesary markup.

I've already considered:

• The <br> tag, but it is only considered semantic in poetry (or similar content where the line-break is an inherent part of the information, so I cannot use that to break the lines (see this question: <br> tag semantic alternative usage)

• Using an ul, but it isn't really a list, so wrapping it in an ul also isn't really a valid option.

• Using fixed widths, but I would really like to find a dynamic solution.

• Surrounding each line with a <p>, which seems a bit overdone, because it isn't really paragraphs, but single lines that I'm wrapping.

What would be the best way to break these lines in a semantically sensible way, without adding extra markup?

Answer 1

talking about semantic, this could be a good usecase for <address> if the contact information provided is related to the document (I may suppose, since I see a license information included¹): see http://html5doctor.com/the-address-element/ for further reference about it.

(If not, the same page on html5doctor is suggesting to simply use a pararaph with the hcard microformat using <br> where it's necessary)

So in the first scenario I would go with

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

and

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

see jsbin example: http://jsbin.com/ajohur/1/edit

---

⁽¹⁾ Edit — as pointed out by @unor, the information license should probably stay outside the address element, so I wrapped it in a paragraph.