HTML Lessons

HTML vs XHTML

अगर आप HTML सीख रहे हैं, तो आपने शायद कभी यह नाम सुना होगा — XHTML (Extensible HyperText Markup Language) तो सवाल उठता है — HTML और XHTML में फर्क क्या है? दोनों दिखने में एक जैसे लगते हैं, लेकिन इनकी rules, syntax और browser behavior में बहुत फर्क है। आज इस लेसन में हम दोनों को step-by-step समझेंगे

HTML क्या है?

HTML (HyperText Markup Language) वेब पेज बनाने की मूल भाषा है। यह web content को structure और meaning देती है — जैसे heading, paragraph, image, table आदि। HTML बहुत flexible है — यानी अगर आप कुछ छोटी गलती करते हैं (जैसे tag बंद करना भूल जाएं), तो भी browser उसे चलाता है। Example:
<html>
  <head>
    <title>HTML Example</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>This is a paragraph
  </body>
</html>

यहां <p> tag बंद नहीं है, लेकिन HTML फिर भी काम कर जाएगा।

XHTML क्या है?

HTML (Extensible HyperText Markup Language) असल में HTML का एक stricter version है। यह XML (Extensible Markup Language) के नियमों को follow करता है। यानि XHTML में आपको हर tag सही तरह से बंद करना, छोटे अक्षरों में लिखना, और valid structure रखना जरूरी होता है। Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>XHTML Example</title>
  </head>
  <body>
    <h1>Hello XHTML</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
यहां हर tag properly closed है और lowercase में लिखा गया है।

HTML vs XHTML – मुख्य अंतर

Feature HTML XHTML
Full Form HyperText Markup Language Extensible HyperText Markup Language
Base Language SGML पर आधारित XML पर आधारित
Tag Case Uppercase या lowercase दोनों चलेगा हमेशा lowercase
Tag Closing कुछ tags बिना बंद किए भी चलते हैं हर tag को बंद करना जरूरी है
Error Handling Browser खुद ठीक कर लेता है Error होने पर page नहीं चलेगा
Quotes in Attributes Optional Mandatory
Empty Tags <br>या<img>चल जाएगा <br />या<img />जरूरी
Parsing Flexible Strict
Doctype <!DOCTYPE html>(HTML5) XHTML strict DTD define करना पड़ता है

Example Comparison

HTML Version:
<img src="photo.jpg">
<input type="text" name=user>

XHTML Version:

<img src="photo.jpg" alt="photo" />
<input type="text" name="user" />
XHTML में: हर attribute value quotes में होनी चाहिए हर tag self-closing (/) के साथ खत्म होना चाहिए

XHTML Rules (कड़े नियम)

  • सभी tags lowercase में होने चाहिए- ❌ <P> → ✅ <p>
  • सभी attributes quotes में होने चाहिए - ❌ <input type=text> → ✅ <input type="text" />
  • हर tag को properly बंद करना जरूरी है - ❌ <br> → ✅ <br />
  • Elements को सही nesting में होना चाहिए - ❌ <b><i>text</b></i> → ✅ <b><i>text</i></b>
  • Root element हमेशा <html> होना चाहिए जिसमें namespace define हो:
<html xmlns="http://www.w3.org/1999/xhtml">

Why XHTML Came?

HTML 4 के समय बहुत messy और inconsistent कोड लिखा जाता था। इसलिए W3C ने सोचा कि HTML को XML जैसे strict rules दिए जाएं — ताकि हर document machine readable और error-free हो। इससे XHTML आया (HTML 4.01 का XML version)।

Modern Web में क्या इस्तेमाल करें?

आज के समय में हम HTML5 का इस्तेमाल करते हैं। HTML5 ने XHTML की बहुत-सी अच्छी बातों को शामिल किया, लेकिन XML जितना strict नहीं है।

  • अगर आप modern websites या apps बना रहे हैं → HTML5 ही इस्तेमाल करें।
  • अगर आपको XML-based system (जैसे RSS feed या EPUB format) बनाना है → XHTML सही रहेगा।

HTML5 बनाम XHTML5

Feature HTML5 XHTML5
Doctype <!DOCTYPE html> <!DOCTYPE html>
Syntax Flexible Strict XML syntax
Mime Type text/html application/xhtml+xml
Error Handling Tolerant Strict
Browser Support Universal Limited (कुछ पुराने browsers problem करते हैं)

Example – Same Page in Both Formats

HTML5:

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is HTML5.</p>
</body>
</html>

XHTML5:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>XHTML5 Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is XHTML5.</p>
</body>
</html>

Quick Summary

पॉइंट (Point) HTML XHTML
लचीला (Flexible)
सख्त सिंटैक्स (Strict Syntax)
छोटे अक्षर में टैग (Lowercase Tags) वैकल्पिक (Optional) अनिवार्य (Mandatory)
टैग बंद करना (Closing Tags) वैकल्पिक (Optional) आवश्यक (Required)
आज उपयोग (Used Today) (HTML5) ⚙️(सीमित उपयोग/Limited Use)

In Short:

HTML आसान और forgiving है, जबकि XHTML ज्यादा strict और disciplined भाषा है। अगर आप modern web developer हैं — तो HTML5 आपका best choice है!