Course Progress 100%

HTML DOCTYPE Declaration

HTML <!DOCTYPE> Declaration एक instruction है जो browser को यह बताती है कि document किस HTML version में लिखा गया है और उसे किस rendering mode में interpret करना है।

यह कोई HTML tag नहीं है, बल्कि document की शुरुआत में दिया जाने वाला एक declaration है।
इसका main purpose browser को standards-compliant rendering के लिए force करना होता है।

<!DOCTYPE> Declaration क्यों जरूरी है

अगर <!DOCTYPE> Declaration सही तरीके से define नहीं की जाती, तो browser Quirks Mode में चला सकता है, जिससे:

  • Layout और CSS behavior inconsistent हो सकता है
  • Modern HTML और CSS features सही से work नहीं करते
  • अलग-अलग browsers में output अलग दिख सकता है

सही <!DOCTYPE> Declaration browser को Standards Mode में render करने के लिए instruct करती है।

HTML5 <!DOCTYPE> Syntax

<!DOCTYPE html>

Explanation

इस syntax में:

  • <!DOCTYPE> declaration keyword है
  • html browser को बताता है कि document HTML5 standard follow कर रहा है

HTML5 में <!DOCTYPE> को intentionally बहुत simple रखा गया है ताकि:

  • Beginners confuse न हों
  • Browser compatibility maximum रहे

Complete HTML Document Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOCTYPE Example</title>
</head>
<body>
    <p>This is a simple HTML document.</p>
</body>
</html>

Explanation

इस example में:

  • <!DOCTYPE html> browser को बताता है कि यह HTML5 document है
  • Browser standards mode में page render करेगा
  • CSS, JavaScript और HTML elements modern rules के अनुसार work करेंगे

Result यह होगा कि page सभी modern browsers में same behavior दिखाएगा।

<!DOCTYPE> Declaration की Position

<!DOCTYPE> Declaration हमेशा:

  • Document की first line में होती है
  • <html> tag से पहले लिखी जाती है

Correct position:

<!DOCTYPE html>
<html>

अगर इसे <html> के बाद लिखा जाए, तो browser ignore कर सकता है या quirks mode में चला सकता है।

Older HTML Versions में <!DOCTYPE>

HTML5 से पहले <!DOCTYPE> काफी complex हुआ करती थी।

HTML 4.01 Strict Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Explanation

Older versions में:

  • DTD (Document Type Definition) define करनी पड़ती थी
  • Syntax लंबा और error-prone था
  • Beginners के लिए समझना मुश्किल था

HTML5 ने इन सभी problems को eliminate कर दिया।

Browser Rendering Modes और <!DOCTYPE>

Browser मुख्य रूप से तीन modes में render करते हैं:

  1. Standards Mode
    • Correct <!DOCTYPE> होने पर
    • Modern web standards follow होते हैं
  2. Almost Standards Mode
    • कुछ edge-case differences होते हैं
  3. Quirks Mode
    • <!DOCTYPE> missing या गलत होने पर
    • पुराने browsers जैसा behavior

HTML5 का <!DOCTYPE html> browser को हमेशा Standards Mode में रखता है।

Browser Support

BrowserSupport
ChromeYes
EdgeYes
FirefoxYes
SafariYes
OperaYes

<!DOCTYPE html> सभी modern और legacy browsers द्वारा fully supported है।

Tips and Notes

  • हर HTML document में <!DOCTYPE html> जरूर लिखना चाहिए
  • यह SEO के लिए direct factor नहीं है, लेकिन rendering issues SEO indirectly affect कर सकते हैं
  • <!DOCTYPE> case-sensitive नहीं है, लेकिन standard practice uppercase में लिखना है
  • <!DOCTYPE> declaration self-closing नहीं होती और इसका closing tag नहीं होता

Standard Attributes

The <!DOCTYPE> declaration does not support any standard attributes.

Event Attributes

The <!DOCTYPE> declaration does not support any event attributes.

Practical Use Cases

HTML <!DOCTYPE> Declaration का उपयोग:

  • Browser compatibility ensure करने के लिए
  • CSS और layout issues avoid करने के लिए
  • Professional और standard-compliant websites बनाने के लिए
  • Cross-browser consistency maintain करने के लिए

Summary

HTML <!DOCTYPE> Declaration:

  • HTML document की foundation है
  • Browser को सही rendering mode चुनने में help करती है
  • Modern web development में mandatory है

अगर <!DOCTYPE html> सही जगह और सही तरीके से लिखा जाए, तो HTML, CSS और JavaScript तीनों expected तरीके से work करते हैं।