How to redirect 404 error page in HTML

Redirecting a 404 error page in HTML typically involves server-side settings rather than just HTML code, as HTML alone can’t perform redirections. However, you can design an informative 404 error page using HTML and guide users to take action. The actual redirection is usually handled by server configurations or scripting languages like PHP, JavaScript, or via web server configuration files (e.g., .htaccess for Apache servers).

Photo of White Beach in Boracay, Philippines

Here’s a step-by-step guide on how to handle 404 error pages, including creating a custom 404 page and setting up redirection:

1. Create a Custom 404 Error Page

Table of Contents

You can design a custom 404 error page using HTML and CSS. This page should inform the user that the page they are looking for cannot be found and provide links to navigate back to your main site or other important pages.

Example of a simple HTML 404 error page:

<!DOCTYPE html>
<html>
<head>
    <title>Page Not Found</title>
    <style>
        body {
            text-align: center;
            padding: 50px;
            font-family: "Arial", sans-serif;
        }
        h1 {
            font-size: 50px;
        }
        p {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you are looking for doesn't exist.</p>
    <p><a href="/">Go to Homepage</a></p>
</body>
</html>

2. Server Configuration for Redirecting 404 Error Page

Using .htaccess (Apache Web Server)

If your website is hosted on an Apache server, you can use an .htaccess file to redirect users when they encounter a 404 error.

Create or Edit .htaccess File:

Locate or create a .htaccess file in the root directory of your website.

Add Redirection Rule:

Add the following line to redirect 404 errors to your custom 404 page: ErrorDocument 404 /your-custom-404-page.html
Replace /your-custom-404-page.html with the actual path to your custom 404 page.

Using web.config (Windows Servers)

For websites hosted on Windows servers using IIS, you can edit the web.config file:

Locate or Create web.config File:

Find or create a web.config file in your website’s root directory.

Add Redirection Settings:

Add a rule to handle 404 errors: <configuration> <system.webServer> <httpErrors> <remove statusCode="404" subStatusCode="-1" /> <error statusCode="404" path="/your-custom-404-page.html" responseMode="ExecuteURL" /> </httpErrors> </system.webServer> </configuration>
Replace /your-custom-404-page.html with the path to your custom 404 page.

3. Test Your Configuration

After setting up your custom 404 page and server configurations, test it by trying to access a non-existent page on your website. You should be redirected to your custom 404 page.

Note

Ensure you have access and permissions to modify .htaccess or web.config files on your server.
Always back up configuration files before making changes.
The method varies depending on the web server and hosting environment. Consult your hosting provider’s documentation for specific instructions.

Best WordPress Hosting for Beginners in 2024
Hosting Company
Why To Buy
Pricing
Latest Deal

Cheapest Shared Hosting With Premium Features
Starts from $0.99/mo.
Up To 80% OFF

Grab This Deal

4.5/5

Affordable Hosting With Best Performance
Starts from $2.99/mo.
Up To 75% OFF

Grab This Deal

5/5

#1 WordPress Recommended Hosting With Great Features
Starts from $2.65/mo ($8.99/mo).
Up To 70% OFF

Grab This Deal

4.5/5

Hosting Company	Why To Buy	Pricing	Latest Deal
	Cheapest Shared Hosting With Premium Features	Starts from $0.99/mo. Up To 80% OFF	Grab This Deal 4.5/5
	Affordable Hosting With Best Performance	Starts from $2.99/mo. Up To 75% OFF	Grab This Deal 5/5
	#1 WordPress Recommended Hosting With Great Features	Starts from $2.65/mo ($8.99/mo). Up To 70% OFF	Grab This Deal 4.5/5