Difference between standards mode and quirks mode

Last Updated : 14 Mar, 2022

Standards mode and Quirks mode are two modes introduced by web browsers to treat new standards-compliance sites differently from old legacy sites. At present, there are three modes used by the layout engines of web browsers to work along: quirks mode, almost standards mode, and full standards mode. The document type declaration of HTML, also known as DOCTYPE, is the very first line of code necessarily required in every HTML or XHTML document. This is an instruction for the web browser regarding which version of HTML the page is written in. This helps web pages to be parsed in the same way by different web browsers.

Quirks mode: Quirks mode is a technique used by many web browsers for maintaining backward compatibility with web pages designed for old web browsers instead of strictly complying with W3C standards. In Quirks mode, the internet browser tries to interpret on ‘best-guess’, this associated with a general understanding of code that might be not well structured, non-standard, or ineffectively written implies your page is running without a type declaration. The general purpose of quirks mode is that it’s a compatibility mode for IE5. This intends that as well as changing the layout mode, it additionally turns off most of the browser features that have been created since IE5. In quirks mode, browsers accept and behave like in the early days of the web. It accepts any badly formatted, malformed mark-up in this mode and is not strict with syntax, tags, and elements of it. This was done to avoid breaking old sites too much in new browsers.

We will be using the same code with and without DOCTYPE to understand the triggering of each type of mode and realize the difference between them.

Example: In the following example DOCTYPE is not written hence this would trigger quirks mode:

HTML

<html> 
    
<head> 
<title>Quirks Mode Triggering</title> 
     <style type="text/css"> 
          .PARAGRAPH-STYLED{ color:green;} 
      </style> 
</head> 
    
<body> 
    <h2>File without DOCTYPE</h2> 
    <p class =" paragraph-styled">  
        Welcome to GFG 
    </p> 
</body> 
    
</html> 

Output:

Standards mode: Standards mode is called upon to provide support for standardized HTML and CSS in major web browsers. Based on DOCTYPE it will render HTML and CSS. It will check all syntax based on DOCTYPE mentioned as W3C Standard. It accepts a well-formatted code and does as per requests made by the client. A third compatibility mode is known as almost standards mode or strict mode, which attempts to compromise between the two, implementing one quirk for table cell sizing while otherwise conforming to the specifications.

Example: Considering the same example as earlier but adding DOCTYPE this time it will trigger standards mode.

HTML

<!DOCTYPE html> 
<html> 
    
<head>     
    <title>Quirks Mode Triggering</title> 
    <style type="text/css"> 
          .PARAGRAPH-STYLED{ color:green;} 
      </style> 
</head> 
    
<body> 
    <h2>File with DOCTYPE</h2> 
    <p class =" paragraph-styled">  
        Welcome to gfg 
    </p> 
</body> 
    
</html> 

Output:

Difference between standards mode and quirks mode

Basis of comparison	Quirks mode	Standards mode
Code standardization	It accepts and works with ill-formatted code	It only works with standard w3c formatted code.
Vertical alignment	Align to the bottom within the box	Aligned to the baseline of the text within the box
Inherit font sizes	It doesn’t inherit the font sizes.	It inherits font sizes.
Purpose	To maintain the run of old legacy sites.	To have standard uniformity all over.
Interpretation	Works with best-guess interpretation.	Works with standard norms.
DOCTYPE	Not necessarily required.	Necessarily required.