Search code examples
javascripthtmlsemantics

Semantically correct way to define an empty anchor

I want to know which form of the following structures is the one that's semantically correct, if I want to use an achor that triggers a javascript callback but doesn't make the window navigate to another place:

The javascript:

window.addEventListener('load', function() {
    document.getElementById('AuxAnchor').addEventListener('click', function(e) {
        // Do something
        e.preventDefault(); // Don't navigate to anywhere
    }, false)
}, false);

The HTML:

Defined href attribute with blank value:

<a id="AuxAnchor" href="">Click me</a>

Defined href attribute with missing in-document ID:

<a id="AuxAnchor" href="#">Click me</a>

Undefined href attribute:

<a id="AuxAnchor">Click me</a>

Note that in the latter (undefined href attribute) I have to simulate an hyperlink appearance by using styles, but that's basically just a cosmetic issue, and it doesn't bother me at all to do so.

Solution

  • All options are correct in HTML5: http://www.w3.org/TR/html-markup/a.html

    If you want to cover different angles of the question, check a bit accessibility (people with disabilities) guidelines:

    http://www.w3.org/TR/WCAG20-TECHS/SCR35.html