parsgreen.com
article

چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟

html-doctype

آیا تا به حال در مورد سایت یا وبلاگ خود به مشکلاتی حل نشدنی برخورده اید که با وجود صرف ساعت ها وقت و انرژی نتوانسته باشید آنها را حل کنید؟ البته که در بیشتر موارد این چنین بوده، صرف نظر از اینکه یک برنامه نویس با تجربه یا یک کاربر عادی وب باشیم، همه به نوعی با این نوع مشکلات روبرو شده ایم و کماکان می شویم، برخی از این مسائل به دلایلی مثل خطا در کدنویسی یا جا انداختن تگ ها به فرض در ترسیم یک جدول (table) ممکن است رخ دهند، یا گاهی خطا در کدهای جاوا اسکریپت، تنظیمات نادرست خاصیت ها در css، خطاهای سرور و... ممکن است باعث ایجاد اختلال در عملکرد مورد انتظار سایت یا وبلاگمان شود، اما از همه اینها گذشته یک مورد به ظاهر ساده اما بعضا دردسرساز را هم نباید از قلم انداخت و آن دستور <DOCTYPE> در صفحات html است، این یادداشت نگاهی خواهد داشت به چرایی و چگونگی استفاده از این دستور در صفحات وب.

دستور DOCTYPE چیست؟


پیش از هر چیز بد نیست تعریفی از این دستور داشته باشیم، دستور DOCTYPE در واقع جزئی از تگ های html نیست، بلکه یک دستور راهنما برای مرورگرهای وب است، از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از زبان پایه ی وب یعنی HTML یا (HyperText Markup Language) را ارائه نموده که هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند اندک هستند، اما این موضوع سبب می شود که مرورگرهای وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند و لذا به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند، لذا برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای DOCTYPE استفاده می شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند.

استفاده از DOCTYPE اجباری یا اختیاری؟


