Update the HTML Document Type guidance (#862)

This update explicitly declares quirks mode to be against the style guide and strengthens the recommendation from “preferred” to “mandatory”. It also updates examples to use lowercase for consistency and clarifies that the style guide applies to Sass.

htmlcssguide.html

@@ -15,9 +15,9 @@ <h2 id="Background" class="numbered">Background</h2>
 
 <p>This document defines formatting and style rules for HTML and CSS. It aims at
 improving collaboration, code quality, and enabling supporting infrastructure.
-It applies to raw, working files that use HTML and CSS, including GSS files.
-Tools are free to obfuscate, minify, and compile as long as the general code
-quality is maintained.</p>
+It applies to raw, working files that use HTML and CSS, including Sass and GSS
+files. Tools are free to obfuscate, minify, and compile as long as the general
+code quality is maintained.</p>
 
 <h2 id="General" class="numbered">General</h2>
 
@@ -165,13 +165,17 @@ <h3 id="HTML_Style_Rules" class="numbered">HTML Style Rules</h3>
 
 <h4 id="Document_Type" class="numbered">Document Type</h4>
 
-<p>Use HTML5.</p>
+<p>Use <code>&lt;!doctype html&gt;</code>.</p>
 
-<p>HTML5 (HTML syntax) is preferred for all HTML documents: <code>&lt;!DOCTYPE html&gt;</code>.</p>
+<p>Always put your HTML in
+<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">no-quirks mode</a>
+by including <code>&lt;!doctype html&gt;</code> at the beginning of the document.</p>
 
-<p>(It’s recommended to use HTML, as <code>text/html</code>. Do not use XHTML. XHTML, as
-<a href="https://hixie.ch/advocacy/xhtml"><code>application/xhtml+xml</code></a>, lacks both browser
-and infrastructure support and offers less room for optimization than HTML.)</p>
+<p>A document without a doctype is rendered in “quirks mode”, and one with a
+different doctype may be rendered in “limited-quirks mode”. These modes don’t
+follow the widely-understood, widely-documented behavior for various core HTML
+and CSS constructs, and are likely to cause subtle failures and
+incompatibilities especially when re-using code that expects no-quirks mode.</p>
 
 <h4 id="HTML_Validity" class="numbered">HTML Validity</h4>
 
@@ -194,7 +198,7 @@ <h4 id="HTML_Validity" class="numbered">HTML Validity</h4>
 </code></pre>
 
 <pre><code class="language-html good">&lt;!-- Recommended --&gt;
-&lt;!DOCTYPE html&gt;
+&lt;!doctype html&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;Test&lt;/title&gt;
 &lt;article&gt;This is only a test.&lt;/article&gt;
@@ -263,7 +267,7 @@ <h4 id="Separation_of_Concerns" class="numbered">Separation of Concerns</h4>
 templates than it is to update style sheets and scripts.</p>
 
 <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
-&lt;!DOCTYPE html&gt;
+&lt;!doctype html&gt;
 &lt;title&gt;HTML sucks&lt;/title&gt;
 &lt;link rel="stylesheet" href="base.css" media="screen"&gt;
 &lt;link rel="stylesheet" href="grid.css" media="screen"&gt;
@@ -276,7 +280,7 @@ <h4 id="Separation_of_Concerns" class="numbered">Separation of Concerns</h4>
 </code></pre>
 
 <pre><code class="language-html good">&lt;!-- Recommended --&gt;
-&lt;!DOCTYPE html&gt;
+&lt;!doctype html&gt;
 &lt;title&gt;My first CSS-only redesign&lt;/title&gt;
 &lt;link rel="stylesheet" href="default.css"&gt;
 &lt;h1&gt;My first CSS-only redesign&lt;/h1&gt;
@@ -320,7 +324,7 @@ <h4 id="Optional_Tags" class="numbered">Optional Tags</h4>
 tags, not just a selection.)</p>
 
 <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
-&lt;!DOCTYPE html&gt;
+&lt;!doctype html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;Spending money, spending bytes&lt;/title&gt;
@@ -332,7 +336,7 @@ <h4 id="Optional_Tags" class="numbered">Optional Tags</h4>
 </code></pre>
 
 <pre><code class="language-html good">&lt;!-- Recommended --&gt;
-&lt;!DOCTYPE html&gt;
+&lt;!doctype html&gt;
 &lt;title&gt;Saving money, saving bytes&lt;/title&gt;
 &lt;p&gt;Qed.
 </code></pre>