آشنایی با DOCTYPE Html
DOCTYPE Html که در ابتدای هر سند HTML قرار میگیرد یک اعلان است که مخفف عبارت Document Type است، که نوع و نسخه‌ی سند وب را به مرورگر اعلام می‌کند .
به بیان دیگر، DOCTYPE مشخص می‌کند که صفحه‌ی وب با کدام نسخه از HTML یا XHTML نوشته شده و مرورگر باید از چه استانداردی برای تفسیر و نمایش آن استفاده کند. نکته‌ی مهم این است که DOCTYPE یک تگ HTML محسوب نمی‌شود، بلکه یک دستورالعمل یا Declaration است و برخلاف تگ‌ها، پایانی (</…>) ندارد و تنها یک‌بار در ابتدای صفحه می‌آید.
چرا استفاده از DOCTYPE ضروری است؟
استفاده از DOCTYPE تأثیر مستقیم بر نحوه‌ی پردازش و نمایش صفحه توسط مرورگرها دارد. اگر DOCTYPE به‌درستی تعریف نشود یا حذف گردد، مرورگر ممکن است به حالت ناسازگار یا Quirks Mode سوئیچ کند که در این حالت استانداردهای وب به‌طور کامل رعایت نمی‌شوند به‌عنوان مثال، در گذشته عدم وجود DOCTYPE می‌توانست باعث شود هر مرورگر صفحه را به شیوه‌ی خود (غیر استاندارد) رندر کند و در نتیجه ظاهر وب‌سایت بین مرورگرها یکسان نباشد. با قرار دادن DOCTYPE، مرورگر وارد حالت استاندارد (Standards Mode) می‌شود و حداکثر تلاش خود را می‌کند تا طبق مشخصات استانداردهای وب، صفحه را نمایش دهد . به همین دلیل، DOCTYPE نقشی کلیدی در یکسان‌سازی نمایش صفحه در مرورگرهای مختلف دارد.
علاوه بر تضمین سازگاری، تعریف صحیح DOCTYPE مزایای دیگری نیز دارد: صفحات وب بدون DOCTYPE از نظر ابزارهای اعتبارسنجی (Validation) نامعتبر محسوب می‌شوند و این می‌تواند روی ارزیابی کیفیت سایت تأثیر منفی بگذارد. کنسرسیوم جهانی وب (W3C) تأکید می‌کند که برای رعایت استانداردها و نمایش صحیح صفحات، حتماً DOCTYPE در ابتدای سند اعلام شود .
حتی اگر برخی مرورگرها بدون DOCTYPE هم صفحه را نمایش دهند، نبود این اعلان می‌تواند منجر به پشتیبانی‌نکردن از برخی ویژگی‌های جدید HTML یا بروز مشکلات ظاهری در مرورگرهای متفاوت شود. به ویژه در HTML5، presence از DOCTYPE ساده <!DOCTYPE html> راه را برای بهره‌گیری از قابلیت‌های جدید این نسخه (مانند تگ‌ها و ویژگی‌های نوین، عناصر چندرسانه‌ای و موارد دیگر) هموار می‌کند و تضمین می‌نماید که مرورگر با جدیدترین استانداردها رفتار کند.
دلایل تاریخی معرفی DOCTYPE
استانداردهای مختلفی برای زبان HTML در طی سال‌ها معرفی شده‌اند (HTML4، XHTML، HTML5 و …). هر یک از این استانداردها تفاوت‌هایی (هر چند جزئی) با یکدیگر دارند. در اواخر دهه 90 و اوایل 2000، مرورگرها برای سازگاری با صفحات قدیمی‌تر، حالت‌های نمایشی متفاوتی داشتند. به‌طور خاص، Internet Explorer حالت Quirks را برای پشتیبانی از صفحات قدیمی (نوشته‌شده مطابق رفتار غیررسمی IE5) به‌کار می‌برد.
برای جلوگیری از بروز اختلاف در تفسیر کدهای HTML، مکانیزم DOCTYPE معرفی شد تا نویسندگان صفحات به‌صراحت نسخه‌ی استاندارد مورد استفاده را اعلام کنند. بدین ترتیب، مرورگر با دیدن DOCTYPE درست، صفحه را طبق استاندارد مربوطه تفسیر می‌کند و نه طبق حدس یا حالت پیش‌فرض خود. این رویکرد در گذر زمان باعث شد طراحی وب به‌سمت وحدت رویه و رعایت استانداردها پیش برود.
نکته دیگر اینکه DOCTYPE نسبت به حروف بزرگ و کوچک حساس نیست . برای مثال، نوشتن <DOCTYPE html!> یا <!Doctype html> از نظر عملکرد تفاوتی با < !DOCTYPE html> ندارد. با این حال طبق قرارداد معمول، تمامی حروف اعلان DOCTYPE را به شکل uppercase (یا در مثال‌های جدید MDN به صورت lowercase همه حروف) می‌نویسند تا خوانایی بهتری داشته باشد.
ساختار DOCTYPE در نسخه‌های مختلف HTML
در نسخه‌های قدیمی‌تر HTML (مانند HTML4.01) که مبتنی بر SGML بودند، اعلان DOCTYPE باید حاوی ارجاع به یک DTD (مخفف Document Type Definition) می‌بود. هر DTD در واقع مشخصات نحوی و ساختاری آن نسخه از HTML را تعریف می‌کرد. بنابراین DOCTYPE در HTML4 یا XHTML طولانی و دقیق بود. در مقابل، HTML5 مبتنی بر SGML نیست و به DTD خارجی نیاز ندارد؛ به همین خاطر DOCTYPE در HTML5 بسیار ساده و کوتاه طراحی شد.
در HTML5 تنها از این یک خط برای DOCTYPE استفاده می‌شود:
<!DOCTYPE html>
همین خط کوتاه کافی است تا به مرورگر بگوید صفحه بر اساس HTML5 است. اما در HTML4.01 سه نوع DTD تعریف شده بود که هریک DOCTYPE مخصوص خود را داشت:
- HTML 4.01 Strict: در این حالت تمامی قواعد استاندارد سخت‌گیرانه رعایت می‌شود و استفاده از عناصر و صفات منسوخ‌شده مجاز نیست. به عنوان مثال تگ‌هایی مثل <font> یا ویژگی‌هایی مانند bgcolor نباید به‌کار بروند و بجای آن‌ها از CSS استفاده می‌شود. DOCTYPE مربوط به حالت Strict در HTML4.01 به صورت زیر است:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - HTML 4.01 Transitional (تردیشنال): این حالت برای گذار از نسخه‌های قدیمی‌تر طراحی شد و نسبت به Strict منعطف‌تر است. استفاده از عناصری که در HTML4 منسوخ اعلام شده بودند (مثل <center> یا ویژگی‌های نمایشی نظیر background در تگ <body>) در این حالت مجاز است تا سازگاری با مرورگرهای قدیمی که شاید CSS را پشتیبانی نکنند، حفظ شود. البته برخی موارد مانند استفاده از
<frameset>همچنان مجاز نیست. اعلان DOCTYPE در حالت Transitional به صورت زیر می‌باشد:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - HTML 4.01 Frameset: این حالت زمانی به‌کار می‌رود که صفحه‌بندی سایت بر اساس قاب‌ها (Frames) انجام شده باشد. در DTD مربوط به Frameset، امکان استفاده از تگ <frameset> و تعریف قاب‌های افقی/عمودی وجود دارد (چیزی که در Strict و Transitional مجاز نبود). سایر موارد مشابه حالت Transitional است. DOCTYPE مربوطه عبارت است از:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
به طور خلاصه، در HTML4 اگر صفحه‌ای کاملاً مطابق استاندارد و بدون عناصر قدیمی بود از Strict استفاده می‌شد؛ اگر برخی عناصر قدیمی برای سازگاری استفاده شده بود از Transitional استفاده می‌کردند؛ و اگر طراحی صفحه مبتنی بر فریم بود DOCTYPE نوع Frameset به‌کار می‌رفت.
DOCTYPE در XHTML و تفاوت‌های آن
زبان XHTML ترکیبی از HTML و XML است که توسط W3C برای سخت‌گیری بیشتر در رعایت ساختار و سازگاری با XML معرفی شد. نسخه‌های XHTML 1.0 عملاً معادل HTML4.01 Strict/Transitional/Frameset هستند منتها با این تفاوت که کد XHTML باید قواعد نگارشی XML (مانند بسته شدن تمام تگ‌ها، حروف کوچک برای نام تگ‌ها، استفاده صحیح از نقل‌قول برای صفات و غیره) را نیز رعایت کند. بنابراین برای هر حالت HTML4 یک DOCTYPE متناظر در XHTML 1.0 داریم:
- XHTML 1.0 Strict: معادل HTML4.01 Strict با رعایت قواعد XML. اعلان DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - XHTML 1.0 Transitional: معادل HTML4.01 Transitional در قالب XML. اعلان DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - XHTML 1.0 Frameset: معادل HTML4.01 Frameset در قالب XML. اعلان DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> - XHTML 1.1: نسخه 1.1 از XHTML که مختصاتی معادل XHTML 1.0 Strict دارد اما کمی توسعه‌یافته‌تر (به عنوان مثال پشتیبانی توکار از ماژول‌هایی برای لهجه‌های زبان و …). DOCTYPE مربوط به XHTML 1.1 به شکل زیر است:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
هنگام استفاده از XHTML باید حتماً سند را با MIME Type مناسب (مانند application/xhtml+xml) ارائه کرد تا مرورگر آن را به‌صورت XML پردازش کند. در غیر اینصورت، بسیاری از مرورگرها فایل‌های XHTML با پسوند .html را مشابه HTML عادی پردازش می‌کنند. لازم به ذکر است که امروزه HTML5 با DOCTYPE کوتاه خود، جایگزین رایج XHTML در توسعه وب شده و انعطاف‌پذیری و ساده‌سازی بیشتری دارد. با این حال دانستن ساختار DOCTYPE در XHTML برای درک سیر تکامل وب مفید است.
نکات تکمیلی در مورد DOCTYPE
- محل قرارگیری: اعلان DOCTYPE همواره باید در اولین خط فایل HTML/XHTML قرار گیرد، قبل از تگ
<html>. قرار دادن هر چیزی (حتی کاراکترهای خالی یا کامنت) قبل از DOCTYPE می‌تواند برخی مرورگرها را دچار مشکل کند یا آن‌ها را به حالت quirks ببرد. - تعداد دفعات: هر صفحه‌ی وب فقط می‌تواند یک DOCTYPE داشته باشد. وجود بیش از یک DOCTYPE یا قرار دادن آن در جایی غیر از ابتدای سند، اعتبار صفحه را مخدوش می‌کند.
- عدم حساسیت به حروف بزرگ/کوچک: همان‌طور که اشاره شد، DOCTYPE نسبت به حروف case-insensitive است. با این وجود بهتر است از یک سبک ثابت (ترجیحاً حروف بزرگ برای کلمه DOCTYPE) استفاده کنید تا کد شما حرفه‌ای‌تر به‌نظر برسد.
- تأثیر بر JavaScript DOM: در محیط اسکریپت‌نویسی، می‌توان به DOCTYPE از طریق شیء document.doctype دسترسی داشت که یک شیء از نوع DocumentType را برمی‌گرداند. اگر صفحه DOCTYPE نداشته باشد، مقدار این خاصیت null خواهد بود. البته شما معمولاً نیازی به تغییر یا دستکاری DOCTYPE در زمان اجرا ندارید (در واقع DOM اجازه ویرایش آن را هم نمی‌دهد)؛ این ویژگی صرفاً برای خواندن اطلاعات DTD به‌کار می‌رود.
- اعتبارسنجی (Validation): برای اطمینان از صحت DOCTYPE و دیگر بخش‌های کد HTML خود، می‌توانید از سرویس اعتبارسنج W3C به آدرس validator.w3.org استفاده کنید. این ابزار خطاهای HTML (از جمله عدم وجود یا نادرستی DOCTYPE) را گزارش می‌دهد و کمک می‌کند صفحات استانداردتری داشته باشید.
- پشتیبانی مرورگرها: تمامی مرورگرهای مدرن از اعلان DOCTYPE پشتیبانی می‌کنند. حتی مرورگرهای قدیمی‌تر مانند IE6 نیز DOCTYPE را تشخیص می‌دادند (هرچند رفتارشان در حالت‌های مختلف متفاوت بود). بنابراین دغدغه‌ای بابت ناسازگاری مرورگرها با DOCTYPE وجود ندارد؛ تنها باید نوع صحیح را انتخاب کنید تا بهترین نتیجه را بگیرید.
جمع‌بندی و منابع یادگیری بیشتر
در یک کلام، DOCTYPE قطعه‌ای کوچک اما بسیار پراهمیت در ابتدای صفحات وب است که با معرفی نسخه و نوع استاندارد صفحه، تضمین می‌کند محتوای شما تا حد ممکن یکسان و صحیح در همه مرورگرها نمایش داده شود. توصیه می‌شود همیشه از DOCTYPE درست برای پروژه‌های وب خود استفاده کنید تا از حالت استاندارد مرورگر بهره‌مند شوید و از مشکلات نمایش ناهمخوان جلوگیری گردد.
اگر به‌تازگی یادگیری HTML را آغاز کرده‌اید یا مایلید دانش خود را در این زمینه تقویت کنید، منابع آموزشی معتبری وجود دارند که می‌توانند به شما کمک کنند. برای شروع، مرجع آنلاین W3Schools یک نقطه آغاز خوب برای یادگیری مبانی HTML و مشاهده مثال‌های کاربردی است. همچنین برای فارسی‌زبانان، آموزش‌های بومی مانند دوره‌ی رایگان آموزش جامع HTML در وب‌سایت سبزلرن (SabzLearn) در دسترس است که می‌تواند شما را به صورت پروژه‌محور و از صفر تا صد با مفاهیم HTML آشنا کند. بهره‌گیری از این منابع در کنار مستندات مرجعی مثل MDN Web Docs به شما کمک می‌کند مفاهیم پایه‌ای نظیر DOCTYPE و سایر تگ‌های HTML را به‌خوبی فرابگیرید و صفحات وب استاندارد و حرفه‌ای طراحی کنید.
با رعایت استانداردها و توصیه‌های ذکر شده در این مقاله، مطمئن باشید صفحات وب شما در همه‌ی مرورگرهای رایج به شکل مطلوبی نمایش یافته و تجربه‌ی کاربری بهتری فراهم خواهد شد.