Is an Empty Href Valid

Is an empty href valid?

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

How can I use an empty href attribute without redirect?

You can use:

<a href="javascript:;"">Link</a>

or maybe better if you don't want to use inline JavaScript:

<a href="" (click)="$event.preventDefault()">Link</a>

to realize a Link without any side-effect.

Valid to use a (anchor tag) without href attribute?

The <a>nchor element is simply an anchor to or from some content. Originally the HTML specification allowed for named anchors (<a name="foo">) and linked anchors (<a href="#foo">).

The named anchor format is less commonly used, as the fragment identifier is now used to specify an [id] attribute (although for backwards compatibility you can still specify [name] attributes). An <a> element without an [href] attribute is still valid.

As far as semantics and styling is concerned, the <a> element isn't a link (:link) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.

The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

As links are a special type of button, they have often had their actions overridden to perform alternative functions. Continuing to use an anchor as a button is ok from a consistency standpoint, although it's not quite accurate semantically.

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

<a role="button" tabindex="0" ...>...</a>

The button role tells the user that the particular element is being treated as a button as an override for whatever semantics the underlying element may have had.

For <span> and <div> elements, you may want to add JavaScript key listeners for Space or Enter to trigger the click event. <a href> and <button> elements do this by default, but non-button elements do not. Sometimes it makes more sense to bind the click trigger to a different key. For example, a "help" button in a web app might be bound to F1.

Checking for empty href and appending anchor text if it is empty

if(link = "") is invalid.. You are defining the value by the = operator. It should be if(link == "").. Your code can also be minified - don't really know what you're defining the table and rows for. Just to get the a link? A better way:

var links = document.querySelectorAll('#mydiv a'),
// gets all a links inside [mydiv] div...
i, href;

for(i = 0; i < links.length; i++) {
  href = links[i].getAttribute('href');
  //check the length of href.. is it less than 1 or is a space
  if(href.trim().length < 1) {
    alert(i + ' is null: ' + href);
  }

}

Here is a working example

empty href causing the documents.ready to fire

As other people have told you href causes page to reload, so you got the option to use href="javascript:void(0);" or href="#" in order to avoid the page to reload, if you want to keep the underlined link style you get when using href tag.

e.preventDefault() in the method won't work, because the parameter passed to the function isn't an event. It's the link element itself.

AFAIU you're trying to create some months option for your users. A more modern aproach would be to use data-something attributes. You could use them like this:

function numberOfmonthsToloadInDatabase(link) {    console.log(link.dataset.months);}

<li>    <a onclick='numberOfmonthsToloadInDatabase(this)' href='#' data-months='12'>       12 Monat    </a></li><li>    <a onclick='numberOfmonthsToloadInDatabase(this)' href='#' data-months='10'>       10 Monat    </a></li>