آموزش برنامه نویسی وب و مهارتهای مرتبط
شنبه ۲۲ شهریور ۱۴۰۴
Saturday, September 13, 2025 GMT +3:30
Saturday, September 13, 2025 GMT +3:30
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
احتمالا تا به حال در مورد ظاهر و امکانات سایت یا وبلاگمان به مشکلات حل نشدنی برخورده ایم که با وجود صرف ساعت ها وقت و انرژی نتوانسته باشیم آنها را حل کنیم، گذشته از اینکه برنامه نویس حرفه ای یا وبمستر و وبلاگ نویس باشیم همه به نوعی با این نوع مشکلات روبرو شده ایم و کماکان و گاه و بیگاه می شویم، برخی از این مسائل به دلایلی مانند خطا در کدنویسی یا جا انداختن تگ ها به خصوص در هنگام تعریف قابلیت های پیچیده به فرض در ترسیم جداول (table) ممکن است رخ دهند، یا گاهی خطا در کدهای جاوا اسکریپت، تنظیمات نادرست خاصیت ها در CSS، خطاهای سرور و... ممکن است باعث ایجاد اختلال در عملکرد مورد انتظارمان از سایت یا وبلاگ شود، اما از همه اینها گذشته یک مورد به ظاهر ساده اما بعضا دردسرساز را هم نباید از قلم انداخت و آن در نظر گرفتن DOCTYPE مناسب در سورس کد صفحات HTML است، از این رو یادداشت پیش رو نگاهی خواهد داشت به چرایی و چگونگی استفاده درست از DOCTYPE در صفحات وب.
DOCTYPE چیست؟
DOCTYPE جزء تگ های HTML نیست و صرفا یک عبارت راهنما است که در بالاترین قسمت صفحه وب درج و به کمک آن نوع سند تعیین و بر همان اساس کدهای HTML توسط مرورگرها پردازش می شود، از آنجایی که کنسرسیوم جهانی وب (W3C) نسخه های مختلفی از زبان HTML (مخفف HyperText Markup Language) را ارائه نموده که هر کدام در مقایسه با هم تفاوت هایی هرچند بعضا جزئی دارند، بدون تعیین نوع سند ممکن است مرورگر در تشخیص صحیح نسخه HTML استفاده شده دچار اشتباه شود و تنظیمات پیش فرض خود را اعمال کند که در نتیجه پردازش امکانات و عناصر ظاهری صفحه در مرورگرهای مختلف متفاوت شده و ممکن است با حالت مورد انتظارمان تطبیق نداشته باشد، به همین دلیل برای جلوگیری از بروز چنین مشکلاتی از عبارت راهنمای DOCTYPE در بالاترین قسمت صفحه وب استفاده می کنیم تا نوع نسخه HTML برای مرورگرهای مختلف قابل تشخیص باشد.
استفاده از DOCTYPE اجباری یا اختیاری؟
به طور کلی استفاده از DOCTYPE در صفحات وب اختیاری است یعنی اگر هم از این عبارت استفاده نکنیم صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این عبارت استفاده کنیم (به خصوص برای صفحاتی که از HTML نسخه های ماقبل 5 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از DOCTYPE در وب امروز در عمل اجباری است و بدون در نظر گرفتن این عبارت علاوه بر اینکه ممکن است صفحات وب به درستی در مرورگرهای مختلف پردازش و نمایش داده نشوند از نظر اعتبارسنجی (Validation) سورس کدها نیز معتبر نیستند که این امر در SEO (مخفف Search Engine Optimization یا بهینه سازی برای موتورهای جستجو) بر کسب امتیاز و رتبه سایت، وبلاگ و در کل صفحات وب تاثیر منفی خواهد داشت.
برای اعتبارسنجی کدهای خود و اطمینان از استفاده صحیح DOCTYPE می توانیم به آدرس
http://validator.w3.orgتعریف DOCTYPE در HTML نسخه های قدیمی
اشاره شد که استفاده از DOCTYPE به خصوص در نسخه های ماقبل HTML 5 به طور مثال HTML 4.01 و XHTML 1.0 در عمل اجباری است، هر کدام از این نسخه ها در تعریف DOCTYPE به چند نوع فایل DTD (مخفف Document Type Definition) مختلف برای هدف های متفاوتی ارجاع می دهند، فایل های DTD حاوی قوانین استانداردی هستند که مرورگرها با پیروی از آنها تگ های مجاز و ساختار کدنویسی صفحه را پردازش و نوع سند را درک می کنند، در ادامه نحوه تعریف DOCTYPE در HTML نسخه های قدیمی را جهت آشنایی بیشتر بررسی می کنیم.
نکته: بزرگی و کوچکی حروف در هنگام تعریف DOCTYPE تفاوتی ندارد (Case-insensitive) اما شیوه توصیه شده W3C به صورت نمونه های زیر است.
- استاندارد HTML 4.01 Strict
در این نسخه مرورگر از استاندارد یک فایل با نام strict.dtd پیروی می کند و طبق قوانین این فایل استفاده از استایل CSS (مخفف Cascading Style Sheets) برای کدنویسی استاندار صفحات وب مجاز بوده و توصیه شده، در مقابل استفاده از تگ فریم ست (frameset)، نوشتن متون در خارج از چارچوب تگ های استاندارد، استفاده از صفت هایی مانند bgcolor، استفاده از برخی تگ های HTML منسوخ شده (مانند font) و... به لحاظ استاندارد کدنویسی مجاز نیست و نباید در سورس صفحه وب استفاده شود، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">نسخه Transitional در مقایسه با استاندارد Strict محدودیت کمتری دارد و استفاده از خاصیت های معرف ویژگی های ظاهری (مانند bgcolor، background و...) در آن مجاز است (البته تا آنجا که می شود بهتر است برای جلوه های ظاهری از استایل CSS به جای خاصیت های تگ های HTML استفاده کنیم)، این استاندارد برای سازگاری با مرورگرهای خیلی قدیمی که از CSS پشتیبانی نمی کنند نیز مناسب است، استفاده از تگ فریم ست (frameset) در این نسخه مجاز نمی باشد، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">دستورالعمل فایل DTD در این نسخه دقیقا مشابه نسخه HTML 4.01 Transitional است، با این تفاوت که در اینجا استفاده از تگ frameset مجاز است، تگ frameset برای صفحاتی به کار می رود که مبتنی بر فریم یا صفحات خارجی هستند و با قرار دادن تگ های frame در درون تگ frameset امکان فرمت بندی و تنظیم موقعیت سطرها و ستون ها (Rows و Columns) میسر می شود، به طور مثال:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="fa">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | استفاده از تگ frameset در HTML</title>
<!-- Webgoo.ir -->
</head>
<frameset cols="30%,40%,30%" rows="33%,33%,33%" border="1">
<frame src="frame-1.htm" frameborder="1">
<frame src="frame-2.htm" frameborder="1">
<frame src="frame-3.htm" frameborder="1" >
</frameset>
</html>- استاندارد XHTML 1.0 Strict
کنسرسیوم جهانی وب (W3C) با هدف توسعه و انعطاف پذیری بیشتر HTML و پشتیبانی از قابلیت های زبان XML (مخفف Extensible Markup Language) در صفحات وب نسخه ترکیبی از HTML و XML را با نام XHTML (مخفف Extensible HyperText Markup Language) معرفی کرده است، در این استاندارد قواعد زبان HTML ساده توسعه یافته و با قواعد XML ترکیب شده است، از آنجایی که HTML متداول خود از استاندارد SGML (مخفف Standard Generalized Markup Language) پیروی می کند و به این خاطر نسبت به XML محدودیت هایی دارد استفاده از XHTML به جهت سازگاری و در اختیار قرار دادن امکانات بیشتر توسط W3C توصیه شده است.
در استاندارد XHTML 1.0 Strict تقریبا تمام قواعد HTML 4.01 Strict به طور یکسان وجود دارد، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند (به طور مثال تگ های یکتا باید با یک / بسته شوند مانند </ br>)، همچنین امکان استفاده از قابلیت هایی مانند CDATA وجود دارد، CDATA برای ترکیب کدهای JavaScript و XHTML استفاده می شود و به این شیوه امکان تجزیه صحیح سورس کدها برای برنامه ها ممکن می شود به فرض:
<script type="text/javascript">
//<![CDATA[
document.write("XHTML + JavaScript");
//]]>
</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">این استاندارد نیز مشابه HTML 4.01 Transitional است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">این استاندارد نیز مشابه HTML 4.01 Frameset است، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند، برای تعریف این استاندارد باید متن راهنمای زیر را در بالاترین قسمت صفحه درج کنیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">تعریف DOCTYPE در HTML5
HTML در نسخه 5 (جدیدترین نسخه در حال حاضر) از استاندارد SGML (مخفف Standard Generalized Markup Language) پیروی نمی کند لذا در این نسخه به فایل های DTD ارجاع نمی دهیم و به دستورالعمل های این فایل احتیاجی نداریم، در سند HTML5 تنها کافی است DOCTYPE را به شکل زیر درج کنیم:
<!DOCTYPE html><!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمونه ای از یک سند HTML5</title>
<!-- Webgoo.ir -->
</head>
<body>
<p>نمونه کدنویسی صفحه وب در HTML نسخه 5</p>
</body>
</html><br>
<br />دسته بندی: آموزش کاربردی » HTML
برچسب ها: HTML
مطالب بیشتر:چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
کاربرد متاتگ refresh در صفحات وب (HTML)
نحوه درج علامت های خاص در HTML
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
دیدگاه
۲۷ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.راضیه
۱۳:۰۵ ۱۳۹۹/۰۱/۱۶
برنامه ورزش fitonomy نصب کردم doctyp html اومده
این دستور جزئی از کدنویسی درونی صفحات وب است و به طور طبیعی نباید نمایش داده شود، احتمال اینکه در بارگذاری برنامه مشکلی وجود داشته باشد زیاد است، جهت اطمینان لطفا یک اسکرین شات از مشکل تهیه، در سایت های میزبان فایل آپلود کرده و آدرس را ارسال نمائید.
zb84
۲۱:۳۴ ۱۳۹۸/۱۰/۲۲
هنگام آپدیت افزونه های وردپرس به این ارور برخورد میکنم لطفا راهنمایی کنید.
بروزرسانی ناموفق شد: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 504 Gateway Timeoutخطا به بحث DOCTYPE مربوط نمی شود، ظاهرا مشکلی در برقراری ارتباط با سرور افزونه وجود دارد که می تواند به دلیل استفاده از برنامه پراکسی، مسدود بودن آدرس سرور و مواردی از این دست بروز کند، یک بار با و بدون برنامه پراکسی امتحان کنید، همچنین از تم های پیش فرض وردپرس استفاده و مجددا تست کنید.
یاسین جوانمردی
۱۹:۰۴ ۱۳۹۸/۰۴/۰۵
سلام وقت بخیر توی html که بزرگ و کوچیکی حروف اهمیتی نداره، واسه doctype هم صدق میکنه یا تاثیر میگیره از بزرگ و کوچیکی حروف؟
در HTML نسخه 5 و ماقبل استفاده از Doctype با حروف بزرگ یا کوچک تفاوتی ندارد و به هر چهار شکل نمونه زیر معتبر است:
<!doctype html>
<!DOCTYPE html>
<!DOCTYPE HTML>
<!DoCtYpE hTmL><!DOCTYPE html>bahman
۲۱:۱۴ ۱۳۹۷/۰۴/۲۶
فوق العاده کامل ممنون
۱۲:۳۳ ۱۳۹۶/۰۴/۳۰
ممنون از توضیحات خوبتون
فرهاد
۲۰:۲۳ ۱۳۹۶/۰۱/۱۶
سلام مهندس
من سایتی دارم طراحی میکنم مشکل من اینه که زمانی که اندازه مرورگر رو تغییر میدم متاسفانه اندازه تصاویر با اندازه صفحه تغییر نمیکنه اگه امکانش هست منو راهنمایی کنید
من سایتی دارم طراحی میکنم مشکل من اینه که زمانی که اندازه مرورگر رو تغییر میدم متاسفانه اندازه تصاویر با اندازه صفحه تغییر نمیکنه اگه امکانش هست منو راهنمایی کنید
این موضوع یک مبحث کلی است و نیاز به آموزش های مقدماتی دارد، به هر صورت در حد راهنمایی بهتر است تکنیک هایی مانند طراحی قالب واکنشگرا (Responsive) را فرابگیرید تا قالب سایتتان با تمام صفحه نمایش ها سازگار باشد.
۱۵:۱۶ ۱۳۹۵/۱۲/۱۶
ایا باز نشدن صفحه پاپ آپ ارتباطی به این کد داره فقط در وبلاگ من که در رزبلاگ هست پاپ اپ باز نمیشه در وبلاگهای دیگه بدون مشکل اجرا میشه
خیر، تا آنجا که اطلاع داریم ارتباط خاصی بین این دو مورد وجود ندارد!
محمد
۱۴:۰۶ ۱۳۹۵/۱۱/۱۷
ممنون بابت پاسختون
اگر وقت دارین لطف میکنید دو یا سه تا از خطاهای syntax رو بگید
اگر وقت دارین لطف میکنید دو یا سه تا از خطاهای syntax رو بگید
لطفا برنامه PHPStorm را نصب کنید، خطاهای Syntax به رنگ قرمز مشخص هستند (از جمله جا افتادن علامت ; برای بستن دستورات خاصیت ها و...)!
محمد
۱۹:۳۷ ۱۳۹۵/۱۱/۱۶
سلام
این آدرس سایته
این آدرس سایته
http://webpage1000.comli.comکدنویسی هم در بخش HTML و هم CSS چندین خطای جزئی به لحاظ Syntax دارد! سعی کنید کار را از بخش های اولیه و بلاک به بلاک تست کنید تا علت واقعی مشکل آسانتر مشخص و رفع شود، همان طور که اشاره کرده اید، یکی از اصول اولیه در طراحی واکنش گرا مقدار دهی درصدی برای عناصری است که می خواهید نسبت به اندازه صفحه نمایش واکنش داشته باشند! همچنین تکنیک دیگر استفاده از min و max در مقدار دهی است، در کل طراحی رسپانسیو شامل نکات ریز زیادی است که به همین دلیل باید قسمت به قسمت به صورت جزئی کارتان را تست کنید! مرور اجمالی مطلب زیر می تواند مفید باشد:
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/محمد
۱۳:۱۰ ۱۳۹۵/۱۱/۱۴
سلام لطفا به آدرس زیر نگاهی بندازید استاد
ببینید ریسپانسیو نشدنش به خاطر اینه که مقادیر با پیکسل وارد شده است یا چیز دیگه از لحاظ کد نویسی چطوره چند وقتیه دوباره شروع کردم
ببینید ریسپانسیو نشدنش به خاطر اینه که مقادیر با پیکسل وارد شده است یا چیز دیگه از لحاظ کد نویسی چطوره چند وقتیه دوباره شروع کردم
آدرس سایت درج نشده؟!
۱۹:۱۹ ۱۳۹۵/۰۸/۱۹
سلام.
نوع نسخه ای (HTML4/5) که استفاده می کنیم رو کجا باید مشخص کنیم؟ خود طراح مشخص میکنه دیگه؟
توضیح بدید مرسی.
نوع نسخه ای (HTML4/5) که استفاده می کنیم رو کجا باید مشخص کنیم؟ خود طراح مشخص میکنه دیگه؟
توضیح بدید مرسی.
این مورد مربوط به کدنویسی صفحه است و در کدهای HTML مشخص می شود!
۲۱:۲۰ ۱۳۹۵/۰۵/۱۸
سلام و خسته نباشید. بسیار عالی و کار آمد بود. ممنون
۱۰:۰۷ ۱۳۹۵/۰۵/۱۴
یعنی دستتون درست انقدری که سایت شما کاره منو راه انداخت هیچ کدوم ازین آموزش های تصویریو کتابا و سایتای دیگه راه ننداخت امیدوارم همیشه سلامت باشید.
مسعود
۱۵:۱۳ ۱۳۹۴/۰۹/۰۴
مرسی بابت پاسختون
ولی منظور من اون <iframe> ای بود که بعد از پایان body و قبل از بستن تگ html اومده
display اش none هست و محتویاتی هم نداره!
بازم مرسی
ولی منظور من اون <iframe> ای بود که بعد از پایان body و قبل از بستن تگ html اومده
display اش none هست و محتویاتی هم نداره!
بازم مرسی
این تگ ها در سورس اصلی صفحه نیست و توسط کدهای جاوا اسکریپتی گوگل پلاس، برای نمایش امکانات دکمه 1+ ساخته می شوند!
مسعود
۰۴:۰۴ ۱۳۹۴/۰۹/۰۳
با سلام
میشه بگین این <iframe> که در پایین body سایت شما است برا چه منظوریه؟
ممنون
میشه بگین این <iframe> که در پایین body سایت شما است برا چه منظوریه؟
ممنون
این iframe در سورس HTML مرورگر و توسط کد گوگل پلاس ساخته می شود!
صفحه 1 از 2 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.