239

One of our web developers uses the following html as a placeholder for styling a drop down list.

<a href="" class="arrow"></a>

Is this considered anchor tag valid?

Since there is no href value, it shows up as broken on some of our link checker reports.

Travis J
  • 81,153
  • 41
  • 202
  • 273
matthew
  • 2,832
  • 3
  • 24
  • 24
  • 11
    **It does not work in IE though!** Well it works in IE but with a completely different behavior, against the spec. So it is valid per spec, but not in practice :((( – ZhongYu Feb 21 '14 at 07:09
  • Expanding on what bayou.io said, IE links to the directory above the document: http://stackoverflow.com/questions/7966791/empty-html-href-leads-to-directory-listing-in-ie – Nate Apr 27 '15 at 14:18
  • 1
    Yes, an empty href in older versions of IE (7/8, etc.) could have bad consequences, such as directory listing. There is much documented on the subject if you google it – Ringo Dec 01 '16 at 22:16
  • for example: https://gtmetrix.com/avoid-empty-src-or-href.html. Never mind just old browsers, it affects current IE, Edge, and also Webkit browsers. – Ringo Dec 01 '16 at 22:24

10 Answers10

223

It is valid.

However, standard practice is to use href="#" or sometimes href="javascript:;".

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • 25
    As Stated in RFC 2396: A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, – Oct Apr 12 '11 at 15:48
  • 38
    when I click `href="#"`, focus moves to top of the page in IE, so I thkink `href="javascript:;"` is better – Deckard Jan 07 '13 at 08:33
  • 38
    href="#" is an anti-pattern. It adds an extra entry to the browser history and in some cases makes the browser scroll to top, you can just leave out the href attribute if you are not using it. it will default to "" and therefore reload the page if not prevented. – tosh Apr 26 '13 at 21:30
  • 18
    @tosh, no, I'm pretty sure if you leave out the href attribute, the element isn't styled as a link, isn't focusable, and doesn't create a link as or does. If it does work for you, could you share a JSFiddle showing it? – Gui Prá Aug 18 '14 at 13:30
  • 2
    @n2liquid-GuilhermeVieira thanks a lot for your precision. I did not mean that omitting the href attribute is the solution. I did not word it right. I meant to use the empty string as the href attribute value. – tosh Aug 18 '14 at 18:20
  • 6
    @tosh, you know what's funny? Apparently since HTML5, omitting the attribute should work that way, see http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element (Thanks halfdan for submitting that answer below.) Apparently this hasn't been implemented by vendors yet, and since it's still just candidate recommendation, it's hard to tell whether it'll be kept in the final standard or whether vendors will comply before that. – Gui Prá Aug 18 '14 at 21:58
  • IE links to the directory above the document: http://stackoverflow.com/questions/7966791/empty-html-href-leads-to-directory-listing-in-ie – Nate Apr 27 '15 at 14:17
150

As others have said, it is valid.

There are some downsides to each approach though:

href="#" adds an extra entry to the browser history (which is annoying when e.g. back-buttoning).

href="" reloads the page

href="javascript:;" does not seem to have any problems (other than looking messy and meaningless) - anyone know of any?

UpTheCreek
  • 31,444
  • 34
  • 152
  • 221
  • 25
    Another interesting one is href="//:0", which will not make a request to the server nor leave any history. – diachedelic Aug 01 '12 at 01:23
  • 2
    The //:0 makes some of my images fail to load in Chrome. Seems Chrome interprets that as receiving a cancel command. – David Grenier Sep 17 '12 at 22:50
  • 7
    href:"javascript:;" was just what I needed to make stuff work in both Android an iOS webviews – dumazy Sep 27 '13 at 08:21
  • 2
    IE links to the directory above the document: http://stackoverflow.com/questions/7966791/empty-html-href-leads-to-directory-listing-in-ie – Nate Apr 27 '15 at 14:18
  • 2
    I have not tested this, but I suspect that href="javascript:;" would violate the Content Security Policy that disallows inline JavaScript. If you intend to turn on this policy, I would use one of the alternatives. – Mark Good Oct 27 '15 at 16:04
  • I'm finding that `href=""` is reloading the page *in a new tab* - no idea why. I have to explicitly add `target="_self"` – EML Feb 27 '20 at 12:42
81

While it may be completely valid HTML to not include an href, especially with an onclick handler, there are some things to consider: it will not be keyboard-focusable without having a tabindex value set. Furthermore, this will be inaccessible to screenreader software using Internet Explorer, as IE will report through the accessibility interfaces that any anchor element without an href attribute as not-focusable, regardless of whether the tabindex has been set.

So while the following may be completely valid:

<a class="arrow">Link content</a>

It's far better to explicitly add a null-effect href attribute

<a href="javascript:void(0);" class="arrow">Link content</a>

For full support of all users, if you're using the class with CSS to render an image, you should also include some text content, such as the title attribute to provide a textual description of what's going on.

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>
Nick
  • 1,265
  • 12
  • 15
  • 5
    Thanks for mentioning that omitting `href` will mess with accessibility interfaces. – Daniel Sokolowski Feb 03 '16 at 18:30
  • 1
    I'd also add – from an accessibility perspective – that setting the `href` value to anything else than a relative/absolute path will cause screen reader issues. Avoid using a hash/pound symbol as workaround for this issue as it is not meant for this. Screen readers may (currently VoiceOver does) announce your link to be a [fragment identifier](https://www.w3.org/2001/tag/2011/01/HashInURI-20110115) (link to somewhere in the current page) and is also valid from a standards point-of-view. see https://www.w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash – Michel Hébert Jan 25 '17 at 15:07
  • Why take so much pity on screen readers though? They have if statements too. – doug65536 Nov 07 '21 at 20:25
79

Although this question is already answered (tl;dr: yes, an empty href value is valid), none of the existing answers references the relevant specifications.

An empty string can’t be a URI. However, the href attribute doesn’t only take URIs as value, but also URI references. An empty string may be a URI reference.

HTML 4.01

HTML 4.01 uses RFC 2396, where it says in section 4.2. Same-document References (bold emphasis mine):

A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document.

RFC 2396 is obsoleted by RFC 3986 (which is currently IETF’s URI standard), which essentially says the same.

HTML5

HTML5 uses (valid URL potentially surrounded by spaces → valid URL) W3C’s URL spec, which has been discontinued. WHATWG’s URL Standard should be used instead (see the last section).

HTML 5.1

HTML 5.1 uses (valid URL potentially surrounded by spaces → valid URL) WHATWG’s URL Standard (see the next section).

WHATWG HTML

WHATWG’s HTML uses (valid URL potentially surrounded by spaces) the definition of valid URL string from WHATWG’s URL Standard, where it says that it can be a relative-URL-with-fragment string, which must at least be a relative-URL string, which can be a path-relative-scheme-less-URL string, which is a path-relative-URL string that doesn’t start with a scheme string followed by :, and its definition says (bold emphasis mine):

A path-relative-URL string must be zero or more URL-path-segment strings, separated from each other by U+002F (/), and not start with U+002F (/).

Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
27

The current HTML5 draft also allows ommitting the href attribute completely.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

To answer your question: Yes it's valid.

halfdan
  • 33,545
  • 8
  • 78
  • 87
21

Indeed, you can leave it empty (W3 validator doesn't complain).

Taking the idea one step further: leave out the ="". The advantage of this is that the link isn't treated as an anchor to the current page.

<a href>sth</a>
anroots
  • 1,959
  • 1
  • 14
  • 21
  • Although: `` → _Attribute href without an explicit value seen. The attribute may be dropped by IE7._ – c24w Mar 14 '13 at 21:58
  • 1
    I like this solution too. Do you know of any other disadvantages except IE7 behavior? – rinat.io Jun 30 '14 at 14:20
  • This is illegal syntax. According to the [spec](https://dev.w3.org/html5/html-author/#attributes) “[Empty Attribute] syntax is permitted only for boolean attributes.” – Robert Siemer Apr 09 '20 at 22:23
11

Whilst W3's validator may not complain about an empty href attribute, the current HTML5 Working Draft specifies:

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.

A valid URL is a URL which complies with the URL Standard. Now the URL Standard is a bit confusing to get your head around, however nowhere does it state that a URL can be an empty string.

...which means that an empty string is not a valid URL.

The HTML5 Working Draft goes on, however, to state:

Note: The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

This means we can simply omit the href attribute altogether:

<a class="arrow"></a>

If your intention is that these href-less a elements should still require keyboard interraction, you'll have to go down the normal route of assigning a role and tabindex alongside your usual click/keydown handlers:

<a class="arrow" role="button" tab-index="0"></a>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • 1
    Indeed. Unfortunately, as you quoted,leaving off the `href` makes it not a hyperlink, which makes the `onclick` functionality inaccessible to keyboard users. – aij Mar 22 '16 at 16:34
9

A word of caution:

In my experience, omitting the href attribute causes problems for accessibility as the keyboard navigation will ignore it and never give it focus like it will when href is present. Manually including your element in the tabindex is a way around that.

Jason
  • 2,280
  • 23
  • 22
3

it's valid but like UpTheCreek said 'There are some downsides to each approach'

if you're calling ajax through an tag leave the href="" like this will keep the page reloading and the ajax code will never be called ...

just got this thought would be good to share

Ray Tsai
  • 128
  • 5
  • 14
2

Try to do <a href="#" class="arrow"> instead. (Note the sharp # character).

halfdan
  • 33,545
  • 8
  • 78
  • 87
elvenbyte
  • 776
  • 1
  • 17
  • 34