اهمیت استفاده از DOCTYPE در ایجاد صفحات وب

the-purpose-and-importance-of-a-doctype

شاید برای شما هم پیش آمده باشد که هنگام استفاده از CSS در صفحات HTML با مشکلات نمایشی در مرورگرهای مختلف مواجه شده باشید.
یعنی شما در بعضی از مرورگرها صفحه را به درستی مشاهده می‌کنید، ولی همین صفحه، در مرورگر دیگر به صورت ناهماهنگ ظاهر می‌شود. اینجاست که شما به بررسی دوباره‌ی کدهایتان می‌پردازید. ولی ایرادی در کدهای خود مشاهده نمی‌کنید. این کار را دوباره و با وسواس بیشتری تکرار می‌کنید. ولی متأسفانه باز هم به نتیجه نمی‌رسید و سردرگم می‌شوید که مشکل از کجاست!
اجازه دهید که با یک مثال منظور خودم را دقیق‌تر بیان کنم.


<html>
<head>
<title>webdata.in</title>
<style>
.main{
width: 950px;
height: 500px;
margin: auto;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>

با بررسی کدهای بالا متوجه می‌شوید که خروجی یک باکس خاکستری رنگ است که در وسط صفحه قرار خواهد گرفت.
حالا اگر من این کد را در مرورگر فایر فوکس نسخه‌ی ۱۹٫۰ بررسی کنم، همه چیز به درستی اجرا می‌شود و باکس من همانگونه که انتظار دارم، در وسط صفحه ظاهر می‌شود.
حالا اگر همین کدها را در مرورگر IE نسخه‌ی ۸ و یا پایین‌تر اجرا کنم، خروجی چیزی غیر از تصور من است و باکس خاکستری رنگ من در وسط صفحه نمایش داده نخواهد شد و به سمت چپ صفحه می‌رود و این چیزی نیست که من می‌خواهم.
این اتفاق در حالی رخ می‌دهد که کدنویسی من کاملاً صحیح است و نباید چنین مشکلی رخ دهد.
بلی، با اینکه کدنویسی صحیح است، ولی ظاهراً استاندارد نیست. پس بهتر است برای نمایش صحیح و استانداردسازی آن از تگ DOCTYPE استفاده کنم تا ببینم چه اتفاقی رخ می‌دهد. تگ DOCTYPE انواع مختلفی دارد، ولی شکل کلی آن به صورت زیر است.


<!DOCTYPE html>

در مورد تگ DOCTYPE فقط همین توضیح را می‌دهم که این تگ، یک راهنما برای مرورگرهای وب به شمار می‌رود و جزو دستورات HTML نیست. ولی نبود آن می‌تواند باعث بسیاری از مشکلات نمایشی در صفحات وب شما شود که یک نمونه‌ی ساده از آن را برای شما مثال زدم و توصیه می‌شود برای استانداردسازی صفحات خود، همیشه از نوع صحیحی از این تگ استفاده کنید.
برای اطلاعات هر چه بیشتر و آشنایی با انواع DOCTYPEها به سایت w3shools.com مراجعه کنید.

حالا کافی است با اضافه کردن تگ DOCTYPE شاهد نمایش صحیح کدهای HTML در مرورگرهای فایر فوکس ۱۹٫۰ و IE8 باشیم. کد نهایی ما به صورت زیر خواهد بود.


<!DOCTYPE html>
<html>
<head>
<title>webdata.in</title>
<style>
.main{
width: 950px;
height: 500px;
margin: auto;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>

٪ نظرات