How to link to pages without the .html extension? - html

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?

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:
wallpaper

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.

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

In the .htaccess file in your sites root folder just add the following line:
# ---- Render pages without urls
Options +MultiViews

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.

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"

Related

Is there a way to get all relative URL paths to serve a single absolute page URL?

What I'm looking for is a way for all paths like example.com/blog, example.com/about, example.com/burnt/toast, etc. to all go straight to example.com and get the same index.html file, from which I can respond to the different URL paths with JavaScript.
Is this possible without adding a physical redirect placeholder file for each of the extensions? Without having to use node.
What you are looking for is called a "front controller." It is usually implemented in .htaccess using a rewrite rule:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
That rule says: "except for files that actually exist, handle all URL paths with index.html."

How to make your website https only?

I've got a working SSL certificate, but the only way for a person to visit my https website is by typing "https://" in the search bar. I've got a .htacces file that contains the following code:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
And I also tried this line of code:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
But neither of them seem to work.
I've also read that there is a meta tag that sends all users to your https no matter what. But still have yet to find what the meta tag looks like.
Any help is appreciated. Thank you for your time
The basic idea is correct - you will need rewrite rules on your webserver for to make the site HTTPS only
RewriteRule ^/?(.*) https://%{SERVER_NAME}/$1 [R,L]
Please take a look at the following documentation: https://wiki.apache.org/httpd/RewriteHTTPToHTTPS
Regarding why your rules are not working - you need to know the context of .htaccess file, from documentation:
.htaccess files (or "distributed configuration files") provide a way
to make configuration changes on a per-directory basis. A file,
containing one or more configuration directives, is placed in a
particular document directory, and the directives apply to that
directory, and all subdirectories thereof.
it is however better not to use .htaccess at all if possible since it has negative performance implications and the same thing can be achieved with <Directory> blocks. All of that is in here: https://httpd.apache.org/docs/current/howto/htaccess.html
Regarding the meta tag - all you need to do is add something like this:
<meta http-equiv="refresh" content="0; url=https://yoursite.com/">
The meta tag is definitely not the best practice of HTTP-2-HTTPS redirection due to the fact that it is easy to circumvent and outside of webmasters control since it's a client side redirect.

How to force loading extension ".html"after a url via .htaccess?

How could I achieve this?
force load extension via .htaccess ".html" after a url?
Pretty simple, but I couldn't find something a stack article on this or something similar to tweak accordingly.
If someone visits Domain.com/about I want them to land on Domain.com/about.html
Simply put I want to force all url's to load .html after the url via .htaccess.
This is to cover visitors, etc. with old links that don't have .html at the end of the url.
Does this page helps you:
https://www.garron.me/en/bits/add-html-extension-nginx-apache-htaccess.html
Or take a look here, you can find a bunch of propositions.
You can use this code in your DOCUMENT_ROOT/.htaccess file:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+?)/?$ $1.html [L]

Removing the index.html from url

Ok, maybe a pretty dumb question but I can't find an answer on Google.
I am coding my site by hand. How do I make the index.html disappear from the url's? Do I use a piece of code in my html? Do I have to change my href's in my files?
Hope you guys can help!
EDIT:
I've tried this with a .htaccess file
RewriteEngine On
RewriteRule ^index\.html$ / [R=301,L]
RewriteRule ^(.*)/index\.html$ /$1/ [R=301,L]
It does work, but all my links aren't working anymore. I discovered I had to remove all the index.html from the href's in my documents. But that would be a lot of work. Is there an other code for .htaccess that just hides index.html?
A SIMPLE WAY TO DO THIS in Html:
(example in my case is a simple dual language site)
If your link looks like this:
Homepage
You should change it to this:
Homepage
If trying to link to another folder in your directory, like is my example:
English language
You should change it to this:
English language
Notice that "/" goes back to your root directory and automatically selects index.html, so that is why I used "en" for the English language site, because the name of the folder in that case is "en". You should also make sure that you have index.html in your English language folder, and not index-en.html.
Apache has .htaccess files and mod_rewrite,
In your .htaccess file, set:
DirectoryIndex index.html
You can also set this up in the Apache site config files too
You can specify a list of filenames, so if it doesn't find the first it moves to the next.
IIS has .config files
mod_rewrite module is responsible for all the rewriteEngine. Check on your server whether is module is present and enable.
You need to create a file called '.htaccess' in the root directory of your site containing the following code:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]
And then make sure all the links on your site don't contain '.html' at the end, e.g.:
<a href="/Home.html">
should be replaced with:
<a href="/Home">
Hope this helps!
if you dont find .htaccess, you just need to create a new file using your text editor the same way you would any other html or css file, but save it as simply '.htaccess'
And save it into the root directory, so the same folder that you have your index.html file.
I think this is configured in IIS when you deploy the site, I'm not to sure on it but I'm sure you can specify a start point that your URL will use when you just enter the UL, that implies the Index.html page.
Sorry I'm not too helpful here, hopefully it will point you in the right direction.
Often these things such as Apache or IIS have this set up already, and it looks for the Index.html, Index.php first when you just put your URL in.
Great SEO idea! This is similar to nginx redirect loop, remove index.php from url and Apache .htaccess to hide both .php and .html extentions, as well as mod_rewrite not working htaccess — the idea here, for both Apache's mod_rewrite and nginx ngx_http_rewrite, depends on the differences between the external and internal URLs — in order for the redirect from /index.html to / work, yet not cause redirect loops when actually serving index.html, you gotta make sure you only issue the redirect for external index.html requests, but never for internal ones; this can only be accomplished by looking into the actual request_uri.
Here's the code for nginx ngx_mod_rewrite:
index index.html index.txt;
if ($request_uri ~ "^(.*/)index\.(html|txt)$") { return 301 $1; }
On Apache's mod_rewrite, it'll be something like the following:
RewriteEngine on
RewriteCond %{REQUEST_URI} ^.*/index\.html$
RewriteRule ^(.*/)index.html$ $1 [R,L]
Related:
nginx redirect loop, remove index.php from url
Apache .htaccess to hide both .php and .html extentions
mod_rewrite not working htaccess
References:
http://nginx.org/r/index
http://nginx.org/r/if
http://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteCond
Change the link that goes to your homepage to the website address.
You may have:
Link Here
Change that to:
Link
Or try this
Simply don't type the index.html in your browser and don't advertise it as such.
You can set the 'default document' on the web server (whichever you happen to be using) to serve 'index.html' in the absence of a file part. This way, someone going to http://www.mysite.com would be served http://www.mysite.com/index.html

