📘 Lesson · Lesson 24
HTML vs HTML5
HTML vs HTML5
What HTML5 Actually Is
HTML5 is not a different language — it is the modern version of the same HTML, standardised in 2014 and still the current standard today. Think of it like a phone OS update: same phone, but new built-in features that used to need separate apps. Before HTML5, playing video needed the Flash app, fancy graphics needed plugins, and layout used meaningless divs. HTML5 built these abilities directly into the language.
The Simpler DOCTYPE — the most visible change
OLD (HTML4):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML5:
<!DOCTYPE html>Nobody could remember the old one — everybody copy-pasted it.
HTML5 shrank it to 15 characters you can type from memory.
This one line is the quickest way to tell HTML5 from older HTML at a glance — and the reason your very first chapter used the short form.
What HTML5 Added — the headline features
| Feature | Before HTML5 | With HTML5 |
|---|---|---|
| Video / Audio | Flash plugin needed | <video> <audio> tags |
| Semantic tags | <div id="header"> | <header> <nav> <footer> <article> |
| Input types | type="text" for all | email, date, number, range, color... |
| Graphics | Plugins / images | <canvas> and <svg> |
| Local storage | Cookies only (tiny) | localStorage (megabytes) |
| Validation | JavaScript needed | required, pattern built in |
| Location, drag-drop | Complex plugins | Geolocation and Drag/Drop APIs |
Notice how many of these you have ALREADY learned in this course — you have been learning HTML5 all along. Each gets its own chapter ahead (canvas, svg, storage, drag-drop).
What HTML5 Removed — the presentational tags
Gone / deprecated: <font> <center> <big> <marquee> <u>(as style) bgcolor=""HTML5 removed tags whose only job was appearance — because appearance is CSS's job now. The old <font color="red" size="5"> and <center> belong to a time when HTML did everything; the clean split today is HTML for structure, CSS for looks. Some still work for backward compatibility, but writing them marks code as dated.
Side-by-Side Difference (interview-ready)
| HTML (4.01) | HTML5 | |
|---|---|---|
| Year | 1999 | 2014 → present |
| DOCTYPE | Long, unmemorable | <!DOCTYPE html> |
| Audio/Video | Plugins (Flash) | Native tags |
| Structure tags | Only div/span | header, nav, article, section, footer |
| Storage | Cookies | localStorage, sessionStorage |
| Graphics | None native | canvas, svg |
| Mobile support | Poor | Built for responsive/mobile |
Exam Corner
Q: Is HTML5 a new language? No — it's the latest version of HTML, standardised 2014, current standard.
Q: Name 4 features new in HTML5. Semantic tags, native audio/video, new input types (email/date/etc.), canvas/svg (also localStorage, geolocation).
Q: Write the HTML5 doctype.
Q: Name tags removed/deprecated in HTML5. font, center, big, marquee — presentational tags replaced by CSS.
Q: Why were those tags removed? They controlled appearance, which is now CSS's responsibility (structure vs style separation).
Q: Name 4 features new in HTML5. Semantic tags, native audio/video, new input types (email/date/etc.), canvas/svg (also localStorage, geolocation).
Q: Write the HTML5 doctype.
<!DOCTYPE html>Q: Name tags removed/deprecated in HTML5. font, center, big, marquee — presentational tags replaced by CSS.
Q: Why were those tags removed? They controlled appearance, which is now CSS's responsibility (structure vs style separation).
HTML5 असल में क्या है
HTML5 कोई अलग language नहीं — यह उसी HTML का modern version है, 2014 में standardise हुआ और आज भी current standard. इसे phone के OS update जैसा समझिए: वही phone, पर नए built-in features जो पहले अलग apps से आते थे. HTML5 से पहले video चलाने को Flash app चाहिए था, fancy graphics को plugins, और layout बेमतलब divs से. HTML5 ने ये क्षमताएं सीधे language में बना दीं.
आसान DOCTYPE — सबसे दिखने वाला बदलाव
PURANA (HTML4):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML5:
<!DOCTYPE html>Purana kisi ko yaad nahi rehta tha — sab copy-paste karte the.
HTML5 ne ise 15 characters me simat diya jo memory se type ho jate hain.
यह एक line HTML5 को पुराने HTML से पहचानने का सबसे तेज़ तरीका है — और वजह कि आपके पहले ही chapter में short form इस्तेमाल हुआ.
HTML5 ने क्या जोड़ा — headline features
| Feature | HTML5 से पहले | HTML5 के साथ |
|---|---|---|
| Video / Audio | Flash plugin चाहिए था | <video> <audio> tags |
| Semantic tags | <div id="header"> | <header> <nav> <footer> <article> |
| Input types | सबके लिए type="text" | email, date, number, range, color... |
| Graphics | Plugins / images | <canvas> और <svg> |
| Local storage | सिर्फ cookies (छोटी) | localStorage (megabytes) |
| Validation | JavaScript चाहिए था | required, pattern built-in |
| Location, drag-drop | जटिल plugins | Geolocation और Drag/Drop APIs |
ध्यान दीजिए इनमें से कितने आप इस course में PEHLE HI सीख चुके हैं — आप शुरू से HTML5 ही सीख रहे थे. हर एक का अपना chapter आगे है (canvas, svg, storage, drag-drop).
HTML5 ने क्या हटाया — presentational tags
Gaye / deprecated: <font> <center> <big> <marquee> <u>(style ke roop me) bgcolor=""HTML5 ने वे tags हटाए जिनका एकमात्र काम दिखावट था — क्योंकि दिखावट अब CSS का काम है. पुराना <font color="red" size="5"> और <center> उस दौर के हैं जब HTML सब कुछ करता था; आज का साफ बंटवारा है HTML structure के लिए, CSS looks के लिए. कुछ backward compatibility के लिए अब भी चलते हैं, पर इन्हें लिखना code को पुराना दिखाता है.
आमने-सामने अंतर (interview-ready)
| HTML (4.01) | HTML5 | |
|---|---|---|
| साल | 1999 | 2014 → अब तक |
| DOCTYPE | लंबा, याद न रहने वाला | <!DOCTYPE html> |
| Audio/Video | Plugins (Flash) | Native tags |
| Structure tags | सिर्फ div/span | header, nav, article, section, footer |
| Storage | Cookies | localStorage, sessionStorage |
| Graphics | कोई native नहीं | canvas, svg |
| Mobile support | कमज़ोर | Responsive/mobile के लिए बना |
Exam Corner
Q: क्या HTML5 नई language है? नहीं — HTML का latest version, 2014 में standardise, current standard.
Q: HTML5 के 4 नए features बताइए. Semantic tags, native audio/video, नए input types (email/date आदि), canvas/svg (और localStorage, geolocation).
Q: HTML5 doctype लिखिए.
Q: HTML5 में हटाए/deprecated tags बताइए. font, center, big, marquee — presentational tags, CSS ने replace किए.
Q: वे tags क्यों हटाए गए? वे दिखावट control करते थे, जो अब CSS की ज़िम्मेदारी है (structure vs style का बंटवारा).
Q: HTML5 के 4 नए features बताइए. Semantic tags, native audio/video, नए input types (email/date आदि), canvas/svg (और localStorage, geolocation).
Q: HTML5 doctype लिखिए.
<!DOCTYPE html>Q: HTML5 में हटाए/deprecated tags बताइए. font, center, big, marquee — presentational tags, CSS ने replace किए.
Q: वे tags क्यों हटाए गए? वे दिखावट control करते थे, जो अब CSS की ज़िम्मेदारी है (structure vs style का बंटवारा).
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.