Is an empty href valid? - html

One of our web developers uses the following html as a placeholder for styling a drop down list.
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?

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
Link content
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.
Link content

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 (/).

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.

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>

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>

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.

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

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

Related

Is it standard web-browser behaviour to prepend the current URL to incomplete links?

If a website includes an incomplete link such as the following:
Link
Link
Is it standard, universal behaviour that the link would be interpreted as the current URL with the href value appended to it?
The HTML5 spec defines how [href] attributes behave
The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.
which links to:
A string is a valid URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid URL.
which links to:
A URL is a valid URL if it conforms to the authoring conformance requirements in the URL standard. [URL]
which links to a sizable block of text, but I think the following is important:
Most of the URL-related terms used in the HTML specification (URL, absolute URL, relative URL, relative schemes, scheme component, scheme data, username, password, host, port, path, query, fragment, percent encode, get the base, and UTF-8 percent encode) can be straightforwardly mapped to the terminology of [RFC3986] [RFC3987].
As for the "incomplete link" examples you included in your question. They are examples of a "fragment" and "query" respectively, which have an implicit relative URL of . which represents the current URL (note that it will not merge query strings or document fragment identifiers).

Meaning of Rel atttibute

I found a strange a href in a webpage. It looks like
<a href=... rel="servername.com|6d63402c" ...other properties... ></a>
What does cryptic |6d63402c mean ? Is it a bitwise OR operation or just a string?
The document contains different links with different rels in this style.
The rel attribute specifies the link relationship type.
In HTML5 you may only use rel values that
are defined in the HTML5 specification, or
are registered in the Microformats wiki page existing rel values: HTML5 link type extensions.
As the value servername.com|6d63402c is not defined/registered, the page uses invalid markup.
As to what this specific value does: we can’t know (well, because it is not defined/registered). It’s probably some internal or third-party script that makes use of it. They should better use the data-* attribute instead of misusing rel.
Per the tag wiki:
The rel attribute is used in HTML elements to specify the relationship and connection between the current document and the linked document.
Sources: W3C (link)
Source: W3Schools (link)

What is the difference between these two HTML meta tags?

First:
<meta http-equiv="refresh" content="0" url="http://www.google.com"/>
Second:
<meta http-equiv="refresh" content="0;URL=http://www.google.com"/>
The first one seems more sane, but does not work, while the second one works, but seems ill formed.
A meta tag with http-equiv is actually a way to put the *equiv*alent of a HTTP response header into a HTML page. A header in HTTP consists of field name and content, thus the second is in this case correct.
According to W3 schools (yeah, I know. Not the best source according to some know-it-alls, around here) the Meta tag only has 5 supported attributes:
charset (html5 only) : Specifies the character encoding for the HTML document
content : Gives the value associated with the http-equiv or name attribute
http-equiv : Provides an HTTP header for the information/value of the content attribute
name : Specifies a name for the metadata
scheme (not in html5) : Specifies a scheme to be used to interpret the value of the content attribute
The main difference is, as you say, that the latter (often) works, the former does not. The former does not comply with any HTML specification or draft either; there is no attribute named url in HTML. (Attributes that take URL values have names like href and scr, by the way.)
The latter is in principle more vague in HTML specs and drafts. HTML 4.01 mentions the construct indirectly, without giving the exact form: “Some user agents support the use of META to refresh the current page after a specified number of seconds, with the option of replacing it by a different URI. Authors should not use this technique to forward users to different pages, as this makes the page inaccessible to some users. Instead, automatic page forwarding should be done using server-side redirects.”
But HTML5 CR more realistically describes the construct and its function in detail and declares it as conforming.
From the HTML perspective, the value of the content attribute is just a string, which may be subject to rules defined in other specifications. In this case, the odd format imitates an HTTP header, which was originally introduced by Netscape, later widely supported by browsers though never standardized in HTTP specifications.

Is it possible to specify user agent with URL in HTML?

I'm working on a mail server that sends HTML emails down to a mail client. Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent? The integrated browser in our custom client could inspect the HTML to determine what user agent to use and then take that into account when opening the URL.
If it's possible to add a custom (non-standard) attribute to the <a> element or possibly a child element to it, that'd work too, if it's valid to do so. Thanks in advance.
Can the HTML DOM be modified to indicate that either a single or all URLs (<a href=""> elements) use a specific user agent?
Not in any standard way.
If it's possible to add a custom (non-standard) attribute to the element or possibly a child element to it, that'd work too, if it's valid to do so.
"non-standard" is practically invalid by definition.
There is a loophole in data- attributes (since they are defined by the specification as a way to add extensions) but:
"These attributes are not intended for use by software that is independent of the site that uses the attributes"
HTML 5 is a Candidate Recommendation, not a standard.

Why is the # convention used in empty anchor tag hrefs?

I understand that it's a good idea not to leave empty anchor tags. In jQuery and other syntaxes I've noticed everyone typically uses a # to fill the gap (<a href='#'>anchor text</a>). Is this character any better or worse than filling it with anything else? (e.g. <a href='$'>anchor text</a>). I have no reason to want to do this, but seemingly no reason aside from convention to do it the other way either. Why is the # convention used in empty anchor tag hrefs?
This is because the # character in a URL references the local page.
It is used for named anchors (or any ID) within a page, so a link can jump directly to that area.
Wikipedia calls it the fragment identifier and has this to say:
The fragment identifier, if present, specifies a part or a position within the overall resource or document. When used with HTTP, it usually specifies a section or location within the page, and the browser may scroll to display that part of the page.
As a practical example - this link to wikipedia has a fragment identifier (always at the end of the URL):
http://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax
In the page, there is a <span id="Syntax" ... tag, and the browser jumps directly to it.
This way, if the user has disabled javascript, actually following the link to "http://mysite.com/#" will not have any negative consequences.
For example, these links still work, since # specifies a location on the current page:
http://www.stackoverflow.com#
http://www.stackoverflow.com/#
while these don't:
http://www.stackoverflow.com$
http://www.stackoverflow.com/$
The link denoted by <a href= points to somewhere else. This somewhere could be on the other side of the world (absolute URL), or locally on the same domain/path (relative URL). Just leaving it empty refers to the very document itself.
The # is the character used to separate an anchor from the rest of the URL. Browers don't even send it to the server, but use it to vertically scroll to the position in the page marked with this anchor (using <a name="foo"></a>).
So basically, <a href="#"> instructs the browser to stay on the same page. It is usually used together with JavaScript - hooking into onClick events - so that the JavaScript does something useful, then return false to prevent the browser from actually following the link. But if he would (e.g. if JavaScript is disabled, or return false is ommitted) then it would not leave the current site, usually not even reloading it.
So #is used not as a random char, but because that's actually the char specified for the purpose of denoting an anchor in a link - it just happens that in your case you neither need the actual link (to another page) nor the anchor, but just a clickable element.
it's mostly old school way of preventing the click action to trigger a page reload.
If you aren t using the href attribute just leave it empty, or even better if you can target some fallback URL for people with JS disabled