• Using the a tag without attributes

    Dec 21 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>
    </ul>
    
    <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 li.active {
       background-image: url(nav_background_active.gif);
    }
    </style>

    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.

  • Comments

    1. Jason Barnabe at 11:30pm on December 21, 2006

    "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 at 1:47am on December 22, 2006

    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 at 9:14pm on March 11, 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 at 5:22am on June 8, 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 at 9:34am on June 14, 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.

    ....
    <LI><A>Test</A></LI>
    ....

    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?

    Regards

    Alex

    Commenting is now closed. Come find me on Twitter.