View any webpage source, and I guarantee you that the first line undoubtedly starts with <!DOCTYPE …
<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> content... </body> </html>
But do you ever wonder what it means and why it is even needed?
A web page uses markup language as the primary scripting language to render pages in web browsers by giving formatting instructions of the data, such as different fonts for different words, different colors for different text types, etc.
The most common markup language for web pages is HTML, which stands for HyperText Markup Language, was the first internet-based markup language used for web pages.
All HTML documents must have a DOCTYPE declaration as the first line of code.
<!DOCTYPE html>
In case you are wondering, besides HTML, other doctypes also exist, for example:
MathML Doctype Declarations
<!DOCTYPE math>
Scalable Vector Graphics for the vector image format
<!DOCTYPE svg>
The <!DOCTYPE html> declaration informs a website visitor’s browser that the document being rendered is an HTML document. By declaring the doctype in the first line, the HTML document will be parsed the same way by different browsers, such as Chrome, Firefox, and Safari.
Using no DOCTYPE at all—throws these same browsers into “Quirks mode” or Compatibility mode. The web browser assumes you are leaving the browsers for backward compatibility by switching off most modern browser features and attempts to render the document based on a “best guess”.
If you are still feeling fuzzy, remember the doctype always beginning with an exclamation mark (!), which signifies it is pretty important!! Without it being the first line, you are leaving the web browsers to determine the document type and render correctly..or sometimes incorrectly.
<!DOCTYPE html>
Recommended reading:
https://www.w3.org/QA/2002/04/valid-dtd-list.html