If you have entered the web space incorrectly, you might encounter 404 pages. These pages typically indicate that the browser couldn't find the requested page. In other words, when you try to access an address that doesn't exist or was entered incorrectly, the browser shows you the 404 status. This situation means 'not found' and essentially means that the page you are looking for is not accessible to you.
Usually, this situation occurs temporarily when pages have been moved due to a change in the address or a link has been entered erroneously. Sometimes, a page might also be completely removed. Developers may try to enhance user experience, making the 404 page more informative so that users can return to the main page or relevant pages.
However, not always showing 404 pages means that the site has a problem. It might be that new pages haven't been registered yet, or that developers haven't completely optimized a section of the site. In any case, a 404 page is a crucial tool for improving user experience and showing users quality websites that pay attention to details.
Now, how can we manage this 404 situation and design appropriate pages? Let's consider a simple example using HTML:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<style>
body { text-align: center; padding: 5em; font-family: Arial, sans-serif; }
h1 { font-size: 50px; }
p { font-size: 20px; }
a { text-decoration: none; color: #ff6f61; }
</style>
</head>
<body>
<h1>Oh! Page Not Found.</h1>
<p>Unfortunately, we couldn't find the page you're looking for.</p>
<p><a href="/">Back to the main page</a></p>
</body>
</html>
Well, let's explain this code line by line:
<!DOCTYPE html> - This line indicates that it is an HTML 5 document.
<html lang="fa"> - This tag indicates the start of the HTML document and sets the language to Persian.
<head> - This section includes information such as metadata and the page's style.
<meta charset="UTF-8"> - This line indicates that UTF-8 is used for encoding, allowing for Persian characters as well.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - Settings related to responsiveness for mobile devices.
<title>404 - Page Not Found</title> - The title of the page that will appear in the browser tab.
<style>...</style> - Contains CSS styles for aesthetic improvements to the text and links.
<body> - The start of the main content of the HTML page that includes the content.
<h1>Oh! Page Not Found.</h1> - The main title of the page in a large font.
<p>Unfortunately, we couldn't find the page you're looking for.</p> - A friendly message for the user.
<a href="/">Back to the main page</a> - A link that allows the user to return to the main page of the site.