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:
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.
A link is a connection from one Web resource to another.
A single link is
<a href="#">link</a>and a single button isbutton.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.
Of course. But you can choose to also wrap it with something else, as I’ve described in a few of the examples in the article.
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.
Sometimes I use sliding door concept for single line buttons
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.
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! ;)
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.
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 :)
You really should be using the button element instead, since you have no intention of taking the visitor anywhere (href=”#”).
I think the hash symbol is just for filler, I don’t think he intends to not take the user somewhere.
Yes, of course. Just saying it makes no sense to have a link that leads nowhere. That is why it should be a button instead.
Semantically link and button are very different, so one could argue that if a link does not take the user “somewhere” (another page or a named anchor), then it should be a button.
As a side note, if an anchor is used in lieu of a button, then (aria)
role="button"can help screen-reader users.Great comment Thierry!
I’d like to add one thing: if you don’t set a type attribute on the button, it defaults to submit the contents of the form it belongs to (some older browsers might not be following the specs though).
Setting the type attribute of a button to button (button type=”button”) gives you a button with no default behaviour (won’t submit a form), which makes it ideal in combination with client side scripting.
@Henry – Do you mean like this
<a href=# class=btn role="button">Grab your copy now!<a>@jitendras I’m not Henry, but I’ll answer anyway: yes, like that.
It was my mistake. I wrote your name wrongly, Sorry.
There is point to consider as i saw here https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
“Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding role=”button” alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.”
That’s a great point.
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.
Personally I’ve always used unordered lists if there is a collection of links:
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.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
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.