Custom 404 Error Page

If a visitor to your web site tries to find a non-existent page (or file in general, for that matter), the site’s server will throw up a “404” error and tell the visitor that the page can’t be found. You don’t have to settle for the default, usually technical, bland, and unfriendly error message, though — you can create your own.

HTML Dog’s 404 page, explaining what’s happened and what to do next.

Step 1: Create a “Page Not Found” page

There’s nothing special required here — just create a standard HTML page, with your content (and styling) of choice.

For the sake of this example, call your error page “404.html” and put it in the root folder of your web site. Then, if you go to www.yourdomain.com/404.html you will be able to bask in its beauty.

Step 2: Tell the server to use your error page

There are a few ways to achieve this but the most straightforward is by fiddling with a .htaccess file. This is nothing more than a small text file that passes on simple instructions to your server.

There might already be a .htaccess file in the root folder of your web hosting space. If there is, download it and amend that. If there isn’t, simply create a new blank text document, with the same software you use to create HTML/CSS/JavaScript files, and save it as “.htaccess”.

In this document you will need to add this line:


ErrorDocument 404 /404.html

That’s all you need. No HTML, no other characters, just that line. This will simply tell the server that when it encounters a 404 error, it should load the 404.html file in the root folder (which is where you’ve put your 404.html file, right?

Now you just need to save your .htaccess file and upload it to the root folder of your web site. Then, if the server encounters a not-found error, your error page will be shown.