Semantically correct way to define an empty anchor

Question

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.

Semantically, you can only have one unique id. I think you want to change it to a class instead. — Sablefoste, Dec 11 '14 at 18:12
The id is the same because I just want to show the different cases, they're not intended to be on the same document at the same time. — arielnmz, Dec 11 '14 at 18:15
Asking for “semantically correct” way is opinion-based and, besides, not a well-defined question. “Semantically” means “as relates to meaning”, but what “meaning” would this be about? — Jukka K. Korpela, Dec 11 '14 at 19:52

score 0 · Answer 1 · answered Dec 11 '14 at 18:24

0

Semantically, it's fine to simply define an <a></a> with no attributes at all.
Referencing the HTML 4.01 spec:

Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id.

answered Dec 11 '14 at 18:24

Etheryte

24,589
11
71
116

score 0 · Accepted Answer · answered Dec 11 '14 at 18:26

0

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

answered Dec 11 '14 at 18:26

SilentTremor

4,747
2
21
34

Ok, so basically if I will be using an anchor that doesn't navigate I would be using the `'#'`, but the document also suggests the use of method calling by advocation (`onclick`), which use I thought was heavily discouraged. – arielnmz Dec 11 '14 at 18:42

score 0 · Answer 3 · answered Dec 11 '14 at 18:26

In HTML 4.01, the tag could be either a hyperlink or an anchor. In HTML5, the tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.

Semantically correct way to define an empty anchor

3 Answers3