Why <!DOCTYPE html>?
⇩
⇩
➊ History
✧ In the old days of the web, pages were written in two versions: One for Netscape Navigator, and one for Microsoft IE.
✧ When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web.
✧ In the old days of the web, pages were written in two versions: One for Netscape Navigator, and one for Microsoft IE.
✧ When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web.
✧ Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.
✧ Modes were: Quirks Mode and Standards Mode.
✧ For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide which mode to handle.
✧ Modes were: Quirks Mode and Standards Mode.
✧ For HTML documents, browsers use a DOCTYPE in the beginning of the document to decide which mode to handle.
➋ Doctype
✧ In HTML, the doctype is "required" to ensure that the browser makes a best-effort attempt at following the relevant specifications.
✧ Doctype is "not" an HTML element, rather a special instruction to the browser.
✧ In HTML, the doctype is "required" to ensure that the browser makes a best-effort attempt at following the relevant specifications.
✧ Doctype is "not" an HTML element, rather a special instruction to the browser.
✧ If specified, it has to be at "the beginning" of the HTML document just after the Byte-Order-Mark (BOM) if any.
✧ The DOCTYPE for HTML5 is case-insensitive and can be written as
< !DOCTYPE html >
✧ The DOCTYPE for HTML5 is case-insensitive and can be written as
< !DOCTYPE html >
➌ Formats of Doctypes
There are 3 types
⮑ Normal
⮑ Deprecated
⮑ Legacy Tool Compatible
There are 3 types
⮑ Normal
⮑ Deprecated
⮑ Legacy Tool Compatible
➍ Examples
⮑ Normal (HTML5)
<!DOCTYPE html>
⮑ Deprecated (HTML 4/4.01, XHTML 1.0/1.1)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
⮑ Legacy Tool Compatible
<!DOCTYPE html system "about:legacy-compat">
⮑ Normal (HTML5)
<!DOCTYPE html>
⮑ Deprecated (HTML 4/4.01, XHTML 1.0/1.1)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
⮑ Legacy Tool Compatible
<!DOCTYPE html system "about:legacy-compat">
➎ If Doctype is not specified?
❑ Browser will switch into "Quirks Mode" when rendering a document.
❒ Quirks Mode "may be" incompatible with some standard specifications.
❑ The document may "render differently" in different browsers.
❑ Browser will switch into "Quirks Mode" when rendering a document.
❒ Quirks Mode "may be" incompatible with some standard specifications.
❑ The document may "render differently" in different browsers.
➏ Let's summarise
✧ "<!DOCTYPE html>" is the required preamble found at the top of all HTML documents.
✧ Its sole purpose is to prevent a browser from switching into “Quirks Mode” when rendering a document.
✧ "<!DOCTYPE html>" is the required preamble found at the top of all HTML documents.
✧ Its sole purpose is to prevent a browser from switching into “Quirks Mode” when rendering a document.
⚠️ Repost Notice ⚠️
⬘ Though this is my original work, portions of it was previously posted in [CHIRPBIRDICON]
⬙ If you liked this content and do feel others might learn from it, please support.
⬘ Though this is my original work, portions of it was previously posted in [CHIRPBIRDICON]
⬙ If you liked this content and do feel others might learn from it, please support.
💭 Feedbacks
✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?
Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.
✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?
Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.
End of 🧵
Hey 👋 I am a Tech Educator from India 🇮🇳
I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.
Are you interested? I am sure, you are.
To never miss anything, Follow Me ✅
Hey 👋 I am a Tech Educator from India 🇮🇳
I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.
Are you interested? I am sure, you are.
To never miss anything, Follow Me ✅
• • •
Missing some Tweet in this thread? You can try to
force a refresh
