From 62e8467e59d7d30d7cbda080f6b5f1d37a17d905 Mon Sep 17 00:00:00 2001
From: mjfernez <mjf@mjfer.net>
Date: Sun, 28 Jun 2026 14:44:00 -0400
Subject: 2026 Touch up, mostly FAQ

---
 tutorials/www/quick-intro-html-css.html | 211 +++++++++++++++-----------------
 1 file changed, 98 insertions(+), 113 deletions(-)

(limited to 'tutorials/www/quick-intro-html-css.html')

diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index 1ea2fbf..93169db 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -8,22 +8,12 @@
 <style>
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
-    div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: auto; overflow-x: auto;}
+    span.underline{text-decoration: underline;}
+    div.column{display: inline-block; vertical-align: top; width: 50%;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
-    /* The extra [class] is a hack that increases specificity enough to
-       override a similar rule in reveal.js */
-    ul.task-list[class]{list-style: none;}
-    ul.task-list li input[type="checkbox"] {
-      font-size: inherit;
-      width: 0.8em;
-      margin: 0 0.8em 0.2em -1.6em;
-      vertical-align: middle;
-    }
-    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
-    /* CSS for syntax highlighting */
+    ul.task-list{list-style: none;}
     pre > code.sourceCode { white-space: pre; position: relative; }
-    pre > code.sourceCode > span { line-height: 1.25; }
+    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
     pre > code.sourceCode > span:empty { height: 1.2em; }
     .sourceCode { overflow: visible; }
     code.sourceCode > span { color: inherit; text-decoration: inherit; }
@@ -85,6 +75,7 @@
     code span.va { color: #19177c; } /* Variable */
     code span.vs { color: #4070a0; } /* VerbatimString */
     code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
+    .display.math{display: block; text-align: center; margin: 0.5rem auto;}
   </style>
 <link href="../../static/main.css" rel="stylesheet"/>
 </head>
@@ -92,43 +83,37 @@
 <nav id="TOC" role="doc-toc">
 <h2 id="toc-title">Contents</h2>
 <ul>
-<li><a href="#web-browsers-render-code" id="toc-web-browsers-render-code" target="_self">Web browsers render code</a>
+<li><a href="#web-browsers-render-code" target="_self">Web browsers render code</a>
 <ul>
-<li><a href="#html" id="toc-html" target="_self">HTML</a>
+<li><a href="#html" target="_self">HTML</a>
 <ul>
-<li><a href="#basic-format" id="toc-basic-format" target="_self">Basic Format</a></li>
-<li><a href="#tables-and-links" id="toc-tables-and-links" target="_self">Tables and
-Links</a></li>
-<li><a href="#and-everything-else..." id="toc-and-everything-else..." target="_self">And Everything Else...</a>
+<li><a href="#basic-format" target="_self">Basic Format</a></li>
+<li><a href="#tables-and-links" target="_self">Tables and Links</a></li>
+<li><a href="#and-everything-else..." target="_self">And Everything Else...</a>
 <ul>
-<li><a href="#shortlist-of-text-and-formatting-tags" id="toc-shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text and
-Formatting Tags</a></li>
+<li><a href="#shortlist-of-text-and-formatting-tags" target="_self">Shortlist of Text
+and Formatting Tags</a></li>
 </ul></li>
-<li><a href="#html-metadata" id="toc-html-metadata" target="_self">HTML
-Metadata</a></li>
+<li><a href="#html-metadata" target="_self">HTML Metadata</a></li>
 </ul></li>
-<li><a href="#css" id="toc-css" target="_self">CSS</a>
+<li><a href="#css" target="_self">CSS</a>
 <ul>
-<li><a href="#add-style-without-css" id="toc-add-style-without-css" target="_self">Add
-style <em>without</em> CSS</a></li>
-<li><a href="#basic-formatting" id="toc-basic-formatting" target="_self">Basic
-Formatting</a></li>
-<li><a href="#image-formatting" id="toc-image-formatting" target="_self">Image
-Formatting</a></li>
-<li><a href="#making-custom-classes" id="toc-making-custom-classes" target="_self">Making Custom Classes</a>
+<li><a href="#add-style-without-css" target="_self">Add style <em>without</em>
+CSS</a></li>
+<li><a href="#basic-formatting" target="_self">Basic Formatting</a></li>
+<li><a href="#image-formatting" target="_self">Image Formatting</a></li>
+<li><a href="#making-custom-classes" target="_self">Making Custom Classes</a>
 <ul>
-<li><a href="#use-the-div-tag-to-make-sections" id="toc-use-the-div-tag-to-make-sections" target="_self">Use the div tag to make
+<li><a href="#use-the-div-tag-to-make-sections" target="_self">Use the div tag to make
 sections</a></li>
 </ul></li>
-<li><a href="#mobile-optimization" id="toc-mobile-optimization" target="_self">Mobile
-Optimization</a></li>
+<li><a href="#mobile-optimization" target="_self">Mobile Optimization</a></li>
 </ul></li>
-<li><a href="#how-to-look-things-up" id="toc-how-to-look-things-up" target="_self">How
-to look things up</a></li>
-<li><a href="#references" id="toc-references" target="_self">References</a>
+<li><a href="#how-to-look-things-up" target="_self">How to look things up</a></li>
+<li><a href="#references" target="_self">References</a>
 <ul>
-<li><a href="#html-1" id="toc-html-1" target="_self">HTML</a></li>
-<li><a href="#css-1" id="toc-css-1" target="_self">CSS</a></li>
+<li><a href="#html-1" target="_self">HTML</a></li>
+<li><a href="#css-1" target="_self">CSS</a></li>
 </ul></li>
 </ul></li>
 </ul>
@@ -168,22 +153,22 @@ it.</p>
 <h3 id="basic-format">Basic Format</h3>
 <p>All HTML files start with the following (note: the spacing does not
 matter, it's just spaced for readability):</p>
-<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
-<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
+<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a aria-hidden="true" href="#cb1-1" tabindex="-1"></a><span class="kw">&lt;html&gt;</span></span>
+<span id="cb1-2"><a aria-hidden="true" href="#cb1-2" tabindex="-1"></a>    <span class="kw">&lt;body&gt;</span></span>
 <span id="cb1-3"><a aria-hidden="true" href="#cb1-3" tabindex="-1"></a>    <span class="co">&lt;!-- stuff you see goes here --&gt;</span></span>
-<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
+<span id="cb1-4"><a aria-hidden="true" href="#cb1-4" tabindex="-1"></a>    <span class="kw">&lt;/body&gt;</span></span>
+<span id="cb1-5"><a aria-hidden="true" href="#cb1-5" tabindex="-1"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
 <p>You'll notice two <em>tags</em> here. An "html" tag, and a "body"
 tag, both of which are closed with "&lt;/html&gt;" and "&lt;/body&gt;"
 to signify where the sections end. The HTML document proper is anything
 between the HTML tags. The body of the document contains the actual
 content that the user sees. For example:</p>
-<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
-<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
-<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>My great paragraph<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a aria-hidden="true" href="#cb2-1" tabindex="-1"></a><span class="kw">&lt;html&gt;</span></span>
+<span id="cb2-2"><a aria-hidden="true" href="#cb2-2" tabindex="-1"></a>    <span class="kw">&lt;body&gt;</span></span>
+<span id="cb2-3"><a aria-hidden="true" href="#cb2-3" tabindex="-1"></a>        <span class="kw">&lt;h1&gt;</span>My Great page<span class="kw">&lt;/h1&gt;</span></span>
+<span id="cb2-4"><a aria-hidden="true" href="#cb2-4" tabindex="-1"></a>        <span class="kw">&lt;p&gt;</span>My great paragraph<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb2-5"><a aria-hidden="true" href="#cb2-5" tabindex="-1"></a>    <span class="kw">&lt;/body&gt;</span></span>
+<span id="cb2-6"><a aria-hidden="true" href="#cb2-6" tabindex="-1"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
 <p>We've introduced two more tags here, both of which are closed within
 the body section. The "h1" tag defines a "Heading" which tells the
 browser to render the text big and bold, like a document title. You can
@@ -194,33 +179,33 @@ text in a file called "page.html" and open it in your browser.</p>
 <h3 id="tables-and-links">Tables and Links</h3>
 <p>We can do a lot more than text of course. Let's walk through some
 more tags in this example:</p>
-<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
-<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
-<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>My great paragraph<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">br</span><span class="dt">&gt;</span></span>
-<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">h3</span><span class="dt">&gt;</span>Please check out these links, really cool stuff!<span class="dt">&lt;/</span><span class="kw">h3</span><span class="dt">&gt;</span></span>
-<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">center</span><span class="dt">&gt;</span></span>
-<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">table</span><span class="dt">&gt;</span></span>
-<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a>            <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
-<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>FSF!<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
-<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span></span>
-<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="dt">&gt;</span></span>
-<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="dt">/&gt;</span></span>
-<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a>                <span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
-<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a>            <span class="dt">&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
-<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a>            <span class="dt">&lt;</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
-<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span>LOONIX!<span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
-<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">td</span><span class="dt">&gt;</span></span>
-<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="dt">&gt;</span></span>
-<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a>                <span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="dt">/&gt;</span></span>
-<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a>                <span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
-<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a>                <span class="dt">&lt;/</span><span class="kw">td</span><span class="dt">&gt;</span></span>
-<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a>            <span class="dt">&lt;/</span><span class="kw">tr</span><span class="dt">&gt;</span></span>
-<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a>        <span class="dt">&lt;/</span><span class="kw">table</span><span class="dt">&gt;</span></span>
-<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">center</span><span class="dt">&gt;</span></span>
-<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a aria-hidden="true" href="#cb3-1" tabindex="-1"></a><span class="kw">&lt;html&gt;</span></span>
+<span id="cb3-2"><a aria-hidden="true" href="#cb3-2" tabindex="-1"></a>    <span class="kw">&lt;body&gt;</span></span>
+<span id="cb3-3"><a aria-hidden="true" href="#cb3-3" tabindex="-1"></a>    <span class="kw">&lt;h1&gt;</span>My Great page<span class="kw">&lt;/h1&gt;</span></span>
+<span id="cb3-4"><a aria-hidden="true" href="#cb3-4" tabindex="-1"></a>    <span class="kw">&lt;p&gt;</span>My great paragraph<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb3-5"><a aria-hidden="true" href="#cb3-5" tabindex="-1"></a>    <span class="kw">&lt;br&gt;</span></span>
+<span id="cb3-6"><a aria-hidden="true" href="#cb3-6" tabindex="-1"></a>    <span class="kw">&lt;h3&gt;</span>Please check out these links, really cool stuff!<span class="kw">&lt;/h3&gt;</span></span>
+<span id="cb3-7"><a aria-hidden="true" href="#cb3-7" tabindex="-1"></a>    <span class="kw">&lt;center&gt;</span></span>
+<span id="cb3-8"><a aria-hidden="true" href="#cb3-8" tabindex="-1"></a>        <span class="kw">&lt;table&gt;</span></span>
+<span id="cb3-9"><a aria-hidden="true" href="#cb3-9" tabindex="-1"></a>            <span class="kw">&lt;tr&gt;</span></span>
+<span id="cb3-10"><a aria-hidden="true" href="#cb3-10" tabindex="-1"></a>                <span class="kw">&lt;td&gt;</span>FSF!<span class="kw">&lt;/td&gt;</span></span>
+<span id="cb3-11"><a aria-hidden="true" href="#cb3-11" tabindex="-1"></a>                <span class="kw">&lt;td&gt;</span></span>
+<span id="cb3-12"><a aria-hidden="true" href="#cb3-12" tabindex="-1"></a>                <span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.fsf.org/"</span><span class="kw">&gt;</span></span>
+<span id="cb3-13"><a aria-hidden="true" href="#cb3-13" tabindex="-1"></a>                <span class="kw">&lt;img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://static/media.fsf.org/common/img/logo-new.png"</span> <span class="kw">/&gt;</span></span>
+<span id="cb3-14"><a aria-hidden="true" href="#cb3-14" tabindex="-1"></a>                <span class="kw">&lt;/a&gt;&lt;/td&gt;</span></span>
+<span id="cb3-15"><a aria-hidden="true" href="#cb3-15" tabindex="-1"></a>            <span class="kw">&lt;/tr&gt;</span></span>
+<span id="cb3-16"><a aria-hidden="true" href="#cb3-16" tabindex="-1"></a>            <span class="kw">&lt;tr&gt;</span></span>
+<span id="cb3-17"><a aria-hidden="true" href="#cb3-17" tabindex="-1"></a>                <span class="kw">&lt;td&gt;</span>LOONIX!<span class="kw">&lt;/td&gt;</span></span>
+<span id="cb3-18"><a aria-hidden="true" href="#cb3-18" tabindex="-1"></a>                <span class="kw">&lt;td&gt;</span></span>
+<span id="cb3-19"><a aria-hidden="true" href="#cb3-19" tabindex="-1"></a>                <span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.kernel.org/"</span><span class="kw">&gt;</span></span>
+<span id="cb3-20"><a aria-hidden="true" href="#cb3-20" tabindex="-1"></a>                <span class="kw">&lt;img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"https://www.kernel.org/theme/images/logos/tux.png"</span> <span class="kw">/&gt;</span></span>
+<span id="cb3-21"><a aria-hidden="true" href="#cb3-21" tabindex="-1"></a>                <span class="kw">&lt;/a&gt;</span></span>
+<span id="cb3-22"><a aria-hidden="true" href="#cb3-22" tabindex="-1"></a>                <span class="kw">&lt;/td&gt;</span></span>
+<span id="cb3-23"><a aria-hidden="true" href="#cb3-23" tabindex="-1"></a>            <span class="kw">&lt;/tr&gt;</span></span>
+<span id="cb3-24"><a aria-hidden="true" href="#cb3-24" tabindex="-1"></a>        <span class="kw">&lt;/table&gt;</span></span>
+<span id="cb3-25"><a aria-hidden="true" href="#cb3-25" tabindex="-1"></a>    <span class="kw">&lt;/center&gt;</span></span>
+<span id="cb3-26"><a aria-hidden="true" href="#cb3-26" tabindex="-1"></a>    <span class="kw">&lt;/body&gt;</span></span>
+<span id="cb3-27"><a aria-hidden="true" href="#cb3-27" tabindex="-1"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
 <p>We added a few things here, but it's the same pattern right?
 &lt;open&gt;&lt;/close&gt;.</p>
 <p>We started by adding a "center" tag, which does what you think: it
@@ -239,24 +224,24 @@ world</em>. On it's own, the "a" tag doesn't do anything special. We
 need to use the tag with an <em>attribute</em>--an extra word that comes
 after a--in order to make it work for us. A more basic example might be
 this:</p>
-<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="dt">&gt;</span>Example<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a aria-hidden="true" href="#cb4-1" tabindex="-1"></a><span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://example.com"</span><span class="kw">&gt;</span>Example<span class="kw">&lt;/a&gt;</span></span></code></pre></div>
 <p>Which you'll see as:</p>
 <p><a href="https://example.com">Example</a></p>
 <p>The "href" attribute doesn't <em>have</em> to point to some other
 website; it can point to anything. For example, you might want to link
 to picture your cat (maybe hosted at "/var/www/cat.jpg"). You would do
 it like this:</p>
-<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="dt">&gt;</span>example<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb5-1"><a aria-hidden="true" href="#cb5-1" tabindex="-1"></a><span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cat.jpg"</span><span class="kw">&gt;</span>example<span class="kw">&lt;/a&gt;</span></span></code></pre></div>
 <p>You can also link an email like this</p>
-<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="dt">&gt;</span>example email<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb6"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb6-1"><a aria-hidden="true" href="#cb6-1" tabindex="-1"></a><span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"mailto:email@example.com"</span><span class="kw">&gt;</span>example email<span class="kw">&lt;/a&gt;</span></span></code></pre></div>
 <p>Let's say you had a barebones site with 5 HTML files named:
 index.html, about.html, faq.html, cats.html, vidya.html. You can make a
 neat little navbar just using "a" tags like this:</p>
-<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="dt">&gt;</span>home<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
-<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="dt">&gt;</span>about<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
-<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="dt">&gt;</span>faq<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
-<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="dt">&gt;</span>cats<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span>
-<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="dt">&gt;</span>vidya<span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb7-1"><a aria-hidden="true" href="#cb7-1" tabindex="-1"></a><span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/index.html"</span><span class="kw">&gt;</span>home<span class="kw">&lt;/a&gt;</span></span>
+<span id="cb7-2"><a aria-hidden="true" href="#cb7-2" tabindex="-1"></a> - <span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/about.html"</span><span class="kw">&gt;</span>about<span class="kw">&lt;/a&gt;</span></span>
+<span id="cb7-3"><a aria-hidden="true" href="#cb7-3" tabindex="-1"></a> - <span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/faq.html"</span><span class="kw">&gt;</span>faq<span class="kw">&lt;/a&gt;</span></span>
+<span id="cb7-4"><a aria-hidden="true" href="#cb7-4" tabindex="-1"></a> - <span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/cats.html"</span><span class="kw">&gt;</span>cats<span class="kw">&lt;/a&gt;</span></span>
+<span id="cb7-5"><a aria-hidden="true" href="#cb7-5" tabindex="-1"></a> - <span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/vidya.html"</span><span class="kw">&gt;</span>vidya<span class="kw">&lt;/a&gt;</span></span></code></pre></div>
 <h3 id="and-everything-else...">And Everything Else...</h3>
 <p>There are many other tags out there, many of which I don't know, and
 one which I mentioned before, but didn't explain yet: the "img" tag. In
@@ -377,21 +362,21 @@ search engines indexing the site that can improve the user experience.
 The most common thing you'll see in the head section is the site's
 title, and something called "meta" tags. As usual, it's best to see an
 example:</p>
-<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">html</span><span class="dt">&gt;</span></span>
-<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">head</span><span class="dt">&gt;</span></span>
-<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">title</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">title</span><span class="dt">&gt;</span></span>
-<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="dt">/&gt;</span></span>
-<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="dt">&gt;</span></span>
-<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="dt">&gt;</span></span>
-<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="dt">&gt;</span></span>
-<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="dt">&gt;</span></span>
-<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">&gt;</span></span>
-<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">head</span><span class="dt">&gt;</span></span>
-<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a>    <span class="dt">&lt;</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My Great page<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
-<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a>        <span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>My great paragraph<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a>    <span class="dt">&lt;/</span><span class="kw">body</span><span class="dt">&gt;</span></span>
-<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">html</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb8"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb8-1"><a aria-hidden="true" href="#cb8-1" tabindex="-1"></a><span class="kw">&lt;html&gt;</span></span>
+<span id="cb8-2"><a aria-hidden="true" href="#cb8-2" tabindex="-1"></a>    <span class="kw">&lt;head&gt;</span></span>
+<span id="cb8-3"><a aria-hidden="true" href="#cb8-3" tabindex="-1"></a>        <span class="kw">&lt;title&gt;</span>My Great page<span class="kw">&lt;/title&gt;</span></span>
+<span id="cb8-4"><a aria-hidden="true" href="#cb8-4" tabindex="-1"></a>        <span class="kw">&lt;meta</span> <span class="er">http-equiv</span><span class="ot">=</span><span class="st">"Content-Type"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"text/html; charset=utf-8"</span><span class="kw">/&gt;</span></span>
+<span id="cb8-5"><a aria-hidden="true" href="#cb8-5" tabindex="-1"></a>        <span class="kw">&lt;meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"description"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"a really cool page"</span><span class="kw">&gt;</span></span>
+<span id="cb8-6"><a aria-hidden="true" href="#cb8-6" tabindex="-1"></a>        <span class="kw">&lt;meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"keywords"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"HTML, CSS, JavaScript"</span><span class="kw">&gt;</span></span>
+<span id="cb8-7"><a aria-hidden="true" href="#cb8-7" tabindex="-1"></a>        <span class="kw">&lt;meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"author"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"John Doe"</span><span class="kw">&gt;</span></span>
+<span id="cb8-8"><a aria-hidden="true" href="#cb8-8" tabindex="-1"></a>        <span class="kw">&lt;meta</span> <span class="er">name</span><span class="ot">=</span><span class="st">"viewport"</span> <span class="er">content</span><span class="ot">=</span><span class="st">"width=device-width, initial-scale=1.0"</span><span class="kw">&gt;</span></span>
+<span id="cb8-9"><a aria-hidden="true" href="#cb8-9" tabindex="-1"></a>        <span class="kw">&lt;link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="kw">&gt;</span></span>
+<span id="cb8-10"><a aria-hidden="true" href="#cb8-10" tabindex="-1"></a>    <span class="kw">&lt;/head&gt;</span></span>
+<span id="cb8-11"><a aria-hidden="true" href="#cb8-11" tabindex="-1"></a>    <span class="kw">&lt;body&gt;</span></span>
+<span id="cb8-12"><a aria-hidden="true" href="#cb8-12" tabindex="-1"></a>        <span class="kw">&lt;h1&gt;</span>My Great page<span class="kw">&lt;/h1&gt;</span></span>
+<span id="cb8-13"><a aria-hidden="true" href="#cb8-13" tabindex="-1"></a>        <span class="kw">&lt;p&gt;</span>My great paragraph<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb8-14"><a aria-hidden="true" href="#cb8-14" tabindex="-1"></a>    <span class="kw">&lt;/body&gt;</span></span>
+<span id="cb8-15"><a aria-hidden="true" href="#cb8-15" tabindex="-1"></a><span class="kw">&lt;/html&gt;</span></span></code></pre></div>
 <p>Note that the "meta" tag works like the "img" tag did and has no
 closing tag.</p>
 <p>The first tag in the head is the "title" tag. This is the title of
@@ -424,12 +409,12 @@ Cascading Style Sheets (CSS).</p>
 <p>The "link" tag in the metadata sections can link any external
 resource. It's commonly used to make a "favicon" for example, which is
 the icon you see in the tab of an open page.</p>
-<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb9-1"><a aria-hidden="true" href="#cb9-1" tabindex="-1"></a><span class="kw">&lt;link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"icon"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/favicon.ico"</span><span class="kw">&gt;</span></span></code></pre></div>
 <p>In the last example, we instead make a reference to a CSS formatted
 style sheet. Like HTML, CSS is just a text file written in a specific
 syntax. CSS allows you to set attributes to <em>all</em> tags in a
 specific document and create a unifying style for all your pages.</p>
-<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb10"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb10-1"><a aria-hidden="true" href="#cb10-1" tabindex="-1"></a><span class="kw">&lt;link</span> <span class="er">rel</span><span class="ot">=</span><span class="st">"stylesheet"</span> <span class="er">type</span><span class="ot">=</span><span class="st">"text/css"</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/static/media/main.css"</span><span class="kw">&gt;</span></span></code></pre></div>
 <p>As before, "href" points to the file to be linked. In this example,
 we place our CSS in a text file called "main.css" in the "static"
 directory of "/var/www/html".</p>
@@ -437,16 +422,16 @@ directory of "/var/www/html".</p>
 <p>Before we make CSS files, I want to stress the point that all this
 stuff is defined in HTML. You can set these attributes directly in any
 tag we talked about in the last section. For example:</p>
-<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="dt">&gt;</span>this text is red<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="dt">&gt;</span>this background is blue<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="dt">&gt;</span>this text is centered<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&amp;</span><span class="st">episode_no=2"</span></span>
+<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb11-1"><a aria-hidden="true" href="#cb11-1" tabindex="-1"></a><span class="kw">&lt;p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red"</span><span class="kw">&gt;</span>this text is red<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb11-2"><a aria-hidden="true" href="#cb11-2" tabindex="-1"></a><span class="kw">&lt;p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue"</span><span class="kw">&gt;</span>this background is blue<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb11-3"><a aria-hidden="true" href="#cb11-3" tabindex="-1"></a><span class="kw">&lt;p</span> <span class="er">style</span><span class="ot">=</span><span class="st">"color:red;background-color:blue;text-align:center"</span><span class="kw">&gt;</span>this text is centered<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb11-4"><a aria-hidden="true" href="#cb11-4" tabindex="-1"></a><span class="kw">&lt;a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"https://www.webtoons.com/en/challenge/sonichu-/sonichu-1/viewer?title_no=676229</span><span class="er">&amp;</span><span class="st">episode_no=2"</span></span>
 <span id="cb11-5"><a aria-hidden="true" href="#cb11-5" tabindex="-1"></a><span class="ot">    target=</span><span class="st">"_blank"</span></span>
 <span id="cb11-6"><a aria-hidden="true" href="#cb11-6" tabindex="-1"></a><span class="ot">    rel=</span><span class="st">"noopener noreferrer"</span></span>
 <span id="cb11-7"><a aria-hidden="true" href="#cb11-7" tabindex="-1"></a><span class="ot">    style=</span><span class="st">"color:yellow;background-color:red;text-align:right"</span></span>
-<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a>    <span class="dt">&gt;</span></span>
+<span id="cb11-8"><a aria-hidden="true" href="#cb11-8" tabindex="-1"></a>    <span class="kw">&gt;</span></span>
 <span id="cb11-9"><a aria-hidden="true" href="#cb11-9" tabindex="-1"></a>    And this links to sonichu</span>
-<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">a</span><span class="dt">&gt;</span></span></code></pre></div>
+<span id="cb11-10"><a aria-hidden="true" href="#cb11-10" tabindex="-1"></a><span class="kw">&lt;/a&gt;</span></span></code></pre></div>
 <p style="color:red">
 this text is red
 </p>
@@ -550,11 +535,11 @@ section like this:</p>
 but usually we use a placeholder tag called "div." You can think of
 "div" like a divider for content of similar style. In the present
 example, we can use the class we made with a div tag:</p>
-<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="dt">&gt;</span></span>
-<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My cat<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
-<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>He's a cool cat<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
-<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="dt">/&gt;</span></span>
-<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">div</span><span class="dt">&gt;</span></span></code></pre></div>
+<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="kw">&lt;div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="kw">&gt;</span></span>
+<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="kw">&lt;h1&gt;</span>My cat<span class="kw">&lt;/h1&gt;</span></span>
+<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="kw">&lt;p&gt;</span>He's a cool cat<span class="kw">&lt;/p&gt;</span></span>
+<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="kw">&lt;img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="kw">/&gt;</span></span>
+<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="kw">&lt;/div&gt;</span></span></code></pre></div>
 <h3 id="mobile-optimization">Mobile Optimization</h3>
 <p>In early development, reading this site on my phone was a painful
 experience. Fortunately, in addition to some tricks above like the
-- 
cgit v1.2.3