Absolute Path for Deployment in a Non-Root Location

I typically refer to any assets on my site using absolute path so that I don't have to worry about the location of the assets relative to current file.
<!-- Using a absolute path. -->
<img src="/images/flag.png" />
<!-- Using a relative path. -->
<img src="../../../images/flag.png" />
However, this time I need to host the site at a non-root location e.g. http://my-server.com/holiday/.
How would I go about this? I am looking for a solution that doesn't require me to change the path in my files. How do I configure the server (Apache) to treat http://my-server.com/holiday/ as a "root"?
Clarification:
I still need http://my-server.com/ to behave "normally". That is, it should still point to http://my-server.com/index.html i.e. doesn't get redirected to http://my-server.com/holiday/.
If you’re using Apache, there one rather simple thing you could do by just using an SSI variable in your paths.
Do a global replace of all src="/ to something like
src="<!--#echo var="prefix" -->/
and then in your htaccess for the specific folder define the prefix variable as /holiday
For sites that don’t have the variable or SSI, it’ll just show up as a comment or you can define it as an empty string.
Of course this means you’ll have to turn on SSI in Apache.
try to add this to your .htaccess
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www.)?DOMAINNAME.com$
RewriteCond %{REQUEST_URI} !^/holiday/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /holiday/$1
RewriteCond %{HTTP_HOST} ^(www.)?DOMAINNAME.com$
RewriteRule ^(/)?$ holiday/index.php [L]
or take a look here - Changing the root folder via .htaccess
I don't think this is gonna happen for you man, sorry.
You have absolute paths in your documents, and want apache to prepend /holiday to them all without effecting the actual docroot? You can have one or the other, but not both.
You need to either do a mass edit and prepend the directory yourself, or move your images/css/etc into the actual root directory.
mod_rewrite is powerful, but can't really determine intent and parse the same url two different ways depending on what the user wants.
Edit:
I am wrong, but I don't have your answer. You may be able to use IS_SUBREQ in mod_rewrite to only apply the re-write conditions for sub-requests from your /holiday/index.php
Easy...
# Assuming mod_rewrite is an option...
<IfModule mod_rewrite.c>
# Turn it on!
RewriteEngine on
# If path is /images/flag.png, connect to /holiday/images/flag.png
RewriteBase /holiday/
</IfModule>
Assuming I'm understanding what you mean, this should do you just fine. Point of order, this .htaccess should be in /holiday/
I do this locally on MAMP for testing a website that's base is in http://localhost:8888/SocialNetwork/ ... If I didn't have that, my absolute paths of, say, /profile would go to http://localhost:8888/profile/ instead of http://localhost:8888/SocialNetwork/profile
what about using html's BASE element? http://www.w3.org/TR/html4/struct/links.html#h-12.4
although i´m not sure how you could have it in a single html file and inherit it to the rest of your htmls, so your source remains intact.
if your site is html-only maybe with frames, otherwise you could use some sort of server-side include depending on what youre using (asp, jsp, whatever). Check out this link for more information http://www.boutell.com/newfaq/creating/include.html
I hate to say this but none of the above provides the solution. The answers by #Zoltan and #stslavik were close but, unfortunately, didn't work when deployed; I wished one of them worked, though.
As a result, I resorted to using a combination of named constants and include files in PHP. More details: File Structure for a PHP Project. Note that it doesn't have to be PHP; you can use other languages that provide similar features. +1 for #margusholland whose answer led me to experiment with this solution.
EDIT:
Of course it would work in case you do with php. Adding:
<? define(_BASE_, substr($_SERVER['SERVER_NAME'] . "/" . $_SERVER['REQUEST_URI'], 0, strrpos($_SERVER['REQUEST_URI'], "/" )) ); ?>
<html>
<head>
<script src="<?=_BASE_?>/path_relative_to_project_root"></script>
</head>
<body>
<img src="<?=_BASE_?>/path_relative_to_project_root">
</body>
</html>
If you have a list of filename extensions that should be redirected, you might want to use the rewrite conditions using pattern matching againt the extensions.
Another solutions is to simply create an /images directory under root and let images be downloaded from there. Or have there links to images in your path.