How to link to pages without the .html extension?

Question

I would like to link to pages inside my website, e.g: Not: mywebsite.com/about.html But: mywebsite.com/about/

I've seen various websites doing this but it looks like they also react differently to things:

Apple.com: apple.com/iphone/ works, apple.com/iphone/index.html works, apple.com/iphone redirects.

Opera.com: opera.com/mobile/ redirects, opera.com/mobile works, opera.com/mobile.html does not work.

Mozilla.com: mozilla.org/en-US/ works, mozilla.org/en-US redirects, mozilla.org/en-US/index.html does not work.

Which leads to another question: Are there different methods for this?

Edit: It seems that Apple uses a folder for every page, e.g. a folder called 'iphone' with an index.html file inside it? But Opera and Mozilla use something in the .htaccess file?

Answer 1

Removing Extensions

To remove the .php extension from a PHP file for example yoursite.com/wallpaper.php to yoursite.com/wallpaper you have to add the following code inside the .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

If you want to remove the .html extension from a html file for example yoursite.com/wallpaper.html to yoursite.com/wallpaper you simply have to alter the last line from the code above to match the filename:

RewriteRule ^([^\.]+)$ $1.html [NC,L]

That’s it! You can now link pages inside the HTML document without needing to add the extension of the page. For example:

 <a href="http://whatever.com/wallpaper" title="wallpaper">wallpaper</a>

Answer 2

They are using .htaccess and URL rewriting. This is part of server configuration. You can not do it with html only.

This page explains basics of URL rewriting.

Answer 3

You folder then has to contain a file: index.*. Like: /iphone/index.html, which can be /iphone/ as well

Or work with .htaccess

Answer 4

In the .htaccess file in your sites root folder just add the following line:

# ---- Render pages without urls
Options +MultiViews

Answer 5

The most upvoted answer doesn't check whether the URL points to a directory, so you're going to get some mysterious 'not found' errors when it tries to append '.html' to a directory path. Easily fixed:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html [L]

The first condition will only pass if the path does not point to a valid directory. The second will only pass if the path points to a valid file when the .html extension is added. If both conditions pass, the rewrite rule simply adds ‘.html’ to the filename.

Notice that we can just match the entire path with .*. You can reject paths that contain a period character if you wish, but it's not really necessary since you've already checked that {REQUEST_FILENAME}.html is a valid file. In any case, it is unnecessary to escape a period character when it's inside a character class. I know you see this [^\.] everywhere, but the slash is redundant. [^.] is how to write it and look like a regex pro.

This kind of redirect will be invisible to the user because, by default, mod_rewrite does the substitution internally, without informing the browser. If you wanted to do a permanent redirect, you would add the [R=301] flag at the end.

---

Alternatively, as Genus Amar said, you can just enable the Multiviews option on a per-directory basis by adding this Options Directive to the .htaccess file:

Options +MultiViews

It's worth adding that this will only work if the server administrator has enabled MultiViews with the AllowOverride Directive, and it won't allow you to perform additional redirects.

---

Neither of these solutions (on their own) will remove the .html if it’s part of the requested URL. If you want to do that as well, see my answer to this question.

Answer 6

Let the website be www.abc.com/index.html and you have to display only www.abc.com/index then in node js (express) it will be

//Let your all files like index.html, css, js be in public folder

const express = require('express');
const path = require('path')




app.get('/:name', (req, res) => {
  var filePath = ""
  const fileName = req.params.name;

//////Check if file is not .html file like css, js etc
  if(fileName.includes(".css") || fileName.includes(".js") || fileName.includes(".png") || fileName.includes(".jpg") || fileName.includes(".svg")){
    filePath = path.join(__dirname, 'public', fileName)
  }
  else{
  filePath = path.join(__dirname, 'public', fileName + ".html");
  }
  res.sendFile(filePath, err => {
    if (err) {
      console.log(`Error sending file: ${err.message}`);
      res.status(err.status).end();
    } else {
      console.log(`File sent: ${filePath}`);
    }
  });
});

// serve static files
app.use(express.static(path.join(__dirname, 'public')));

// start the server
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Answer 7

Make your href attribute equal to the page you want to link or .. If you need to move up a directory.

Ex: href="contact.html" Ex: href="../links/contact.html"