Navigate without ".html"

Question

This is my current root:

main
    → index.html
    → page1.html

I would like to navigate the user on page1.html when a button is clicked. However, what I don't want here is the url to have page1.html. It should rather have page1

For example, look at this link from discord: https://discord.com/app
They don't have /app.html but rather /app which makes it easier for users to understand navigations. Similarly for https://stackoverflow.com/tags.
I would like to achieve this using pure HTML and/or JS. I'm looking for the most efficient and fastest methods to achieve this.

Just put `page1.html` in a folder named `page1` and rename file to `index.html`. — Bqardi, Nov 06 '22 at 08:13
I thought of that solution, but isn't there a more efficient method. This would lead me to creating many many folders. — The Myth, Nov 06 '22 at 08:14
To achieve this you need to configure the server to do url request mapping to a resource and set the appropriate `content-type` header in response like `text/html` or `application/json` — Balaji, Nov 06 '22 at 08:21
Does this help? [How to remove .html from URL?](https://stackoverflow.com/questions/5730092/how-to-remove-html-from-url) — Bqardi, Nov 06 '22 at 08:23

WhiteToggled · Accepted Answer · 2022-11-06T08:33:46.017

The .html extension can be removed by using a .htaccess file Note: the full name of the file is just .htaccess

You have to follow these steps:

Log in to cPanel account.
In the Files section, click on the File Manager icon.
Click on the Settings Button in the top right corner.
If you want to make changes in the Primary Domain then Click on the radio button next to the Web Root. If changes are to be made on Other Domains, then Click the dropdown menu and find the domain in which changes are to be made.
Remember to check the checkbox next to Show Hidden Files. Now click the Save Button to return to the File Manager window.
Now you are in the Root Folder of the domain which you have selected to make changes. Search for the .htaccess file and right-click on it. Click on the Edit option in the menu. You can now add code to the .htaccess file.
```
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC, L]
```

Click on Save Changes and Close

Usitha Indeewara · Answer 2 · 2022-11-06T08:27:29.097

If you are using node.js, you can do it by this way:

First open your terminal/command prompt and create an npm package and install express.js:

npm init -y
npm install --save express

Create index.js and write this code:

const express = require("express");
const port = 3000;

app.use("/", express.static("./main")); // Using index.html on the main page and using the main folder as the folder that contains static files

// Using /page1 route for the ./main/page1.html file
app.get("/page1", (req, res) => {
    res.sendFile("./main/page1.html");
});

// Starting the server
app.listen(port, () => { console.log(`Server started at port ${port}`); });

Don't forget to add /page1 instead of ./page1.html as the hyperlink to your HTML <button>

Now run the index.js file

node index.js

Now you can see that it is working at http://localhost:3000

Thanks but I wanted a solution with pure vanilla JS or simply another technique. — The Myth, Nov 06 '22 at 08:26

Navigate without ".html"

2 Answers2