صفحه ریسپانسیوه. استایلها به دقت اعمال شدن و تو مرورگر خودتون عالیه. اما دقیقا چه اتفاقی واسه کدهاتون افتاده؟ گاهی ممکنه یه تگ که از نظر شما هیچ اهمیتی نداره رو کلا ننویسین یا ناقص بنویسین. یکی از این تگها، تگ DOCTYPE هستش. عدم استفاده از دستور DOCTYPE یا استفاده نادرست ازش میتونه صدمه زیادی به سایت یا صفحهتون بزنه.
تگ DOCTYPE در HTML
دستور DOCTYPE در واقع جزو تگهای اچ تی ام ال نیست و صرفا یه راهنماست. یه راهنما واسه مرورگرهای اینترنته که به مرورگرها میفهمونه نسخه html ای که ازش استفاده میکنیم چیه. واضحتر میگم، نوشتن این دستور هیچ تگی رو به html القا نمیکنه. پس هیچ چیز خاصی رو هم در صفحهمون نمایش نمیده چون تگ اچ تی ام ال نیست.
صرفا یه دستور العمل واسه معرفی ورژن اچ تی ام ال صفحهمون به مرورگر هاست و همچنین به مرورگرها میگه که این صفحه کاملا با اچ تی ام ال نوشته شده. اگه میخواین یه مطالعه کامل از تگهای html داشته باشین به مقاله آموزش HTML سر بزنین.
لزوم استفاده از دستور DOCTYPE
آیا استفاده از تگ doctype الزامیه یا اختیاریه؟ در جواب به این سوال میتونیم بگیم که صفحه html شما بدون این تگ هم کار خواهد کرد. همه تگها و المانها نمایش داده میشن اما W3C به عنوان کنسرسیوم جهانی وب، چون نسخههای متعددی از اچ تی ام ال رو معرفی کرده، الان خودش تاکید میکنه که حتما نسخه html صفحهتون رو به مرورگرها اعلام کنین. چرا؟ چون ما چندین نسخه از اچ تی ام ال رو معرفی کردیم و داریم.
اما اگه از این دستور سرپیچی کنیم و نسخه اچ تی ام ال رو به مرورگرها معرفی نکنیم چی میشه؟ در جواب این سوال باید شما رو با قسمت اعتبار سنجی کنسرسیوم جهانی وب آشنا کنم:
اعتبارسنجی صفحه
برای اینکه بدونین کدوم قسمت از کدهای صفحهتون با قوانین W3c مغایره باید به این آدرس validator.w3.org مراجعه کنین و آدرس صفحهای که قراره بررسی کنین رو در قسمت جستجوش (که با فلش سبز مشخص شده) تایپ کنین و دکمه check رو بزنین:
بعد از انجام این کار، کدهای اشتباه، ناقص و تعداد خطاهایی که در صفحه html تون مرتکب شدین رو میاره. خوب اگه صفحه شما فاقد تگ doctype باشه یه خطای بزرگ به اندازه یه هندوونه خدمتتون ارائه میده. اما نمیدونین اصلاح این خطاها چه بلایی سر سایت شما میاره؟ من میگم. سایت شما رو به کل دنیای وب، بی اعتبار نشون میده. رتبه سایتتون خراب میشه و شما انگار فقط دفتر خاطرات نوشتین نه یه سایت.
معایب استفاده نکردن از دستور DOCTYPE
اولا نتیجه منفی روی اعتبار و رتبه سایت شما میذاره.
دوما از لحاظ نمایش هم که صفحه شما رو در مرورگرهای مختلف، به درستی نشون نمیده.
پس اگه یه روزی متوجه شدین صفحه html شما در مرورگرهای مختلف، رفتار مختلف و نمایش متفاوتی داره بدونین یادتون رفته از تگ DOCTYPE استفاده کنین. اما نحوه استفاده درست از اون چیه؟ جواب این سوال بستگی به این داره که شما از کدوم نسخه اچ تی ام ال میخوایین استفاده کنین.
نحوه استفاده از تگ doctype
طرز نوشتن دستور doctype در نسخههای مختلف html متفاوته اما به دو دلیل نمیخوام درمورد نسخههای دیگه حرف بزنم:
دلیل اول: امروزه دیگه همه از نسخه آخر html که همون نسخه ۵ هستش استفاده میکنن. چرا؟ فرض کنین الان گوشی آیفون رایگان بود. به هرکی یه آیفون مفت میدادن. شما ترجیح میدادین یه مدل قدیمیش رو بردارین؟ نه. اچ تی ام ال هم عین آیفون مفت میمونه. هیشکی نمیخاد از نسخه قدیمیش استفاده کنه.
دلیل دوم: شما به عنوان کسی که میخوایین برنامه نویسی رو شروع کنین باید از نسخه آخر html استفاده کنین.
اما نسخه آخرش تا این تاریخ نسخه پنجمه. HTML5 . در این نسخه هم کافیه دستور زیر رو تایپ کنین:
<!DOCTYPE HTML>
جای تگ DOCTYPE
هرچند تگ doctype جزو تگها و دستورات html نیست اما هنگام نوشتن صفحات و اسناد html، اولین دستور یا تگی که نوشته میشه دستور doctype هست. به عبارتی شما باید همه صفحات اچ تی ام ال خودتون رو با این تگ شروع کنین. همه تگهای html بعد از این دستور نوشته میشن. پس یادتون نره که سطر اول سند اhtml تون رو به این دستور اختصاص میدین.
در زیر نمونه یه صفحه استاندارد اچ تی ام ال آورده شده:
<!DOCTYPE html> <html> <head> <title>عنوان صفحه</title> </head> <body> اجزای داخلی صفحه html </body> </html>
حساسیت دستور DoCtYpE به حروف بزرگ و کوچک
عارضم خدمتتون که تگ DOCTYPE هیچ حساسیتی به حروف بزرگ و کوچیک نداره. یعنی لازم نیست زیاد دقت به خرج بدین و فسفر بسوزونین. خود سایت w3school نوشته که اینجوریا هم میتونین از تگ doctype استفاده کنین:
<!DOCTYPE html> <!DocType html> <!Doctype html> <!doctype html>
اما خاطر مبارک باشه که علامت تعجب رو اولش بذارین.
پشتیبانی مرورگر ها از تگ DOCTYPE
نام تگ | |||||
DOCTYPE | پشتیبانی می کند | پشتیبانی می کند | پشتیبانی می کند | پشتیبانی می کند | پشتیبانی می کند |
همونطور که مشاهده میکنین همه مرورگرهای حال حاضر دنیای اینترنت از دستور doctype حمایت میکنن پس میتونین با خیال راحت از این تگ استفاده کنین.
در پایان اگه قصد دارین html رو به صورت کامل، جامع و پیشرفته ولی با یک زبان ساده یاد بگیرین، من اثر زیر رو بهتون پیشنهاد میکنم:
فیلم آموزش HTML به صورت کامل به مدت زمان ۳ ساعت و ۳۰ دقیقه با انواع مثالهای عملی و طراحی یک صفحه زیبای html و css
منابع:
https://www.w3schools.com/tags/tag_doctype.asp
https://www.w3.org/QA/2002/04/valid-dtd-list.html