Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Getting Popular

    HTML <!DOCTYPE> Declaration

    Jimi Wikman

    The HTML DOCTYPE declaration is not an HTML tag in the normal definition. The DOCTYPE tag defines what type of content the document is, which help the browsers understand what type of content to expect.

    A document type declaration, or DOCTYPE, is an instruction that associates a particular XML or SGML document (for example, a webpage) with a document type definition (DTD) (for example, the formal definition of a particular version of HTML 2.0 - 4.0). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

    The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers.

     <!DOCTYPE html>
    <title>Title of the document</title>
    The content of the document......


    In HTML5, we declare the HTML DOCTYPE in the shortest possible way. The <!DOCTYPE> declaration is NOT case sensitive.

     <!DOCTYPE html>




    More information

    The general syntax for a document type declaration is:

    <!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ 
    <!-- internal subset declarations -->


    <!DOCTYPE root-element SYSTEM "URI" [ 
    <!-- internal subset declarations -->

    In XML, the root element that represents the document is the first element in the document. For example, in XHTML, the root element is <html>, being the first element opened (after the doctype declaration) and last closed. The keywords SYSTEM and PUBLIC suggest what kind of Document Type Definition (DTD) it is (one that is on a private system or one that is open to the public). If the PUBLIC keyword is chosen then this keyword is followed by a restricted form of "public identifier" called Formal Public Identifier (FPI) enclosed in double quote marks. After that, necessarily, a "system identifier" enclosed in double quote marks, too, is provided. For example, the FPI for XHTML 1.1 is "-//W3C//DTD XHTML 1.1//EN" and, there are 3 possible system identifiers available for XHTML 1.1 depending on the needs, one of them is the URI reference "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd".

    If, instead, the SYSTEM keyword is chosen, only a system identifier must be given. It means that the XML parser must locate the DTD in a system specific fashion, in this case, by means of a URI reference of the DTD enclosed in double quote marks. The last part, surrounded by literal square brackets ([]), is called an internal subset which can be used to add/edit entities or add/edit PUBLIC keyword behaviors.[3] The internal subset is always optional (and sometimes even forbidden within simple SGML profiles, notably those for basic HTML parsers that don't implement a full SGML parser).

    On the other hand, document type declarations are slightly different in SGML-based documents such as HTML, where the public identifier may be associated with the system identifier. This association might be performed, e. g., by means of a catalog file resolving the FPI to a system identifier.


    The first line of a World Wide Web page may read as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ar" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

    This document type declaration for XHTML includes by reference a DTD, whose public and whose system identifier is http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd.Common DT


    Some common DTDs have been put into lists. W3C has produced a list of DTDs commonly used in the web, which contains the "bare" HTML5 DTD, older XHTML/HTML DTDs, DTDs of common embedded XML-based formats like MathML and SVG as well as "compound" documents that combine those formats.[5] Both W3C HTML5 and its corresponding WHATWG version recommend browsers to only accept XHTML DTDs of certain FPIs and to prefer using internal logic over fetching external DTD files. It further specifies an "internal DTD" for XHTML which is merely a list of HTML entity names.[6]: §13.2 

    HTML 4.01 DTDs

    Strict DTD does not allow presentational markup with the argument that Cascading Style Sheets should be used for that instead. This is how the Strict DTD looks:

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

    Transitional DTD allows some older PUBLIC and attributes that have been deprecated:

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

    If frames are used, the Frameset DTD must be used instead, like this:

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

    XHTML 1.0 DTDs

    XHTML's DTDs are also Strict, Transitional and Frameset.

    XHTML Strict DTD. No deprecated tags are supported and the code must be written correctly according to XML Specification.

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    XHTML Transitional DTD is like the XHTML Strict DTD, but deprecated tags are allowed.

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    XHTML Frameset DTD is the only XHTML DTD that supports Frameset. The DTD is below.

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    XHTML 1.1 DTD

    XHTML 1.1 is the most current finalized revision of XHTML, introducing support for XHTML Modularization. XHTML 1.1 has the stringency of XHTML 1.0 Strict.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    XHTML Basic DTDs

    XHTML Basic 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

    XHTML Basic 1.1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">


    HTML5 uses a DOCTYPE declaration which is very short, due to its lack of references to a DTD in the form of a URL or FPI. All it contains is the tag name of the root element of the document, HTML.[7] In the words of the specification draft itself:

    In other words, <!DOCTYPE html>, case-insensitively.

    With the exception of the lack of a URI or the FPI string (the FPI string is treated case sensitively by validators), this format (a case-insensitive match of the string !DOCTYPE HTML) is the same as found in the syntax of the SGML based HTML 4.01 DOCTYPE. Both in HTML4 and in HTML5, the formal syntax is defined in upper case letters, even if both lower case and mixes of lower case upper case are also treated as valid.

    In XHTML5 the DOCTYPE must be a case-sensitive match of the string "<!DOCTYPE html>". This is because in XHTML syntax all HTML element names are required to be in lower case, including the root element referenced inside the HTML5 DOCTYPE.

    The DOCTYPE is optional in XHTML5 and may simply be omitted.[8] However, if the markup is to be processed as both XML and HTML, a DOCTYPE should be used.

      Code Example

      This example is using CodePen.io and it is editable. Feel free to play around with it as none of your changes will be saved and it is only visible to you. In order to interact with the code example you might need to click on the "Run Pen" button. If you want to explore this on Codepen directly, then click here.

    Discuss the Guide

    Recommended Comments

    There are no comments to display.

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

  • Create New...