Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between Transitional and Strict doctype
HTML documents use DOCTYPE declarations to identify the HTML version and instruct browsers on how to render content. The DOCTYPE must be the first line in every HTML document, placed before the <html> tag.
The two primary DOCTYPE declarations are Transitional and Strict, each serving different purposes in web development. Transitional allows deprecated elements for backward compatibility, while Strict enforces current standards and best practices.
DOCTYPE Declaration
A DOCTYPE (Document Type Declaration) tells the browser what type of document to expect. It is not an HTML tag but an instruction that specifies the HTML version and standards. The DOCTYPE is a void element that cannot contain any content.
Syntax
Following is the modern HTML5 DOCTYPE syntax
<!DOCTYPE html>
Example
Following example demonstrates the basic usage of DOCTYPE
<!DOCTYPE html> <html> <head> <title>DOCTYPE Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Welcome to TutorialsPoint!</h1> <p>This page uses HTML5 DOCTYPE.</p> </body> </html>
The output displays a properly formatted webpage with the heading and paragraph
Welcome to TutorialsPoint! This page uses HTML5 DOCTYPE.
Transitional DOCTYPE
The Transitional DOCTYPE is used when you have legacy HTML code that may not conform to strict standards. It provides more flexibility regarding backward compatibility with older HTML versions and allows deprecated elements and attributes that are not recommended in modern web development.
Syntax
Following is the syntax for HTML 4.01 Transitional DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Example
Following example shows the usage of deprecated elements with Transitional DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Transitional DOCTYPE Example</title>
</head>
<body bgcolor="#f0f0f0" style="font-family: Verdana, sans-serif;">
<center>
<h2><font color="#DE3163">TutorialsPoint</font></h2>
<p>The E-Way Learning!</p>
</center>
</body>
</html>
This example uses deprecated <center>, <font>, and bgcolor attributes, which are allowed under Transitional DOCTYPE
TutorialsPoint (centered, red color) The E-Way Learning! (centered)
Strict DOCTYPE
The Strict DOCTYPE enforces the chosen HTML version more rigorously. It ensures your markup adheres to the latest standardized practices and prohibits deprecated elements and attributes that would be permitted under Transitional DOCTYPE. This promotes cleaner, more maintainable code.
Syntax
Following is the syntax for HTML 4.01 Strict DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Example
Following example demonstrates proper markup using Strict DOCTYPE with CSS for styling
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Strict DOCTYPE Example</title>
<style type="text/css">
body {
background-color: #f0f0f0;
font-family: Verdana, sans-serif;
}
.header {
text-align: center;
color: #DE3163;
}
.content {
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h2>TutorialsPoint</h2>
</div>
<div class="content">
<p>The E-Way Learning!</p>
</div>
</body>
</html>
This achieves the same visual result but uses valid HTML with CSS for styling instead of deprecated presentational elements
TutorialsPoint (centered, red color) The E-Way Learning! (centered)
Key Differences Between Transitional and Strict DOCTYPE
Following table summarizes the main differences between Transitional and Strict DOCTYPE declarations
| Transitional DOCTYPE | Strict DOCTYPE |
|---|---|
| Allows deprecated HTML elements and attributes for backward compatibility. | Prohibits deprecated elements; only allows current standard elements and attributes. |
Permits presentational markup like <font>, <center>, and bgcolor. |
Forbids presentational markup; requires CSS for all styling purposes. |
| Suitable for legacy websites with older markup that cannot be easily updated. | Default choice for new websites following modern web standards. |
| Mixes structural HTML with presentational elements in the same document. | Enforces separation of structure (HTML) and presentation (CSS). |
| More difficult to maintain due to mixed concerns and deprecated practices. | Easier to maintain with clean, standards-compliant code structure. |
| Provides flexibility for gradual migration from older HTML versions. | Ensures compliance with current web standards and best practices. |
Modern HTML5 DOCTYPE
Today, most websites use the simple HTML5 DOCTYPE: <!DOCTYPE html>. This modern declaration eliminates the complexity of Transitional vs. Strict debates by providing a single, straightforward standard that browsers understand consistently.
Example
Following example shows modern HTML5 approach with proper semantic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern HTML5 Example</title>
<style>
header { text-align: center; color: #DE3163; }
main { text-align: center; font-family: Arial, sans-serif; }
</style>
</head>
<body>
<header>
<h1>TutorialsPoint</h1>
</header>
<main>
<p>Modern HTML5 with semantic elements!</p>
</main>
</body>
</html>
This uses semantic HTML5 elements like <header> and <main> with clean CSS styling
TutorialsPoint (centered, red color) Modern HTML5 with semantic elements! (centered)
Conclusion
Transitional DOCTYPE allows deprecated elements for backward compatibility, while Strict DOCTYPE enforces modern standards by separating structure from presentation. Today, HTML5's simple <!DOCTYPE html> is the preferred choice, combining the benefits of standards compliance with simplified syntax for modern web development.
415 Views
