اگه تا به حال داخل فضای وب گشتی زده باشی، احتمالاً با صفحه‌های 404 برخورد کردی. این صفحه‌ها عموماً وقتی نمایش داده میشن که مرورگرت نتونه صفحهٔ مورد نظر رو پیدا کنه. به عبارت دیگه، وقتی شما سعی می‌کنید به آدرسی برید که وجود نداره یا اشتباه وارد شده، مرورگر شما وضعیت 404 رو نشون می‌ده. این وضعیت به معنی «پیدا نشد» هست و عملاً می‌گه صفحهٔ مورد نظر شما در دسترس نیست.
معمولاً این وضعیت زمانی اتفاق می‌افته که صفحه‌ای به دلیل تغییر آدرس جابجا شده یا اینکه لینک به اشتباه وارد شده. گاهی اوقات هم ممکنه صفحه به کلی حذف شده باشه. توسعه‌دهنده‌ها سعی می‌کنن تجربه کاربرها رو با طراحی صفحات 404 سفارشی بهتر کنن تا کاربرها گیج نشن و به صفحه اصلی یا صفحات مرتبط هدایت بشن.
البته، همیشه هم نشون دادن صفحات 404 به این معنی نیست که سایت مشکلی داره. شاید تازه صفحه‌ای رو بارگذاری نکرده باشین، یا هنوز توسعه‌دهنده‌ها روی بخشی از سایت کار می‌کنن و اون بخش رو کامل نکرده‌ان. بهر حال، صفحات 404 یه ابزار مهم برای بهبود تجربه کاربری هستن و نشون دهنده سایت خوبی هستن که حواسش به جزئیاته.
حالا چجوری می‌تونیم این وضعیت 404 رو مدیریت کنیم و صفحات مناسبی طراحی کنیم؟ بیاین یه نمونه ساده با استفاده از HTML نشون بدیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - صفحه پیدا نشد</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>اوه! صفحه پیدا نشد.</h1>
<p>متأسفانه نمی‌تونیم صفحه‌ای که دنبالش هستین رو پیدا کنیم.</p>
<p><a href="/">برگشت به صفحه اصلی</a></p>
</body>
</html>
خب بیایید این کد رو خط به خط توضیح بدیم:
<!DOCTYPE html> - این خط نشون می‌ده که سند HTML 5 هست.
<html lang="fa"> - این تگ شروع سند HTML رو اعلام می‌کنه و زبان سند رو فارسی تنظیم کرده.
<head> - این بخش شامل اطلاعاتی مثل متادیتا و استایل صفحه هست.
<meta charset="UTF-8"> - این خط نشون می‌ده که از UTF-8 برای کد‌گذاری استفاده شده که از زبان فارسی هم پشتیبانی می‌کنه.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - تنظیمات مربوط به مقیاس‌بندی برای دستگاه‌های موبایل.
<title>404 - صفحه پیدا نشد</title> - عنوان صفحه که توی تب مرورگر نمایش داده می‌شه.
<style>...</style> - شامل CSS سفارشی برای استایل‌دهی به متن و لینک‌ها.
<body> - شروع بدنه اصلی صفحه HTML که شامل محتوا هست.
<h1>اوه! صفحه پیدا نشد.</h1> - عنوان اصلی صفحه با فونت بزرگ.
<p>متأسفانه نمی‌تونیم صفحه‌ای که دنبالش هستین رو پیدا کنیم.</p> - یک پیام دوستانه برای کاربر.
<a href="/">برگشت به صفحه اصلی</a> - لینکی که کاربر رو به صفحه اصلی سایت برمی‌گردونه.