در واقع استفاده از دستور DOCTYPE در صفحات وب اجباری نیست، بدین معنی که اگر هم از آن استفاده نشود، صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم (مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی (Validation) نیز معتبر نیستند (که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو تاثیر منفی خواهد داشت)؛ برای اعتبار سنجی کدهای خود، می توانید به آدرس http://validator.w3.org مراجعه کنید.

انواع و ساختار مختلف دستور DOCTYPE


همانطور که پیش تر گفتیم، استفاده از دستور DOCTYPE در نسخه های HTML 4.01 و XHTML 1.0 اجباری است، اما هر کدام از این نسخه ها از سه نوع مختلف از این دستور برای سه هدف متفاوت استفاده می کنند.
- استاندارد HTML 4.01 Strict
در این نسخه، مرورگر از استاندارد یک فایل با نام strict.dtd پیروی می کند و طبق آن، استفاده از Cascading Style Sheets یا همان CSS برای کدنویسی استاندار، مجاز بوده و توصیه شده، در مقابل استفاده از تگ فرم ست (frameset)، نوشتن متون در خارج از چارچوب تگ های استاندارد، استفاده از عناصری مانند bgcolor، استفاده از برخی تگ های HTML قبیح دانسته شده (مانند Font) و... به لحاظ استاندارد کدنویسی مجاز نیست.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- استاندارد HTML 4.01 Transitional
نسخه 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">
- استاندارد HTML 4.01 Frameset
دستورالعمل فایل DTD در این نسخه، دقیقا مشابه نسخه HTML 4.01 Transitional است، با این تفاوت که در اینجا استفاده از تگ frameset مجاز است، تگ frameset برای صفحاتی به کار می رود که مبتنی بر frame یا صفحات خارجی هستند و با قرار دادن frame ها در درون تگ frameset، امکان فرمت بندی و تنظیم موقعیت سطرها و ستون ها (rows و columns) میسر می شود، به مثال زیر توجه کنید:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | استفاده از تگ frameset در html</title>
<!-- http://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>
همان طور که ملاحظه می کنید، این صفحه خود از سه فرم متفاوت استفاده می کند و در ضمن در آن از تگ body استفاده نشده است.
- استاندارد XHTML 1.0 Strict
در کنار زبان HTML ساده، زبانی ترکیبی (از HTML و XML) با نام XHTML یا (Extensible HyperText Markup Language) وجود دارد که در آن، زبان HTML ساده توسعه یافته و با XML ترکیب شده است، از آنجایی که HTML ساده خود از استاندارد SGML یا (Standard Generalized Markup Language) پیروی می کند و به این خاطر نسبت به XML محدودیت هایی دارد، استفاده از XHTML که به دلیل استفاده از XML با سیستم های مختلف سازگارتر است، توسط W3C توصیه شده است.
در استاندارد XHTML 1.0 Strict تقریبا تمام موارد HTML 4.01 Strict به طور یکسان هستند، ضمن اینکه سند XHTML باید از اصول نگارشی XML نیز پیروی کند (به طور مثال تگ های یکتا باید با یک / بسته شوند مانند </ br>).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- استاندارد XHTML 1.0 Transitional
این استاندارد نیز مشابه 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">
- استاندارد XHTML 1.0 Frameset
این استاندارد نیز مشابه  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


از آنجایی که نسخه HTML5 از استاندارد SGML یا (Standard Generalized Markup Language) پیروی نمی کند، لذا به فایل های DTD احتیاجی ندارد و تنها در سند HTML5 کافی است  DOCTYPE را به شکل زیر استفاده کنیم:
<!DOCTYPE html>
به طور مثال این یک نمونه از نسخه HTML5 است:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | نمونه ای از یک سند html5</title>
<!-- http://webgoo.ir -->
</head>
<body>
<P>HTML5</P>
</body>
</html>
sectionدسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
» کاربرد متاتگ refresh در صفحات وب (HTML)
» نحوه قرار دادن جستجوی گوگل در سایت یا وبلاگ
» چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
» آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت
» آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت
commentنظرات (۱۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: بهنام
زمان: ۱۱:۲۶:۱۴ - تاریخ: ۱۳۹۱/۰۷/۱۲
سلام
واقعا خسته نباشید
جامع بود
نویسنده: حبیب
زمان: ۱۴:۴۲:۳۳ - تاریخ: ۱۳۹۱/۱۰/۱۸
خیلی جالب و مفید
نویسنده: amin
زمان: ۰۱:۵۳:۲۵ - تاریخ: ۱۳۹۱/۱۲/۰۸
در قسمت توضیح HTML 4.01 Strict باید گفت که بجای تگ های نمایشی مثل فونت باید از CSS استفاده کرد. فلسفه حذف تگهای نمایشی هم همین بوده. اما شما نوشتی از هر دو اونا نمیشه استفاده کرد! لطفاً اصلاح شود.
با تشکر از زحمات سایت مفید شما
پاسخ: 
سلام
خیلی ممنون از نکته سنجی، البته نوشته بودیم از css و تگ هایی مانند font می توان استفاده کرد که با بررسی مجدد تگ font حذف گردید و آموزش اصلاح شد.
نویسنده: حسین
زمان: ۱۰:۱۰:۵۶ - تاریخ: ۱۳۹۱/۱۲/۱۱
سلام
خیلی ممنون از موضوع خوبی که اشاره کردید
من توی وبلاگم از کد HTML 4.01 Transitional در اولین خط ویرایش قالب استفاده کردم اما قالب وبلاگم رو بهم ریخت وقتی حذفش میکنم حالت نمایش قالبم درست میشه لطفاً اگه امکانش هست راهنماییم کنید که مشکل به خاطر چی هست؟ چطور میتونم از ساختار DOCTYPE در وبلاگم استفاده کنم.
پاسخ: 
سلام
استفاده از DOCTYPE و انتخاب یک نسخه باید پیش از طراحی قالب انجام شود و کدنویسی بر اساس اصول آن باشد، بعد از طراحی تغییر موارد باعث بروز مشکل می شود، در مورد قالب وبلاگ شما می توانید از نسخه html 5 استفاده کنید.
نویسنده: حسین
زمان: ۱۵:۴۶:۵۴ - تاریخ: ۱۳۹۱/۱۲/۱۱
واقعاً خسته نباشید ممنون از پاسختون متاسفانه این کارم بازم تغییری ایجاد نکرد
بازم ممنون
نویسنده: amirhossein
زمان: ۱۶:۴۶:۳۷ - تاریخ: ۱۳۹۲/۰۴/۰۷
سلام
واقعا دستتون درد نکنه
یعنی من میخوام تو اچ تی ام ال 5 با
<!DOCTYPE html>
کی گفتین استفاده کردم حالا متاتگ هام رو ببندم یا خیر؟
یا فقط
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
این نیازی به بستن نداره و بقیه متا تگ ها دارن؟
تگ هایی مثل
<input><br>
نیازی به بستن داره یا خیر؟
تگ
<img>
چطور
پاسخ: 
سلام
در HTML5 تگ های تکی مانند مواردی که اشاره کردید، باید بدون علامت / در انتها درج شوند (هرچند در مورد برخی تگ ها، استفاده به شیوه قبلی نیز مجاز است).
نکته 1: عدم درج علامت / در انتها مخصوص تگ های تکی است و شامل تگ های جفتی مانند div، p و... نمی شود.
نکته 2: جهت بررسی و اطمینان از استاندارد بودن کدها می توانید از افزونه های مخصوص توسعه دهنده گان وب که برای مرورگرهای مختلف به صورت پلاگین وجود دارد، استفاده کنید، همچنین با مراجع به آدرس زیر این امکان به صورت مستقیم فراهم است.
http://validator.w3.org
نویسنده: علی
زمان: ۰۱:۳۳:۲۳ - تاریخ: ۱۳۹۲/۰۴/۲۲
با سلام
من قبلاً نمی دونستم که باید اول doctype استفاده کنی بعد قالب رو طراحی کنی در واقع هم از css خارجی تو قالبم استفاده کردم و هم به صورت style تکی روی هر تگ البته style های تکی برای هر تگ به صورت موقتی است و بعداً به css اصلی منتقل خواهند شد.
می خواستم راهنمایی کنید به خاطر همین دو شکل تعریف css قالبم به هم می ریزه یا اینکه اشکال کار از یه جای دیگه هستش من دیگه کار خاصی نکردم و فقط ترکیبی از جدول و div درون قالبم استفاده شده و همین من همه ی انواع doctype ها رو امتحان کردم به هم میریزه
با تشکر از سایت خوبتان
پاسخ: 
سلام
همان طور که خودتان اشاره کردید، باید اول یک doctype انتخاب و بعد مطابق با آن قالب را طراحی می کردید، اضافه کردن doctype بعد از طراحی باعث بروز این نوع مشکلات می شود که برای رفع آن ناچارید قسمت های بهم ریخته را با آزمایش و خطا به حالت عادی برگردانید، البته به هم ریختن قالب دلایل مختلفی دارد، به طور مثال اگر چینش یا مقداردهی خاصیت های بلاک ها صحیح نباشد یا از خاصیت های CSS به صورت صحیح و بجا استفاده نکرده باشید هم ممکن است عناصر بهم ریخته به نظر بیایند.
در هر صورت استایل خطی به خودی خود مشکلی ایجاد نمی کند، مگر اینکه به فرض در مقدار دهی جایی را اشتباه کرده باشید.
نویسنده: علی
زمان: ۱۵:۰۸:۳۸ - تاریخ: ۱۳۹۲/۰۴/۲۲
خیلی ممنون از پاسختون
من در حال حاضر در حال انتقال همه ی style های داخل صفحه به css خارجی هستم اما در برخی نقاط دچار مشکل شده ام
همان طور که می دانید تگ table دارای خاصیت هایی مثل cellpadding یا cellspacing می باشد من برای طراحی قالب کلی از جدول استفاده کردم و align آن را center گذاشتم حالا وقتی می خوام به css منتقل کنم در آنجا وارد کردن صفت های فوق جوابگو نیست. مثلاً نمی دانم به جای align باید چه چیزی وارد کنم یا به جای cellspacing یا cellpadding.
در کل زیاد نمی خوام مزاحمتان شوم. می خواستم بدونم آیا راهی هستش یا باید برای طراحی قالب با جدول از css خارجی استفاده نکرد.
طراحی قالب: Photoshop
کد نویسی: Dreamweaver
تا یادم نرفته این را هم بگوییم که من حتماً باید از CSS خارجی استفاده کنم
با تشکر از سایت خوب و پرطرفدارتان
پاسخ: 
قبل از هر چیز باید یادآور شویم که استفاده از جدول در طراحی وب توصیه نمی شود و محدود به موارد خاصی است، با این حال:
با توجه به اینکه خاصیت cellpadding و... در HTML5 پشتیبانی نخواهند شد، لذا به ناچار باید از CSS استفاده کرد، خاصیت مشابهی که در CSS برای این کار وجود دارد، برای cellpadding می توان همان padding را برای td و th در نظر گرفت و برای cellspacing از border-collapse و border-spacing استفاده کرد، مثال:
<style type="text/css">
table {
border-collapse:separate;
border-spacing:4px;
}
table td, table th {
padding:8px;
}
</style>
<table width="200" border="1">
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
استایل فوق در اکثر مرورگرها به صورت یکسان عمل می کند، منتها در مرورگر اینترنت اکسپلورر تنها از نسخه 8 و مابعد کابرد دارد (اگر نیاز به پشتیبانی از مرورگر اینترنت اکسپلورر 6 و 7 دارید، این روش کاربردی ندارد)، تنها در یک صورت این روش در مرورگر IE 6 ,7 نیز عمل می کند و آن هم در حالتی که border-collapse برابر collapse باشد که این حالت برابر
cellspacing="0"
است، مثال:
<style type="text/css">
table {
border-collapse:collapse;
}
table td, table th {
padding:8px;
}
</style>
<table width="200" border="1">
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
نتیجه: اگر پشتیبانی از مرورگر اینترنت اکسپلورر 6 و 7 برایتان مهم است (که این روزها اکثر سایت ها دیگر آنها را پشتیبانی نمی کنند)، باید قید این شیوه را بزنید! (مگر در حالت cellspacing صفر)، در غیر این صورت می توان از CSS استفاده کرد.
برای algin نیز می توانید از float استفاده کنید، همچنین استایل زیر یک عنصر را در وسط بلاک والد خود تنظیم می کند:
margin-left:auto;
margin-right:auto;
نویسنده: پگاه
زمان: ۱۱:۱۷:۴۸ - تاریخ: ۱۳۹۲/۰۷/۲۳
با تشکر از مطلب مفیدتون
از کجا باید بفهمیم که هر ورژن از هر مرورگر کدوم ورژن html ویا xhtml رو پشتیبانی می کنه؟
با تشکر
پاسخ: 
سلام
HTML و XHTML در حال حاضر در تمام مرورگرها پشتیبانی می شوند، ضمن اینکه راه خاصی برای این مسئله وجود ندارد (مگر اینکه نسخه مرورگر را به صورت دستی چک کنید).
نویسنده: reza
زمان: ۱۱:۰۸:۴۸ - تاریخ: ۱۳۹۲/۱۰/۲۷
سلام
با DOCTYPE! میتونم تو صفحات سایتم کدهایی را بزارم که بعد از لود کامل سایت انها لود بشن؟
پاسخ: 
سلام
این موضوع ارتباطی به DOCTYPE! ندارد! اگر کد شما به صورت جاوا اسکریپت است می توانید تابع آن را در تگ body و با رویداد onload فراخوانی کنید، یا به صورت نمونه زیر این کار را انجام دهید:
<script type="text/javascript">
window.onload = function(){
yourJsFunction();
}
</script>
نویسنده: معصوه
زمان: ۱۳:۵۱:۰۲ - تاریخ: ۱۳۹۳/۰۵/۲۴
من نمی تونم مطالب رو به صورت فارسی در html5 بنویسم
وقتی مطلب به زبان فارسی می نویسم در صفحه وب اون رو نمی خونه و بجای متن فارسی علامت های ناخوانا می نویسه
لطفا بهم کمک کنید
پاسخ: 
فایل و نوع کدنویسی شما باید بررسی شود، ممکن است ایراد از کدنویسی یا به طور مثال وجود BOM در فایل باشد.
در صورت تمایل فایل خود را به صورت فشرده به آدرس ایمیل ما (موجود در بخش تماس) ارسال و پاسخ را از همان طریق پیگیری کنید.
نویسنده: رضا
زمان: ۱۳:۰۳:۲۰ - تاریخ: ۱۳۹۳/۱۱/۰۵
سلام
وقت نوشتن کد زمانی مینویسم doctype html بصورت آبی نشان داده میشه و لی وقتی مشخصات html 4.1 و xhtml رو میزارم قرمز نمایش میده (در ویو سورس موزیلا) دلیل این چیه؟ خطایی در کاره؟ (البته میدونم که خطای syntax نمیتونه باشه)
پاسخ: 
سلام
خیر، خطایی نیست! ظاهرا مرورگر فایرفاکس نسخه HTML 5 را توصیه می کند و به همین دلیل بهتر است xhtml دیگر استفاده نشود! (در صورتی که پروژه جدیدی می نویسید بهتر است این توصیه را رعایت کنید!).
نویسنده: نیم سکه
زمان: ۲۳:۵۹:۵۷ - تاریخ: ۱۳۹۳/۱۲/۰۶
بابت آموزش خوبتون ممنون . واقعا عالی بود.
نویسنده: مسعود
زمان: ۰۴:۰۴:۵۸ - تاریخ: ۱۳۹۴/۰۹/۰۳
با سلام
میشه بگین این <iframe> که در پایین body سایت شما است برا چه منظوریه؟
ممنون
پاسخ: 
سلام
این iframe در سورس HTML مرورگر و توسط کد گوگل پلاس ساخته می شود!
نویسنده: مسعود
زمان: ۱۵:۱۳:۲۷ - تاریخ: ۱۳۹۴/۰۹/۰۴
مرسی بابت پاسختون
ولی منظور من اون <iframe> ای بود که بعد از پایان body و قبل از بستن تگ html اومده
display اش none هست و محتویاتی هم نداره!
بازم مرسی
پاسخ: 
این تگ ها در سورس اصلی صفحه نیست و توسط کدهای جاوا اسکریپتی گوگل پلاس، برای نمایش امکانات دکمه 1+ ساخته می شوند!
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 6
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...