Is an empty href valid?
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.
It is valid.
However, standard practice is to use href="#" or sometimes href="javascript:;".
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?
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 (/).
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>