 |
VOOZH | about |
|
VOOZH | about |
<html source="excellent">
Path // www.yourhtmlsource.com → Site Management → CUSTOM 404 ERROR
Everyone’s encountered the frustrating 404 error page. You follow a link, looking forward to the joy waiting for you on the other side, when BAM! you get an error because the page you were looking for doesn’t exist. Maybe it was moved, maybe it was never there in the first place, but the fact is you’re left sitting there with an unhelpful error message and nowhere to go.
The best sites have found a way to lessen the aggravation by customising their error code with a page that apologises for the mess up and offers some solutions to rectify the problem. If you want to show your readers that you care, read on…
👁 Clock
This page was last updated on 2025-11-17
First off before you do anything else you should make sure that customising error codes in this way is allowed or even possible. Some webhosts (including most of the popular free ones I would imagine) will not permit this sort of tampering because it might mess something else important up. This is generally thought of as an “advanced” modification. Find an FAQ or email the people in charge of your server and ask if you can set it up. If you have your own domain, you shouldn’t have any restrictions of this kind.
Your .htaccess text file is the special file that sets up the deal for you. It can contain all sorts of directives for the Apache server. If you’re not using an Apache-based server, you’ll have to read your server’s manual on how to do it.
Look in your root directory, the place where your homepage is, for this file (.htaccess). If it’s not there don’t fret, you can just create it afresh and it won’t make any difference. When doing so, just make an empty text file in Notepad or whatever, and make sure you start the filename with a dot — it’s vital. Starting a filename with a dot makes it a hidden file in Unix.
sourcetip: You may have problems creating a filename that starts with a dot. If your operating system won’t let you create a file like this, name the file something else temporarily and rename it through your FTP program once you’ve uploaded it.
For now, just save a basic HTML page with the words “404 error” in it so that we can test that it works. I’ll show you how to make a useful custom 404 error page a little later in this tutorial.
Now you need to point .htaccess to your custom page. Add this line to the file (edit it with a text editor like Notepad):
ErrorDocument 404 /404page.html
Make sure it’s all on one line. Start the file path with a slash, which tells the server to start looking in your root directory (where your homepage is), and follow the path you specify. For example,
ErrorDocument 404 /misc/404page.html
This will load the file 404page.html in your misc directory.
sourcetip: Make sure you don’t specify a full URL to your 404 page, as in something like “http://www.example.com/404page.html”. This will cause your server to return the wrong response code, and will actually make it seem like the page was found correctly.
If you specify the path to your file as I have in the tutorial (relative to the root, like “/404page.html”), you won’t have these problems.
It’s also a good idea to add the code <meta name="robots" content="noindex"> to the <head> section of your 404 page, so that search engine robots don’t add it to their indexes.
Now upload your .htaccess file to your root directory, and your 404 page to the location you specified, and you’re ready.
This step may not be necessary, but if you’re unlucky you’ll have to tell your server to activate this feature. On a Unix server, this may already be on, but if not you’ll have to connect to your server and type at the prompt. This sets the file permissions. You can change .htaccess’ permissions through the interface in most FTP programs too. If you have no idea what that meant, contact your server guys again and ask them to sort it out for you.
A good 404 error page must have a number of things to be truly useful — it’s not much good simply putting up a message saying “we apologise for messing up so very horribly.”
Overall, just make sure you motivate your reader not to lose all faith in your site, and give them options as to where to go next.
sourcetip: Since your 404 page might be served up from any subdirectory of your site, make sure all links and image sources are defined absolutely. For instance, use href="/index.html" to link to your homepage instead of href="../../index.html".
Even if you don’t allow many links to go broken throughout your own site, mistakes will occur. Visitors will mistype an address, or follow a mistyped link from another site.
Studies have shown that if you recover well from an error by serving a useful error page, visitors are actually happier with their experience with a website than they would’ve been if nothing went wrong. Don’t ask me how exactly that works, but I saw it in a book, so there you go.
sourcetip: Internet Explorer has a lightly-documented “feature” that stops it from serving any custom 404 error page that is less than 512 bytes long. Your visitors will instead be sent to IE’s own 404 page (screenshot), which is generic and suggests they use an MSN search to “look for information on the Internet.” That’s one way to lose visitors! Make sure your custom 404 error page is over this limit — about 10 full lines of text and HTML should be enough.
To test your work, try getting to a page you know doesn’t exist and seeing if your error page comes up. Good luck.
If you want, you can also see our newly-made page.
Keep Learning // Password Protection → Go! Go!
Other Site Management Articles // URL Rewriting · Custom 404 Error · Password Protection · Bandwidth Theft · Server Side Includes · SSI Echo · Server Response Codes
What’s Related //
Starting Off
Start Here ·
My First Site ·
Lessons
Text ·
Images ·
Tables ·
Frames ·
Forms ·
Stylesheets ·
Advanced
Accessibility ·
Promotion ·
Optimisation ·
Site Management ·
Scripting
JavaScript ·
CGI Scripting ·
Reference
HTML Tag Reference ·
HTML Source Toolbox ¤
Love us? 👁More Resources ¤
Links» Google Webmaster Blog: Make your 404 pages more useful
Great little JavaScript trick that will add links to URLs that look similar to the ones that the user tried to reach.
» 404 Research Lab
A collection of info and error messages from across the web.
» How to Telnet
HTMLGoodies shows you how to Telnet, because I don’t know what it is. Thanks.
© 2000–2026 · Ross Shannon
