<!DOCTYPE>
The <!DOCTYPE> declaration is an essential component of any HTML document. It informs the browser of the HTML version being used, ensuring a consistent and standardized rendering.
With the advent of HTML5, this declaration became simpler and universal, reducing the likelihood of errors! 😉
Structure of the <!DOCTYPE> Declaration
Contrary to popular belief, <!DOCTYPE> is not an HTML tag but a special instruction placed on the first line of an HTML document.
It tells the browser the HTML version used and enables the browser's rules to display elements on the page correctly.
Failing to include this declaration often leads to... strange behaviors! Page elements might not be recognized as compliant with, for example, the HTML5 standard.
Syntax
With HTML5 (modern)
With the introduction of HTML5, the syntax for the <!DOCTYPE> declaration became much simpler than in the past! All you need to do is specify the instruction with the html attribute, as shown in this example:
<!DOCTYPE html>
With older versions of HTML
In earlier versions like HTML 4.01, the syntax referenced a DTD (Document Type Definition).
For example, this would be written for a page using HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">These declarations were complex and prone to errors, which is why they were simplified in HTML5. Phew! 😮💨
Attributes
The <!DOCTYPE> declaration has no attributes because it is not an HTML tag. Its role is purely declarative.
Compatibility
For HTML5 (modern)
All current browsers recognize and use the <!DOCTYPE html> declaration to interpret an HTML5 document.
For older HTML versions
Pages using an older HTML version must include a DTD declaration for HTML 4.01 and XHTML. All browsers recognize this instruction as well.
In general
The <!DOCTYPE> instruction is compatible with all browsers.
| Element | Google Chrome | Safari | Mozilla Firefox | Edge |
| <!DOCTYPE> | Yes | Yes | Yes | Yes |