Redirect: HTML or JS?

Question

Commonly I see two main methods for redirecting the user to another page, being them:

HTML:

<a href="pt.stackoverflow.com">StackOverflow</a>

and

Javascript:

window.location.href="http://answall.com";

After all, what is the difference between them? There is a safer, faster or better method ?

Answer 1

Face are so many differences that it is even complicated to go into many details, but let’s talk about this image

In the image above you can notice that the first sentence is a link? Most likely not, unless the text was click here or something like that. In addition, readers of tb screen can not read the link path, so from the point of view of accessibility tb is bad. Because the link with JS, neither the Focus when pressing the tab he receives, just as you do not change the cursor type to inter when you put the mouse up.

So a link in JS is less accessible, probably should harm the SEO, and is not intuitive for the average user, because even he may have difficulties in identifying a clickable element I throw this way harming the UX

See for yourself the behavior of one and the other, and how the user has the feedback of one and the other.

<p onclick="window.location.href='http://answall.com'">link na tag "<" p ">" com onclick</p>
<a href="//pt.stackoverflow.com">link padrão com tag "<" a ">"</a>

Apart from this it still has all the other properties that an element <a> has by default, style settings user-agente and pseudo classes as :active and :focus, various global attributes, and backward compatibility and expected behavior on mobile devices.

Then you can use a normal link, with the tag <a>, avoid using as much as possible window.location.href, unless it is for a slider or image gallery component, which are components that are not accessible in any way and which may not be interesting for people with visual impairment etc. Preference is always to <a>

And last but not least, if you choose to use window.location.href always remember to use in the element that will be clickable the attributes role and/or aria-label to maintain accessibility, and add a tabindex="0" to focus with the tab. You can read more about this in this documentation from Mozilla itself https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role#Examples

So if you’re going to make JS your HTML should look something like this.

document.querySelector('div').onclick = function() {
    window.location.href = 'http://answall.com'
}

div {
  color: blue;
  text-decoration: underline;
}
div:hover {
  cursor: pointer;
}

<div role="link" tabindex="0">isso é uma DIV clicável pelo JS e acessível</div>

Answer 2

Let me put it simply. I usually use <a href="pt.stackoverflow.com">StackOverflow</a> when I need to create a link, for example: click here, and the user goes to the desired location.

But with javascript window.location.href="http://answall.com";, I usually use to redirect to another desired page automatically, as soon as the system performs an action, be it decision, or whatever is necessary. Once completed the action I ask you to redirect automatically with window.Location.