Using a hash link to my main page breaks the website

@rempasFeb 04.2023

I’m trying to create a website (beginner-level stuff), and I encounter a problem with the anchor (<a>) tag. First of all, let me put my the code (as always, the smallest possible file that represents the error):

_File: index.html_

“` <!DOCTYPE html> <html> <head></head>

<body> <h1>Welcome to my website!!!</h1>

<nav> <ul> <li><a href=”#about”>About section</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <h2 id=”about”>This is the about section.<br> You can learn more about the site…</h2>

<a href=”#”>Back to top</a> </body> </html> “`

_File: contact.html_

“` <!DOCTYPE html> <html> <head></head>

<body> <nav> <ul> <li><a href=”index.html”>Home page</a></li> <li><a href=”index.html/#about”>About</a></li> </ul> </nav> </body> </html> “`

So, when I click on the first link in the _**index.html**_ file, it takes me to the **about** section (<h2> tag). However, when I am on the _**contact.html**_ page, I’m trying to use a link to the **about** section of the _**index.html**_. This is the first link. The second link is just a simple link to _**index.html**_.

If I click the second, everything works fine. If I click the first link, however, it will indeed send me to the **about** section of the **_index.html_** file, but after that, it will break my site, and I will not be able to visit the **_contact.html_** page again.

If I hover my mouse over the link that sends me to that page, it will show the following path in the bottom left corner of the window: **file:///home/username/project_dir/index.html/contact.html**. So for some reason, it treats **_index.html_** as a directory. Any ideas?

to post a comment

HTML

10 Comments(s) _↴

@sibertFeb 04.2023 — #A shot in the dark. Try put a slash before (depends on the path to the contact.html)

<li><a href="/contact.html">Contact</a></li>

@rempasauthorFeb 04.2023 — #@sibert#1650400 If I put a slash, I will treat the path as an absolute path from the root of my filesystem.

@cootheadFeb 04.2023 — #Hi there rempas.

try it like this...

[b]index.html[/b]

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;
 &lt;title&gt;Untitled document&lt;/title&gt;
 &lt;link rel="stylesheet" href="screen.css" media="screen"&gt;
 &lt;style media="screen"&gt;
 nav {
 margin-bottom: 46em;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1 id="top"&gt;Welcome to my website!!!&lt;/h1&gt;   <br/>
 &lt;nav&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#about"&gt;About section&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;
 &lt;h2 id="about"&gt;This is the about section.&lt;br&gt; You can learn more about the site...&lt;/h2&gt;
 &lt;a href="#top"&gt;Back to top&lt;/a&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[b]contact.html[/b]

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;
 &lt;title&gt;Untitled document&lt;/title&gt;
 &lt;link rel="stylesheet" href="screen.css" media="screen"&gt;
 &lt;body&gt;
 &lt;nav&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="index.html"&gt;Home page&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="index.html#about"&gt;About&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[i]coothead[/i]

@NogDogFeb 04.2023 — #> @rempas#1650404 If I put a slash, I will treat the path as an absolute path from the root of my filesystem.

In HTML, it means the root directory of the _web site_, not of the file system. However, if you are not testing within a web server (via a http:// or https:// URL) and are instead using a file:// URL, then you're probably correct...in which case you might want to consider setting up a local web server for testing. (If that's the case, there are numerous ways to go about that, which we can discuss if needed.)

@cootheadFeb 04.2023 — #There really is no need for slashes in the code provided by the OP.

[img]https://coothead.co.uk/images/smilies/groan2.gif[/img]

I am, of course, assuming that their [b]index.html[/b] and [b]contact.html[/b]

files are sitting snuggly side-by-side in the same directory.

[img]https://coothead.co.uk/images/smilies/banana.gif[/img]

The code that I provided in my previous post was made with that

assumption firmly fixed in my lttle grey cells.

[img]https://coothead.co.uk/images/smilies/sunshine.gif[/img]

[i]coothead[/i]

@NogDogFeb 04.2023 — #Oh, yeah, @coothead 's fix is correcting the format of the link that you have as "index.html/#about" to instead be "index.html#about" (so that it doesn't think index.html is a directory).

@sibertFeb 05.2023 — #> @rempas#1650404 I will treat the path as an absolute path from the root of my filesystem.

Yes. Depending how your files are organized it could be a need for this. I organize my files In a public folder like this

public > (the main folder with at least four sub folders - css, js, img and html).

It is an old habit to organize files and sometimes I need to put a slash before to point to another folder. if the file is in the same folder, you do not need a slash.

@rempasauthorFeb 05.2023 — #@coothead#1650405 Oooooh! So that's how it works! I got it now and thanks a lot! Finally I can continue my little page! Have an amazing day my friend!

@rempasauthorFeb 05.2023 — #@NogDog#1650406 Thank you! I will eventually learn how to setup a web server and do "proper" development but it is a little bit overkill at this point! Tho, even then it wouldn't work. @coothead pointed the mistakes and this is what I needed and now I understand the mistake I was making. Have a great day my friend!

@rempasauthorFeb 05.2023 — #@sibert#1650409 I suppose you have a web server environment just like @NogDog told me to create one. I'm just developing from the filesystem tho so this is how it is for me until I create a web server.

Also in #HTML _↴

Error message help required editing html code please help with html code!!

Success!

Help @rempas spread the word by sharing this article on Twitter...

Tweet This