← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 4 of 20

HTML डॉकटाइप्स

फ़र्ज़ करें आप किसी luxury hotel में check-in कर रहे हैं। अगर आप साफ-सुथरे standard formal clothes पहनकर आते हैं, तो staff विनम्रता से आपका स्वागत करके main lobby (Standard Mode) तक ले जाता है। लेकिन अगर आप गंदे, outdated clothes में आते हैं, तो staff आपके साथ अलग बर्ताव कर सकता है, आपको side entrance (Quirks Mode) इस्तेमाल करने पर मजबूर कर सकता है। HTML doctype वही dress code है। यह आपकी file की बिल्कुल पहली line होनी चाहिए। यह browser को ठीक-ठीक बताता है कि आप HTML का कौन-सा version लिख रहे हैं। सही doctype के बिना, browser एक outdated layout mode में स्विच हो जाएगा, जिससे आपके modern styles और grids टूटे हुए elements के रूप में render होंगे।
Syntax
markup
<!DOCTYPE html>

डॉकटाइप क्या है?

doctype declaration एक instruction है जो browser को बताता है कि किस document type और markup version की उम्मीद करनी है, जिससे यह सुनिश्चित होता है कि browser आपके page का layout consistent तरीके से render करे।

Note: doctype कोई HTML tag नहीं है; यह एक standard declaration है जिसे लाइन एक पर लिखना ज़रूरी है।
Warning: doctype को बिल्कुल पहली line पर न लिखने से browser एक outdated Quirks Mode में स्विच हो जाएगा।

उदाहरण: What is a Doctype?

markup
<!DOCTYPE html>
<html>
</html>

Quirks Mode बनाम Standard Mode

अगर किसी webpage पर doctype declaration missing या गलत है, तो browsers 'Quirks Mode' में स्विच हो जाते हैं।

Quirks Mode में, browsers पुराने, non-standard layout rules इस्तेमाल करके आपके pages render करते हैं ताकि बहुत पुरानी websites भी सपोर्ट हो सकें, जो आपके modern CSS styles को तोड़ देगा।

Note: browser को high-performance Standard Mode में चलाने के लिए हमेशा एक साफ HTML5 doctype डिक्लेयर करें।
Warning: Quirks Mode की वजह से margins, padding, और container sizes अलग-अलग devices पर गलत तरीके से render हो सकते हैं।

उदाहरण: Quirks Mode vs. Standard Mode

markup
<!-- Missing doctype triggers Quirks Mode -->
<!DOCTYPE html>
<html>
</html>

आधुनिक HTML5 डॉकटाइप

पुराने HTML versions में, doctypes लंबे, complex strings होते थे जो official document type definitions (DTDs) से लिंक होते थे। HTML5 ने एक छोटी, साफ, और याद रखने में आसान declaration पेश करके इसे simplify किया।

Note: अपने कोड को हल्का और पढ़ने में आसान रखने के लिए छोटा HTML5 doctype इस्तेमाल करें।
Warning: नए projects में पुराने HTML4 doctype strings copy-paste करने से बचें, क्योंकि ये obsolete हो चुके हैं।

उदाहरण: The Modern HTML5 Doctype

markup
<!DOCTYPE html>

हिस्टोरिकल लेगेसी डॉकटाइप्स

HTML के पुराने versions (जैसे HTML 4.01 या XHTML 1.0) में आपके कोड को validate करने के लिए W3C definitions से लिंक होने वाले लंबे, complex doctype strings ज़रूरी होते थे। हालाँकि आज ये obsolete हैं, फिर भी पुरानी websites maintain करते समय इन्हें समझना उपयोगी है।

Note: अगर आप किसी पुरानी website को अपडेट कर रहे हैं, तो उसके legacy doctype को साफ HTML5 declaration से बदल दें।
Warning: transitional या strict HTML4 doctypes इस्तेमाल करने से कुछ browsers में modern CSS grid layouts render होने में असफल हो सकते हैं।

उदाहरण: Historical Legacy Doctypes

markup
<!-- Legacy HTML 4.01 doctype -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Modern HTML5 doctype -->
<!DOCTYPE html>

वैलिडेशन और वेब स्टैंडर्ड्स

Web standards के अनुसार हर HTML page एक valid doctype से शुरू होना ज़रूरी है। अपने कोड को validate करने और W3C markup validation tests पास करने के लिए doctype शामिल करना ज़रूरी है।

Note: अपने HTML pages में formatting और doctype errors चेक करने के लिए एक online markup validator इस्तेमाल करें।
Warning: doctype शामिल न करने से सर्च इंजन bots आपका quality score कम कर सकते हैं।

उदाहरण: Validation and Web Standards

markup
<!DOCTYPE html>
<html lang="en">
</html>
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.