HTML Doctype

From Seobility Wiki
Revision as of 15:16, 22 September 2020 by Techteam (talk | contribs)

Jump to: navigation, search

Doctype is the first element in the source code of a web page and should be part of every HTML document. Unfortunately, the element is often forgotten and many webmasters don't know what function it has at all. Furthermore, the importance of this element is often underestimated. In the following, we will, therefore, explain what function the doctype element has and why it is so important for the correct display of your website.

Definition

HTML Doctype
Figure: HTML Doctype - Author: Seobility - License: CC BY-SA 4.0

Doctype is not a classic HTML element. Rather, the doctype element specifies which version of the markup language is used. It also contains instructions about the elements and properties available in HTML code. Doctype helps web browsers to process source code and display websites correctly. Current standards stipulate that the element must be present in the source code of every web document. If the doctype element is missing, it is, therefore, an error, even if the document can still be displayed correctly under certain circumstances. Tools for checking source code also display an error if the doctype element is missing in an HTML document.

HTML Doctype Checker

Check the doctype declaration in the HTML Code of your web page

Where is doctype used?

Doctype must always be the first element of a web page. This means that it is placed in HTML code before the actual mark-up code and thus before the HTML tag. In addition, make sure that the element is present in the source code of each individual subpage. The sole use on the homepage, for example, is not sufficient.

Doctype is further used in XML documents and SVG graphics.

What different doctypes are there?

Especially in earlier versions of HTML as well as for XHTML 1.01 and 1.1 doctypes were very long and complicated. They often had to be copied and pasted into the source code of a document even by experienced webmasters. In all classic versions of the mark-up language before HTML5, the following doctypes had to be used:

HTML 4.01 Strict: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Strict refers to a code that is very precise and strict - comparable to XHTML. Here all elements must always be closed.

HTML 4.01 Transitional: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3.org/TR/html4/loose.dtd">

Transitional, on the other hand, refers to a slightly more tolerant source code. This variant is more comparable with today's HTML 5 and not as strict with the mark-up as it is with Strict.

Since HTML 4 and previous versions are based on SGML, the correct DTD (Document Type Definition) must be specified in the doctype element for these versions. They describe the rules and elements as well as various other properties used in the code of a document and enable the correct display of the page in web browsers. SGML stands for Standard Generalized Markup Language and describes an obsolete predecessor of HTML. Since the introduction of HTML5, source code has no longer been classified as SGML, partly due to compatibility issues.

For XHTML 1.0 and 1.1, the doctype elements look like this:

XHTML 1.0 Strict: 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Loose//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">

XHTML 1.1 Strict: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

As with HTML 4, the DTD must also be specified here, since XHTML 1 and 1.1 are also based on SGML. Browsers are therefore dependent on the appropriate instructions and information to enable a correct display of a website. Strict and Transitional have the same meaning here as in HTML 4.0 and HTML 4.1 and denote the rules that apply to the markup in the source code of the document.

A big change regarding the doctype element has finally occurred with the introduction of HTML 5. Unlike its predecessors, it is no longer based on SGML. In addition, the use of the doctype element has been made less complicated. In HTML 5, the use of the doctype element is therefore intended as follows: 

<!DOCTYPE html>

No further rules or links are required here. The element can easily be used as specified above. This gives browsers all the information they need to display a website correctly. With HTML 5 you, therefore, have one big worry less when programming HTML pages.

Which problems can arise if the doctype element is missing?

If the element is not used in the source code of a web document, the correct display of this page is a matter of luck. In most cases, it will still be displayed correctly. This is especially true if only general code is written in HTML 5. Especially if a web page is written in other versions of the mark-up language or uses certain functions that have to be defined by the element in advance, display errors or unexpected problems can occur.

Conclusion and summary

The doctype element is a necessary and important part of the source code of any website. It is placed right at the beginning, even before the actual code starts, and should not be forgotten under any circumstances. For HTML 5, the doctype element has been simplified significantly. For all other versions of the mark-up language, however, it still has to be used in the correct form. The doctype element contains important information for web browsers which helps to display a web page correctly. According to current standards, the absence of the doctype element is an error and is also characterized as such by appropriate tools for checking the source code of a document.

Related links