Understanding HTML Doctype

Understanding HTML Doctype

4 mins read50 Views Comment
clickHere
Esha
Esha Gupta
Associate Senior Executive
Updated on Feb 29, 2024 12:25 IST

Have you ever wondered about the importance of the HTML doctype declaration? The HTML doctype declaration is a crucial element at the beginning of an HTML document that defines its type and version. It ensures proper rendering and compatibility across different web browsers. Let's understand more!

2023_09_What-is-9.jpg

HTML Doctype is basically an instruction given to the web browser about what version of the markup language the page is written in. It is a declaration that informs the web browser about the version of HTML in which a webpage is written. It should be the first thing in an HTML document before the tag. The DOCTYPE is not an HTML tag.

Doctype Declaration

The HTML declaration, also known as the DOCTYPE declaration, is a statement that tells the web browser what version of HTML the document is written in. It is placed at the beginning of an HTML document before the <HTML> tag.

HTML Doctype Declarations Overview

Version Name

Doctype Declaration

Description

HTML5

<!DOCTYPE html>

HTML5 declaration, widely used in modern web development.

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 Strict declaration, encourages cleaner coding practices by disallowing deprecated elements and attributes.

XHTML 1.0 Transitional

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

XHTML 1.0 Transitional declaration, permits deprecated elements and attributes for backward compatibility with older HTML versions.

XHTML 1.0 Frameset

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

XHTML 1.0 Frameset declaration, used for documents employing frames to divide the browser window into multiple sections.

HTML 4.01 Strict

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

HTML 4.01 Strict declaration, adheres strictly to HTML 4.01 specifications, discourages deprecated elements and attributes.

HTML 4.01 Transitional

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

HTML 4.01 Transitional declaration, permits deprecated elements and attributes for backward compatibility during the transition period.

HTML 4.01 Frameset

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

HTML 4.01 Frameset declaration, used for documents employing frames to divide the browser window into multiple sections.

XHTML 1.1

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

XHTML 1.1 declaration, a refinement of XHTML 1.0, incorporating elements and attributes from modularization of XHTML.

XHTML Basic 1.1

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

XHTML Basic 1.1 declaration, used for creating web pages for mobile and other devices with limited capabilities, offering basic functionality.

Let's see it in detail below!

In HTML5, the declaration is very simple and looks like this:

<!DOCTYPE html>

This declaration is case-insensitive, meaning it can be written as <!doctype html> and would still be valid.

It is widely used in modern web development for creating responsive and interactive websites.

Let’s See Some Other Declarations Used for Different Versions of HTML and XHTML:

1. XHTML 1.0 Strict


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

This DOCTYPE is used for XHTML documents that adhere strictly to the XHTML 1.0 standard, not allowing deprecated elements and attributes in older versions of HTML. It encourages cleaner, more modern coding practices.

Explore: Difference Between HTML & XHTML

2. XHTML 1.0 Transitional


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

This DOCTYPE allows for the use of XHTML syntax, but it also permits the use of deprecated elements and attributes for backward compatibility with older versions of HTML. It is a transitional step between older HTML standards and stricter XHTML standards.

3. XHTML 1.0 Frameset


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Copy code

This DOCTYPE is used for documents that employ frames to divide the browser window into multiple sections, each capable of showing a different HTML document. It allows the use of frame-specific tags and attributes.

4. HTML 4.01 Strict


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

This declaration signifies a document strictly following HTML 4.01 specifications, disallowing deprecated elements and attributes. It encourages the use of CSS for layout and presentation.

5. HTML 4.01 Transitional


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

This DOCTYPE allows using HTML 4.01 syntax with some deprecated elements and attributes for backward compatibility. It was commonly used during the transition period between older HTML standards and the more modern HTML 4.01.

6. HTML 4.01 Frameset


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

This DOCTYPE is used for HTML 4.01 documents that use frames to split the browser window into sections, each displaying a separate HTML document. It permits the use of frame-specific elements and attributes.

7. XHTML 1.1


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

This DOCTYPE is for documents adhering to the XHTML 1.1 standard, a refinement of the XHTML 1.0 standard, incorporating elements and attributes from the modularization of XHTML.

8. XHTML Basic 1.1


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

This DOCTYPE is used for creating web pages aimed at mobile devices and other devices with limited capabilities. It contains a subset of XHTML 1.1 elements and attributes, offering only basic functionality for simpler, smaller document sizes.

 

One Basic Example Code of XHTML 1.0 Strict


 
<!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">
<head>
<title>XHTML 1.0 Strict Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<h1>Welcome to my XHTML Page</h1>
</div>
<div>
<p>This is a paragraph in an XHTML 1.0 Strict document, & you are viewing content by Shiksha Online</p>
</div>
<div>
<p>I hope you understood the example well!</p>
</div>
</body>
</html>
Copy code

Output

2023_09_Screenshot-2023-09-11-143556.jpg

Similarly, we use other declarations for different versions of HTML and XHTML.

Concept of HTML Colors
Concept of HTML Colors
HTML Colors play a pivotal role in creating the visual identity of a webpage, influencing its aesthetics, readability, user experience, and even its brand messaging. HTML colors are a way...read more

Mastering Button Tag in HTML
Mastering Button Tag in HTML
Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML tag, which allows developers to add clickable elements for various actions like...read more

Learning body Tag in HTML
Learning body Tag in HTML
Do you know that the tag in HTML is where all the magic of a webpage happens? It's the container that holds everything you see on a web page, including...read more

Understanding SVG Tag in HTML
Understanding SVG Tag in HTML
Do you know the secret to crisp and scalable web graphics? It lies in the SVG tag in HTML! This powerful tool allows for the creation of vector-based graphics, ensuring...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Knowing nav Tag in HTML
Knowing nav Tag in HTML
Have you ever wondered how websites organize their menus and links for easy navigation? The HTML tag is the key for this which is specifically designed to define navigation...read more

HTML Iframe (With Examples)
HTML Iframe (With Examples)
An HTML iframe is an HTML tag that allows you to embed another HTML document within a current HTML document. Importance of Using HTML iframes. Let’s see some main attributes...read more

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

Thus, it’s highly recommended to use the HTML5 doctype (!DOCTYPE html) in modern web development due to its simplicity and universal support across all modern browsers.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio