TL;DR – The <!DOCTYPE html>
declaration must be placed in the beginning of every HTML document: it informs the browser about the document type.
Contents
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
HTML5 <!DOCTYPE html>
declaration is the simplest and shortest compared to those used by previous versions:
<!DOCTYPE html>
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.
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
HTML 4.01
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">
XHTML 1.1
This <!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).