On many sites and apps, you’ll often have to mark up and style a button that is not part of a list of links, and that basically stands alone, apart from surrounding content.
Buttons like this are often promotional “click here to buy” or “click to download” types of links (of course, not in those exact words).
How should a single, standalone link or button be marked up? As with many things in web development, there isn’t really a right or wrong way to do this, but here’s a summary of some of the different methods.
A Lonely Anchor Tag
Probably the simplest way to do this is:
Just an anchor tag, with nothing else around it. No wrapper, no other HTML element, just a link. Not the most elegant looking solution, but it will get the job done.
A Link Inside a Paragraph
Some people might feel weird with a stray link element, so you could do this:
But that doesn’t feel quite right. I don’t think it’s necessarily wrong, or would cause any accessibility problems or anything, it just seems that it’s unnecessary and if you’re going to do this, then you might as well just have a stray link with nothing wrapping.
A Single Unordered List Item
For some reason, I’ve customarily coded a single link this way:
I learned that navigation links should be styled as an unordered list, and so I applied the same method to a single link. After all, what is a single link but a list of links that contains only one?
Markup-wise, this method might be overkill. But one of the reasons I like this is that if you remove the styles from the page and view the plain HTML in the browser, you’ll see the link offset from the content as a list item, which feels nicer.
A <button> Element
This is probably one of the most popular ways to do this:
It feels more semantic, and it’s certainly clear what this is when you see this in your code. Of course, if your standalone link is a text link, then this is not going to work unless you style it to look like text, which seems pointless.
It Probably Doesn’t Matter
In many instances, including this one, choice of markup doesn’t make a whole lot of difference. If I knew enough about WAI-ARIA maybe I could recommend some solution that incorporates that.
In this case, whatever method you choose depends on what you find easiest to read and maintain when scanning your own code. I like the single unordered list item because when I see it in my markup, it’s clear to me what it is. And it has the advantage of looking separate from surrounding content even when styles are disabled (although I don’t know how much of an “advantage” that really is — it just seems to feel more comfortable that way).
All of these solutions are fine for styling purposes. And even if you use the naked anchor tag, you could always use a pseudo-element technique that mimics multiple elements.
How Do You Do It?
It would be interesting to take a poll to see what markup method is the most common for styling a single button or link. Let me know in the comments if you use a different method than those I’ve described here.