How to create custom HTTP error pages for your website

  John Mwaniki /    Updated on 07 Jul 2024

There will be some scenarios where web visitors will be served with error messages when trying to access certain pages or files on your website.

Such scenarios include:

403 Forbidden

This response means the web visitor does not have the necessary permission to access the page they are trying to access, so the server is rejecting to give a proper response.

404 Page Not Found

This response is the most famous due to the frequency of its occurrence. It means that the requested page or resource could not be found on the server. This could be due to visitors trying to access a web page that doesn't exist, using of incorrect page URL, or the change of page name.

500 Internal Server Error

This occurs when the server has encountered an error it doesn't know how to handle while trying to serve the user the requested page.

503 Service Unavailable

The server cannot handle the request (because it is overloaded or down for maintenance). Generally, this is a temporary state.

There are many other error responses that visitors may see but the above are the most common and all that you will need to create.

As you can see from all the above screenshots, the default pages are not attractive at all. They also do not give your web visitors any option but to leave your website.

I bet you don't want to send your visitors away when they try accessing a page on your site and it isn't available at the moment.

Examples of Great Error Pages

Below are examples of well-designed error pages, from which you can gain some inspiration while designing yours:

403 Forbidden

 

404 Page Not Found

Example 1: Joe Bidens' website

Example 2: Donald Trump's Website

Example 3: Virgin Group Website

Example 4: Whitehouse.gov Website

Example 5: BBC News Website

Example 6: CNN News Website

Example 7: Apple Website

Example 8: Microsoft Website

 

500 Internal Server Error

 

503 Service Unavailable

How to create your website custom error pages

It is a great idea to create your own well-designed error pages that are more user-friendly, conveys your brand identity, and gives your visitors more options just like in the above examples.

A good error page should be able to explain to the visitors what happened and give them the ability to navigate to other pages.

You design error pages just like any other page on your website and place the pages anywhere you would like, then instruct the server to load the respective page when a user gets an HTTP error.

To instruct the server you will just need to write some commands in the .htaccess file using the format below.

ErrorDocument errorCode /pagename

Example:

If your error pages are namely: error403.html, 404.php, error_500.html, 503error.html. You can name the error pages however you want.

You write these commands in .htaccess file:

ErrorDocument 403 /error403.html
ErrorDocument 404 /404.php
ErrorDocument 500 /error_500.html
ErrorDocument 503 /503error.html

Include the file paths if the error pages are not in the root directory(ie. public_html).

Eg. if your error page namely 404.html is located in public_html/error/404.html, use:

ErrorDocument 404 /error/404.html

 

Conclusion

Website visitors will occasionally be served with error responses when they try to access various resources on your website such as web pages or files. The default error pages are unfriendly and usually sends away visitors from your website.

It's a good idea to have your own custom error pages.

In this article, you have learned how you can make your own error pages for your website.