Internal links don't work and accidentally link to landing page

Question

Contributing for the first time in a website project and editing an existing website. One list item looks like this:

<li>li class="public-nav hide" id="signup-nav"><a href="signup"><button class="btn btn-primary">Get Started for Free</button></a></li>

As you can see, the internally stored page "signup" is referenced in this list item. However, when I want to replicate this referencing pattern, it does not work.

For example, I tried to link to the signup page like this:

<div class="first-content text-small">Are you a new user? <a href="signup">Get started for free.</a></div>

However, the link when clicked leads to the landing page rather than to the sign-up page. Why could that be and how to fix?

Answer 1

Remember that "signup" is a relative URL. It opens the URL signup relative to the URL of the page in which that link is in.

For example, on example.com/ if you add href="signup", it'll lead to example.com/signup.

But on example.com/about/index.html if you add the same, it'll go to example.com/about/signup.

Since that URL isn't valid, the server might be redirecting you to the landing page.

Answer 2

What I happen to do with every page I made is use the following tag:

<base href="http://example.com/path/to/majority/">

What it does is set the default path (instead of current path) for all relative URLs so you know exactly what page is loaded.

For example. If someone went to http://example.com/specialpage/index.html and the HTML code passed to the browser contained this:

<a href="signup">sign up</a>

and a user clicked on that "sign up" link, then they will be taken to:

http://example.com/specialpage/signup

But if the HTML code at http://example.com/specialpage/index.html also contained:

<base href="http://example.com/differentpage/">

Then when someone clicks on the "sign up" link, they will be taken to:

http://example.com/differentpage/signup

And that's because the default folder is defined in the base tag.

The other alternative you have is to use the full path in the link itself. For example:

<a href="http://example.com/differentpage/signup">sign up</a>

The above will take you directly where you want the user to end up regardless of the presence of the BASE tag.