HTML DOCTYPE Declaration

Last Updated : 27 Nov, 2024

HTML DOCTYPE (Document Type Declaration) is an instruction that appears at the beginning of an HTML document, before the <html> tag.

Its primary role is to tell the web browser which version of HTML the page is written in, ensuring that the browser renders the content correctly. It is not an HTML tag, but rather a special instruction that specifies how the browser should interpret the HTML.

Syntax:

< !DOCTYPE html >

Note: The <!DOCTYPE> declaration is NOT case-sensitive.

Example of Using DOCTYPE in HTML

In this example, we will see, an HTML program with a doctype declaration:

HTML

<!DOCTYPE html> <html> <body> <p>HTML DOCTYPE Declaration</p> </body> </html>

What Happens Without <!DOCTYPE html>

Without <!DOCTYPE html>, your HTML code can still run, but it may face several significant drawbacks:

Quirks Mode Activation: Browsers may switch to quirks mode, leading to outdated behaviors that cause inconsistent rendering compared to standards mode.
Rendering Issues: CSS properties like box-sizing, margins, and widths may be interpreted differently, causing layout problems and misaligned elements that are difficult to debug.
Cross-Browser Inconsistencies: Different browsers might render the page differently in quirks mode, making it hard to achieve cross-browser consistency.
CSS and JavaScript Problems: Modern features like Flexbox, Grid, and certain JavaScript methods may not work correctly, causing compatibility issues.
Unpredictable Behavior: Without <!DOCTYPE>, rendering becomes unpredictable, making debugging more challenging and leading to unpredictable page behavior when adding new features.

Doctype Declaration for Different Version of HTML and XHTML

HTML Version	DOCTYPE Declaration
HTML 5	`<!DOCTYPE html>`
HTML 4.01 Strict	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`
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 Frameset	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`
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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
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.1	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`

Best Practices When Using DOCTYPE

Always Declare DOCTYPE: Always start an HTML document with a DOCTYPE declaration to ensure that the browser knows how to correctly render the page.
Use HTML5 DOCTYPE for New Websites: For all new projects, use the HTML5 DOCTYPE as it is the most current and widely supported standard.
Validate Your HTML: Use the W3C validation service to check if your HTML document adheres to the standards specified by the DOCTYPE.

HTML abbr Tag

Shubrodeep Banerjee

Improve

Article Tags :

HTML DOCTYPE Declaration

Example of Using DOCTYPE in HTML

What Happens Without <!DOCTYPE html>

Doctype Declaration for Different Version of HTML and XHTML

Best Practices When Using DOCTYPE

Similar Reads