Difference between Transitional and Strict doctype

Last Updated : 12 Feb, 2022

In this article, we are going to see the difference between Transitional and Strict doctype. Transitional and Strict both are the kinds of doctypes available in HTML 4. Now, what doctype is? A doctype declaration or document type declaration is information to the browser about what document type should it expect. It is not an HTML tag. All the HTML documents that you code should start with a <!DOCTYPE> declaration. The doctype declaration is written just above the <html> tag, at the very start of each document you write.

Significance of Doctype declaration:

Doctype enforces the browser to make the best effort to follow the exact specifications being made in the HTML document while rendering.
It prevents the browser from switching to quirks mode ( The non-standard behavior of the layout in Navigator 4 and Internet Explorer 5)

HTML5 doctype: This is the most latest version of the document type currently used. It has no disadvantages and is easier to implement and recall. It will correctly validate all HTML 5 features, as well as most of HTML 4/XHTML 1.0 features. The older version, HTML 4.01, was completely based on a Standard Generalized Markup Language(SGML). Hence the DOCTYPE declaration in HTML4 was used to create a reference to a document type definition (DTD). The document type definition (DTD) is responsible for specifying the rules for the SGML so that the browser processes the content correctly. But in the newer HTML version i.e. HTML 5 there is no need for a reference to a document type definition (DTD) as HTML 5 is not based on SGML.

Syntax:

<!DOCTYPE html>

Note: The Doctype is not an HTML tag or element and it is not case-sensitive.

Example: Below is a sample HTML program with doctype declaration:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h2 { 
            color: green; 
        } 
    </style> 
    <title>doctype</title> 
</head> 
  
<body> 
    <h2>Welcome To GFG</h2> 
    <h4>This is doctype of HTML5.</h4> 
</body> 
  
</html>

Output :

This was about doctype and its syntax. Now let’s talk about Transitional and Strict doctype and their difference.

Transitional doctype:

The transitional doctype validates the written code against the HTML 4.01 spec. It does allow some presentational markup and deprecated elements (such as <font> elements) but not framesets. It validates loose HTML style markup.

Syntax:

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

Example: In this example, the entire code will be the same as before we will just use transitional doctype syntax.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
  
<head> 
    <style> 
        h2 { 
            color: green 
        } 
    </style> 
    <title>doctype</title> 
</head> 
  
<body> 
    <h2>Welcome To GFG</h2> 
    <h4> 
        <center>This is Transitional doctype.</center> 
    </h4> 
</body> 
  
</html>

Output:

Strict doctype:

The strict doctype validates the written code against the HTML 4.01 spec. However, it doesn’t allow any deprecated elements or presentational markups such as <font> elements, or framesets to be used. It validates loose HTML style markup, for example, minimized attributes and non-quoted attributes (eg required, rather than required=” required”).

Syntax:

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

Example: In this example, the entire code is the same as before we just change the doctype declaration code.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd"> 
  
<html> 
  
<head> 
    <style> 
        h2 { 
            color: green 
        } 
    </style> 
    <title>doctype</title> 
</head> 
  
<body> 
    <h2>Welcome To GFG</h2> 
    <h4> 
        <center>This is Strict doctype.</center> 
    </h4> 
</body> 
  
</html>

Output:

Difference between Transitional and Strict doctype:

Transitional doctype	Strict doctype
Transitional document type definition (DTD) allows some older PUBLIC and attributes that have been deprecated.	Strict document type definition (DTD) all those elements and attributes are included that do not appear in frameset documents or that have not been deprecated.
It allows presentational markup like <font>	It does not allow presentation markup like <center>.
Transitional doctype can be used when we have a lot of older markup that cannot be compiled with default doctype.	Strict doctype is the default doctype.
There is both presentational and structural aspect in markup.	It separates the presentation and structure. By not allowing presentation markup in it. All the presentation aspect is done in CSS.
By using Transitional doctype, It is not that easy to maintain the website as it mixes the presentation and structure.	By using strict doctype, It is easier to maintain the website.