Web Development Course:
TL;DR – The
<!DOCTYPE html> declaration must be placed in the beginning of every HTML document: it informs the browser about the document type.
The Meaning of <!DOCTYPE html>
The very first line in every web document should contain a
<!DOCTYPE html> declaration. Even though it's wrapped in angle brackets, it is not a tag but a statement.
Doctype stands for Document Type Declaration. It informs the web browser about the type and version of HTML used in building the web document. This helps the browser to handle and load it properly.
While the HTML syntax for this statement is somewhat simple, you must note each version of HTML has its own rules.
The HTML5 doctype Declaration
<!DOCTYPE html> declaration is the simplest and shortest compared to those used by previous versions:
doctype in Older Versions of HTML
Versions prior to HTML5 were based on Standard Generalized Markup Language (SGML), so their !doctype declaration had to contain a reference to their corresponding document type declaration (DTD). This also meant saving the DTD declaration and having separate ones for strict and transitional modes.
Note: HTML5 is based on its own standard and not SGML - that's why the HTML5 doctype does not require a DTD.
Creating a website today, you will surely use the simple doctype of HTML5. However, you might encounter other, more complicated versions in older documents. You will find a few examples of those below.
In HTML4, the doctype declaration was relatively longer and more descriptive than in HTML5. It contained all HTML elements and attributes, but did not allow using framesets. In the example below, you can see the doctype declaration for the transitional version of HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This next example presents the doctype in the strict mode of HTML 4.01. The main difference between strict and transitional modes is that this one does not contain presentational and deprecated elements:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 Strict
This HTML doctype declaration also contains all elements and attributes, but no presentational and deprecated elements. However, it must be written in strict XML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html> is very similar to XHTML 1.0 Strict, but lets you add modules (e.g., provide ruby text support for Asian languages):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML <!DOCTYPE html>: Useful Tips
- If you skip the HTML5 doctype declaration, the system will add it automatically when you run the website. This did not work with older versions of HTML.
- The DTD for every HTML version can be found in its official specification (e.g., here you can see the DTD for HTML 4.01).
What Is XHTML: Learn the Difference Between HTML and XHTML
XHTML vs HTML: discover what is XHTML & find out the main difference between HTML and XHTML in this complete guide on what is XHTML with examples.