Coding with Jesse

Using the a tag without attributes

December 21st, 2006

Did you know you can use <a> by itself without href, name, id or any other attributes?

The W3C says this in the HTML 4 specs:

Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id. Values for these attributes may be set at a later time through scripts.

Weird, eh? How often do the HTML specs talk about putting elements in for scripting purposes? I had assumed never.

So why would you want to use an empty <a>? I don't think it's so practical for scripting purposes, because it'd be better to dynamically add a link using scripting. But it does make sense from a styling point of view.

If you are using a list of links for a navigation or tabs or something, you probably don't want the active link/tab to be clickable. This can confuse users, because they may think that this link/tab goes somewhere else, when really it just points at the current page.

Normally to approach this, I would just remove the <a> from the <li>. But my CSS relied on there being a link there in order to set a background on it. So instead I just removed the href and used an 'active' class like this:

<ul class="nav">
   <li><a href="/">Home</a></li>
   <li class="active"><a>Page 1</a></li>
   <li><a href="/page2">Page 2</a></li>

<style type="text/css">
.nav li {
   list-style: none;
   float: left;

   /* put a repeated background image on the list item */
   background-image: url(nav_background.gif);
.nav li a {
   display: block;
   height: 25px;
   padding: 0 15px;

   /* put a separator image on the right of each link */
   background: url(nav_separator.gif) top right no-repeat;
.nav {
   background-image: url(nav_background_active.gif);

Now the separator image nav_separator.gif is still used on the empty <a>.

Most browsers will render the link differently, like removing the underline and colouring it different. They seem to treat it as if it's just a <span>.

You might argue that this uses unnecessary markup for purely display purposes. I'd argue that it's better to have a link that can't go anywhere than a link with an href that still goes nowhere.

There are probably other ways to take advantage of this. I'd love to hear any other ways that you think this might be useful.


1 . Jason Barnabe on December 21st, 2006

Jason Barnabe

"You might argue that this uses unnecessary markup for purely display purposes. I'd argue that it's better to have a link that can't go anywhere than a link with an href that still goes nowhere."

I'd argue that it's semantically incorrect to use an anchor element that's not actually an anchor. Personally, I'd just put a span in its place, and modify the CSS to .nav li * or .nav li .fakeTabOrWhatever

I'm guessing the fact that this isn't invalid according to the spec is that they have no way of saying one of a set of attributes is required with a DTD. Since they couldn't technically say it was invalid, they decided to remove any ambiguity and say it was valid and a situation you might want to do it.

2 . Jesse Skinner on December 22nd, 2006

Jesse Skinner

I think using an empty <a> is semantically equal to <a href="#">. They are both anchors that don't go anywhere, but at least the first is made obvious by the client that it's not worth clicking. They may even be more semantic than a meaningless <span> by perhaps suggesting that they are anchors which point at the current document.

The worst that could happen is a client might mistake it as a real link, but interpret the location as an empty string, and thus probably conclude that it does point at the current document, which would be correct.

3 . Alastair on March 11st, 2007


In this situation, I would replace the empty <a> tags with <strong> tags to emphasise it's the currently selected menu item, rather than to use an "active" or "selected" class, and then create an li strong { } style. That's how I go about it and it works for me, but each to their own. Still I didn't know about empty A tags and now I do!

4 . Oli on June 8th, 2007


I had no idea this was possible until I accidently created an A tag with only an onClick attribute, which incidently works perfectly! If you click the text surrounded by the a tag it executes the code, on the down side it doesn't highlight the text as a link link it normally would. Still, might be of use to someone.

5 . Alex on June 14th, 2007


I found out by accident when trying to get a clickable link (In a foldable menu) that ran a javascript rather than going somewhere and I have just been trying to get an <A> tag without href to work but have been having some problems. IE6 (At least, have not tried any other browser) does not seem to want to parse CSS code for "hover" and such for that tag if a href is not included.


Where the Style sheet would be something like

LI A:hover
COLOR= blue

Does not seem to work (So that I get the text "Test" in blue when mouse is hovered upon). But if I include an href it works allright. Also href="#" just makes the link point towards the same directory where the file is (At least when developing locally, I have not tried to put it up on the server to see what happens).

Seen another questions somewhere about the same problem but the solution I found seem not to work, I think due to the <LI> tags. Any thoughts on that?



Comments are closed, but I'd still love to hear your thoughts.