Explain and apply use/mention distinction in the style guide

whatwg.org/style-guide

@@ -60,29 +60,29 @@
 <h3 id="grammar">Grammar<a class="self-link" href="#grammar"></a></h3>
 
 <ul>
- <li>Use 's for possessives, even when it looks unnatural.</li>
+ <li>Use "'s" for possessives, even when it looks unnatural.</li>
  <li>Use the <a href="https://en.wikipedia.org/wiki/Serial_comma">Oxford Comma</a>.</li>
  <li>Avoid "one of" unless it's followed by a bulleted list. You can normally leave it out and just use "or". If you cannot leave it out, that might be a good indication you want to use a bulleted list for clarity.</li>
- <li>A hierarchy (not an).</li>
+ <li>"A hierarchy" (not "an").</li>
 </ul>
 
 <h3 id="casing">Casing<a class="self-link" href="#casing"></a></h3>
 
 <ul>
- <li>web, unless at the start of a sentence</li>
+ <li>"web", unless at the start of a sentence</li>
 </ul>
 
 <h3 id="punctuation">Punctuation<a class="self-link" href="#punctuation"></a></h3>
 
 <ul>
- <li>Spaces around — (em dash)</li>
- <li>Lowercase after colon (<em>The slot attribute is used to assign a slot to an element: an element with a slot attribute is assigned to the slot created by the slot element whose name attribute's value matches that slot attribute's value</em>)</li>
+ <li>Spaces around "—" (em dash)</li>
+ <li>Lowercase after colon ("The slot attribute is used to assign a slot to an element: an element with a slot attribute is assigned to the slot created by the slot element whose name attribute's value matches that slot attribute's value")</li>
 </ul>
 
 <h3 id="words-and-phrases-used-as-words">Words and phrases used as words<a class="self-link" href="#words-and-phrases-used-as-words"></a></h3>
 
 <ul>
- <li>When a word or term is not used functionally but is referred to as the word or term itself, enclose it in quotation marks. (See also: <a href="https://www.chicagomanualofstyle.org/qanda/data/faq/topics/NoneoftheAbove/faq0012.html">some examples that highlight why this is necessary</a>.)</li>
+ <li>When a word or term is not used functionally but is referred to as the word or term itself, enclose it in quotation marks. (See also: <a href="https://en.wikipedia.org/wiki/Use%E2%80%93mention_distinction">use/mention distinction</a>, and <a href="https://www.chicagomanualofstyle.org/qanda/data/faq/topics/NoneoftheAbove/faq0012.html">some examples that highlight why this is necessary</a>.)</li>
 </ul>
 
 <h3 id="tone">Tone<a class="self-link" href="#tone"></a></h3>