How Do You Mark Up A Single Link or Button?

How Do You Mark Up A Single Link or Button?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:

Let's Do This

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:

Let's 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.

Also, this has the drawback that it doesn’t actually do anything unless you add JavaScript or use it as part of a form that can be submitted. So I think the <button> element is fine if it’s part of functionality that is only available when JavaScript is available. And in that case, you might even be advised to insert the element dynamically with JavaScript so that non-JS users don’t even see it.

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.

Photo credit: Red button on white from Bigstock

21 Responses

  1. Raanan Avidor:

    A link is a connection from one Web resource to another.
    A single link is <a href="#">link</a>and a single button is button.
    But when will you have a single link or button? when it’s a part of something, it will be wrapped by that something, article, navigation , aside, header or footer.

  2. Roland:

    I really find it hard to layout buttons (single links) to keep up a good working typography flow in your website. Because it’s no block element like a paragraph oder headline, it’s very hard to consist a baseline-grid and make this link work with all the other types of typography. So everytime the link is not part of a navigation, a link-list or whatever, I try to make it part of something like this. At least it is part of a text-element… a paragraph, which then keeps an eye on its margin to other elements using the baseline.

  3. Raghavender Reddy:

    Sometimes I use sliding door concept for single line buttons

    
    <div class="button">
          <a href="#">
              <span>Let's Do This</span>
           </a>
    </div>
    
  4. Jim Sacci:

    Recently I have been using the stand alone anchor tag.

    <a href="#" title="Register for radeau boat dive">Register for something</a>

    I think I’ll give the unordered list a try to see how It feels.

  5. Pretty sure if it’s a single link, you’ll be doing just fine with a <a href=”"> tag.

    If it has some sort of context or relation to something else, then use markup to describe that.

    So if it’s part of a collection of links, then a unordered list is a good candidate to express that.

    Don’t sweat it! ;)

  6. Anders:

    Really depends on context and intent, but in most cases a single a tag, or button tag will suffice. Why make it a list if it will only contain one item?

    Not sure if I got you wrong, but are you suggesting that links and buttons are interchangeable?

    In any case, it’s refreshing to read a blog post on web semantics. It’s a topic that has been rather neglected recently.

  7. I go for a standard link markup like this —
    <a href=# class=btn>Hey, I'm a button!<a>

    And if I need to style up these buttons separately then I can do it. It is my idea of bringing in OOCSS to links and buttons. I am currently developing this idea further :)

    • Anders:

      You really should be using the button element instead, since you have no intention of taking the visitor anywhere (href=”#”).

  8. I think wrapping a lone link in something is just adding needless extra code. link is all that is needed. You can then style the a tag itself.

    If your code is nicely indented and organised well you should have no problem scanning it and seeing the link.

    Using drop shadows, rounded borders & gradients you can create what looks like a real button, using only an a tag.

  9. Personally I’ve always used unordered lists if there is a collection of links:

    <ul>
    <li><a href="#goes-some-where.com" title="name of link">name of link</a></li>
    <li><a href="#goes-some-where.com" title="name of link">name of link</a></li>
    <li><a href="#goes-some-where.com" title="name of link">name of link</a></li>
    <li><a href="#goes-some-where.com" title="name of link">name of link</a></li>
    </ul>
    

    This would apply to navigation links (by default) and a collection of links anywhere else on the page.

    Other that that I use <a> tags for singular links. Good practice is to avoid unnecessary additional of code.

  10. a link is a link hence you should code it like this <a href=”http://bla.bla/” title=”bla is the new bla”>bla…

    but we should put a bit of context semantics into the equation:

    - if is a “get your copy now” sort of link I usually wrap it in a <div class=”call-to-action”>… and usually this helps also for ancillary content around it like <p>free pdf…

    - if is for example a link at the bottom of an article “the blog of the author”, or a piece of navigation “more”, I usually go for the <ul> take, in that case I treat it as a list with a single element

  11. RayM:

    The MEANING of a specific piece of content is the key to how to mark it up semantically. The reason you often see links in ULs it’s because a NAVIGATION bar is a LIST of links (in no particular order, or else it would be an OL). A single link , especially when we KNOW it will not be joined by other links is NOT part of a list. Some , myself included , feel an aversion to having an anchor tag without a (block level) wrapper … of course this was before HTML5 and even before that it was just merely a suggestion that inline elements should not be siblings of block elements. Depending on the content , I include the link as the last text in the last P and style accordingly. If this is not possible, for some reason, I would set the link aside in its own DIV ( since a sing e call to action is NOT a paragraph, using a P would seem misleading) or even by itself, if I am feeling extra stingy with my tags.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.