diff --git a/src/content/en/2019/resource-hints.md b/src/content/en/2019/resource-hints.md
index b986ff6ceeb..267ee596887 100644
--- a/src/content/en/2019/resource-hints.md
+++ b/src/content/en/2019/resource-hints.md
@@ -43,9 +43,15 @@ The [`preload`](https://medium.com/reloading/preload-prefetch-and-priorities-in-
 
 ## Syntax
 
-97% of resource hint usage relied on using the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to specify a resource hint. For example, `<link rel="prefetch" href="shopping-cart.js">`.
+97% of resource hint usage relied on using the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to specify a resource hint. For example:
+```
+<link rel="prefetch" href="shopping-cart.js">
+```
 
-Only 3% of resource hint usage used [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) to specify resource hints. For example, `Link: <https://example.com/shopping-cart.js>; rel=prefetch`.
+Only 3% of resource hint usage used [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) to specify resource hints. For example:
+```
+Link: <https://example.com/shopping-cart.js>; rel=prefetch
+```
 
 Because the usage of resource hints in HTTP headers is so low, the remainder of this chapter will focus solely on analyzing the usage of resource hints in conjunction with the `<link>` tag. However, it's worth noting that in future years, usage of resource hints in HTTP headers may increase as [HTTP/2 Push](./http2#http2-push) is adopted. This is due to the fact that HTTP/2 Push has repurposed the HTTP preload `Link` header as a signal to push resources.
 
@@ -195,7 +201,10 @@ For newer resource types (e.g. fonts, `fetch()` requests, ES modules), the brows
   <figcaption>Figure 3. Adoption of the <code>crossorigin</code> attribute as a percent of resource hint instances.</figcaption>
 </figure>
 
-In the context of resource hints, usage of the `crossorigin` attribute enables them to match the CORS mode of the resources they are supposed to match and indicates the credentials to include in the request. For example: `<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">` enables CORS and indicates that no credentials should be included for those cross-origin requests.
+In the context of resource hints, usage of the `crossorigin` attribute enables them to match the CORS mode of the resources they are supposed to match and indicates the credentials to include in the request. For example, `anonymous` enables CORS and indicates that no credentials should be included for those cross-origin requests:
+```
+<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">
+```
 
 Although other HTML elements support the crossorigin attribute, this analysis only looks at usage with resource hints.
 
diff --git a/src/content/fr/2019/resource-hints.md b/src/content/fr/2019/resource-hints.md
index 1d6fea325b2..487f4e84c18 100644
--- a/src/content/fr/2019/resource-hints.md
+++ b/src/content/fr/2019/resource-hints.md
@@ -43,9 +43,15 @@ Le rôle de [`dns-prefetch`](https://developer.mozilla.org/en-US/docs/Learn/Perf
 
 ## Syntaxe
 
-97&nbsp;% des usages d'indices de ressources sont spécifiés par le tag [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). Par exemple, `<link rel="prefetch" href="shopping-cart.js">`.
+97&nbsp;% des usages d'indices de ressources sont spécifiés par le tag [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). Par exemple&nbsp;:
+```
+<link rel="prefetch" href="shopping-cart.js">
+```
 
-Seuls 3&nbsp;% des indices de ressources proviennent [d'en-têtes HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) permettant de les spécifier. Par exemple, `Link: <https://example.com/shopping-cart.js>; rel=prefetch`.
+Seuls 3&nbsp;% des indices de ressources proviennent [d'en-têtes HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link) permettant de les spécifier. Par exemple&nbsp;:
+```
+Link: <https://example.com/shopping-cart.js>; rel=prefetch
+```
 
 Comme l'utilisation des indices de ressources dans les en-têtes HTTP est très faible, le reste de ce chapitre se concentrera uniquement sur l'analyse de l'utilisation des indices de ressources passant par la balise `<link>`. Cependant, il convient de noter que dans les années à venir, l'utilisation des indices de ressources dans les en-têtes HTTP pourrait augmenter avec l'adoption de [HTTP/2 Push](./http2#http2-push). En effet, HTTP/2 Push réutilise l'en-tête HTTP de préchargement `Link` comme un signal permettant de pousser des ressources.
 
@@ -195,7 +201,10 @@ Pour les types de ressources plus récentes (par exemple les polices, les requê
   <figcaption>Figure 3. Adoption de l'attribut <code>crossorigin</code> en pourcentage du nombre d'indices de ressources.</figcaption>
 </figure>
 
-Dans le contexte des indices de ressources, l'utilisation de l'attribut `crossorigin` leur permet de correspondre au mode CORS des ressources auxquelles ils sont censés correspondre et indique les références à inclure dans la requête. Par exemple : `<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">` active le mode CORS et indique qu'aucun identifiant ne doit être inclus pour ces requêtes `cross-origin`.
+Dans le contexte des indices de ressources, l'utilisation de l'attribut `crossorigin` leur permet de correspondre au mode CORS des ressources auxquelles ils sont censés correspondre et indique les références à inclure dans la requête. Par exemple, `anonymous` active le mode CORS et indique qu'aucun identifiant ne doit être inclus pour ces requêtes `cross-origin`&nbsp;:
+```
+<link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous">
+```
 
 Bien que d'autres éléments HTML prennent en charge l'attribut `crossorigin`, cette analyse ne porte que sur l'utilisation avec des indices de ressources.
 
diff --git a/src/static/css/2019.css b/src/static/css/2019.css
index 0eb7668b18d..a98af1c72bb 100644
--- a/src/static/css/2019.css
+++ b/src/static/css/2019.css
@@ -287,6 +287,37 @@
 }
 
 /* Browser elements */
+
+/**
+ * A word on font-sizing units
+ * ---------------------------
+ * Font-sizes should in general be sized in rem (1rem usually equals 16px)
+ * This allows fonts to be resized in browser, which is better for accessibility
+ * (see https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html).
+ *
+ * We can also use ems, if you wish to nest elements and scale (components), but
+ * this gets tricky quite quickly, so for the most part we use rems.
+ *
+ * We show the px value before, as a fallback for non-rem browsers and to remind
+ * us of the calculated size.
+ *
+ * Margins and paddings should be considered if the need to be relative (em or rem)
+ * or happy not to scale with fonts and want set about in px.
+ * If scaling, then in general top and bottom should scale with element (em), and
+ * left and right with root element (rem) to have consistent alignment (see 
+ * https://zellwk.com/blog/rem-vs-em/#rems-or-ems%3F for why).
+ * So we set margin like this:
+ *
+ *   h2.header {
+ *     font-size: 25px;
+ *     font-size: 1.5625rem;
+ *     margin: 14px;
+ *     margin: 0.56em 0.875rem
+ *   }
+ *
+ * and remember for the non-font elements, ems are relative to current font size (25px in above example), and rems to root (16px)
+ */
+
 body {
   font-family: 'Lato', sans-serif;
   color: #1A2B49;
@@ -294,6 +325,7 @@ body {
   font-weight: inherit;
   -webkit-font-smoothing: antialiased;
   font-size: 17px;
+  font-size: 1.0625rem;
   line-height: 1.4em;
 }
 
@@ -318,6 +350,11 @@ a:focus, a:hover {
   text-decoration: underline;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 /* The main wrapper, center aligned */
 .container {
   max-width: 1280px;
@@ -334,7 +371,9 @@ a:focus, a:hover {
 
 .subtitle {
   font-size: 28px;
+  font-size: 1.75rem;
   line-height: 42px;
+  line-height: 1.5em;
   font-weight: bold;
 }
 
@@ -365,6 +404,7 @@ a:focus, a:hover {
 
 .title-lg {
   font-size: 48px;
+  font-size: 3rem;
 }
 
 .title-alt::before {
@@ -380,12 +420,6 @@ a:focus, a:hover {
   margin-right: auto;
 }
 
-@media (max-width: 600px) {  
-  .title-lg {
-    font-size: 40px;
-  }
-}
-
 @media (max-width: 900px) {
   .title-alt::before {
     margin-left: auto;
@@ -395,16 +429,20 @@ a:focus, a:hover {
 
 h2.header {
   font-size: 25px;
+  font-size: 1.5625rem;
   margin: 14px;
+  margin: 0.56em 0.875rem
 }
 
 .btn {
   border: 1px solid #1A2B49;
   border-radius: 50px;
   padding: 15px 30px;
+  padding: 1.07em 1.875rem;
   background: #1A2B49;
   color: #FFFFFF;
   font-size: 14px;
+  font-size: 0.875rem;
   text-decoration: none;
 }
 .btn:hover,
@@ -516,6 +554,7 @@ header .btn + .language-switcher {
   align-items: center;
   position: relative;
   font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .language-switcher select,
@@ -565,6 +604,7 @@ header .btn + .language-switcher {
 .main {
   margin: 0px auto;
   font-size: 17px;
+  font-size: 1.0625rem;
 }
 
 .main a,
@@ -583,6 +623,7 @@ h4 code {
 
 p, td, th, code, li {
   font-size: 17px;
+  font-size: 1.0625rem;
   line-height: 1.5em;
 }
 
@@ -598,6 +639,7 @@ blockquote {
   position: relative;
   font-style: italic;
   font-size: 19px;
+  font-size: 1.1875rem;
 }
 
 blockquote::before {
@@ -637,6 +679,9 @@ footer .nav-items {
   justify-content: flex-end;
   align-items: center;
 }
+footer .mobile-ha-social-media {
+  display: none;
+}
 footer .ha-logo {
   grid-area: ha-logo;
   display: flex;
@@ -677,6 +722,7 @@ footer hr:last-of-type {
 p.copyright {
   margin: 0;
   font-size: 16px;
+  font-size: 1rem;
   color: #F2F2F2;
 }
 p.copyright a {
@@ -724,7 +770,9 @@ p.copyright a {
   }
   header nav > ul > li > a {
     margin-bottom: 50px;
+    margin-bottom: 3.125rem;
     font-size: 16px;
+    font-size: 1rem;
     line-height: 1.4em
   }
   header nav > ul > li:last-child {
@@ -800,6 +848,7 @@ p.copyright a {
     margin-left: 0;
     margin: 20px 0px;
     font-size: 16px;
+    font-size: 1rem;
   }
   footer hr {
     margin: 20px 0px;
@@ -827,6 +876,7 @@ p.copyright a {
   padding: 6px;
   position: absolute;
   top: -40px;
+  top: -2.35em;
   left: 0px;
   color: white;
   border-right: 1px solid white;
@@ -850,9 +900,21 @@ p.copyright a {
 
 /* Mobile View */
 @media (max-width: 600px) {
-   body, p, td, th, code, li {
-     font-size: 16px;
-   }
+  body, p, td, th, code, li {
+    font-size: 16px;
+    font-size: 1rem;
+  }
+
+  .title-lg {
+    font-size: 40px;
+    font-size: 2.5rem;
+    font-size: min(2.5rem,15vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */
+  }
+
+  h2 {
+    font-size: min(1.5rem,12vw); /* Cap max font size on mobile, if possible. Allows 200% font-size. */
+  }
+
   /* Header */
   .top-header, footer {
     position: relative;
@@ -865,6 +927,7 @@ p.copyright a {
   }
   a.navigation-logo {
     min-width: auto;
+    max-width: 75vw;
   }
   header nav > ul > li > * {
     margin: 0;
@@ -872,6 +935,7 @@ p.copyright a {
   header nav > ul > li > a {
     margin-bottom: 50px;
     font-size: 16px;
+    font-size: 1rem;
     line-height: 1.4em
   }
   header nav > ul > li:last-child {
@@ -920,24 +984,31 @@ p.copyright a {
     margin-top: 20px;
   }
 
+  .main {
+    display: block;
+  }
+
   /* Footer */
   footer {
     grid-template-areas:
-      'home-logo language-switcher'
-      'hr hr'
-      'nav-items nav-items'
-      'ha-logo  social-media'
-      'hr-last hr-last'
-      'copyright copyright';
-    grid-template-columns: 1fr 120px 0 0;
+      'home-logo'
+      'hr'
+      'nav-items'
+      'ha-social-media'
+      'hr-last'
+      'copyright';
+    grid-template-columns: 1fr;
     grid-template-rows: auto;
   }
   footer .home-logo {
     grid-area: home-logo;
     margin: 20px 0px;
   }
-  footer .home-logo > img {
-    max-width: 40vw;
+  footer .mobile-ha-social-media {
+    display: grid;
+    grid-area: ha-social-media;
+    grid-template-areas:
+      'ha-logo social-media';
   }
   footer .ha-logo {
     grid-area: ha-logo;
@@ -962,12 +1033,14 @@ p.copyright a {
     margin-left: 0;
     margin: 20px 0px;
     font-size: 16px;
+    font-size: 1rem;
   }
   footer .language-switcher {
     grid-area: language-switcher;
   }
   p.copyright {
     font-size: 12px;
+    font-size: 0.75rem;
   }
   footer .copyright {
     grid-area: copyright;
@@ -985,4 +1058,8 @@ p.copyright a {
   footer hr:last-of-type {
     display: block;
   }
+
+  .not-mobile {
+    display: none !important;
+  }
 }
diff --git a/src/static/css/index.css b/src/static/css/index.css
index 903c6a72c86..107e7bda101 100644
--- a/src/static/css/index.css
+++ b/src/static/css/index.css
@@ -7,7 +7,9 @@ header.alt-bg {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   padding-bottom: 900px;
+  padding-bottom: 52.94em;
   margin-bottom: -900px;
+  margin-bottom: -52.94em;
 }
 
 /* Add fall back background color in case SVG fails to load so text is still readable */
@@ -64,6 +66,7 @@ header .container {
 .intro h2 {
   font-weight: 300;
   font-size: 30px;
+  font-size: 1.875rem;
 }
 
 p {
@@ -145,6 +148,7 @@ p {
 .featured-chapter h2 {
   margin-top: 0;
   font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
 }
 
@@ -262,8 +266,10 @@ p {
 .websites-tested div,
 .data-processed div {
   font-size: 14px;
+  font-size: 0.875rem;
   font-weight: bold;
   margin: 10px 10px;
+  margin: 0.714em 0.625rem;
 }
 
 .websites-tested div:last-of-type,
@@ -335,7 +341,9 @@ p {
 
   header.alt-bg {
     padding-bottom: 1800px;
+    padding-bottom: 105.88em;
     margin-bottom: -1800px;
+    margin-bottom: -105.88em;
   }
 
   header::after {
@@ -474,7 +482,9 @@ p {
   header.alt-bg {
     background-size: cover;
     padding-bottom: 1650px;
+    padding-bottom: 103.125em;
     margin-bottom: -1650px;
+    margin-bottom: -103.125em;
   }
 
   header::after {
diff --git a/src/static/css/page.css b/src/static/css/page.css
index 31cae2c959c..80a4a4ea756 100644
--- a/src/static/css/page.css
+++ b/src/static/css/page.css
@@ -2,6 +2,7 @@
   display: grid;
   grid-template-areas: 'index content';
   grid-template-columns: 300px auto;
+  grid-template-columns: 300px calc(100% - 300px); /* auto sometimes not set correctly on font zoom */
 }
 .table-wrap-container,
 .floating-card {
@@ -141,6 +142,7 @@
   position: absolute;
   content: "\2022";
   font-size: 16px;
+  font-size: 1rem;
   display: inline-block;
   width: 1em;
   margin-left: -1em
@@ -187,6 +189,7 @@
 .authors,.authors h2{
   border-bottom: 1px solid #1A2B490A;
   font-size: 17px;
+  font-size: 1.0625rem;
 }
 .content .authors ul{
   margin:16px 0;
@@ -208,13 +211,16 @@
   display: grid;
   grid-template-areas: 'avatar info';
   grid-template-columns: 76px auto;
+  grid-template-columns: 76px calc(100% - 76px); /* auto sometimes not set correctly on font zoom */
 }
 .authors .name{
   font-size: 24px;
+  font-size: 1.5rem;
 }
 
 .authors .tagline{
   font-size: 16px;
+  font-size: 1rem;
 }
 
 .authors .avatar{
@@ -244,6 +250,7 @@
 #chapter-navigation>a{
   color:#1A2B49;
   width:50%;
+  min-width: 100px;
   display:inline-block;
   position:relative;
 }
@@ -254,18 +261,22 @@
 
 #chapter-navigation .chapter-no{
   font-size:22px;
+  font-size:1.375rem;
   font-weight:bold;
   font-style: italic
 }
 
 #chapter-navigation .chapter-title{
   font-size:18px;
+  font-size:1.125rem;
 }
 
 #chapter-navigation .arrow{
   position:absolute;
   font-size:24px;
+  font-size:1.5rem;
   top:12px;
+  top:0.5em;
 }
 
 #previous-chapter .arrow{
@@ -387,6 +398,7 @@ figure .fig-desktop {
       'index'
       'content';
     grid-template-columns: auto;
+    grid-template-columns: 100%; /* auto sometimes not set correctly on font zoom */
   }
   .main .content {
     margin-left: 0;
diff --git a/src/templates/base/2019/base.html b/src/templates/base/2019/base.html
index e4f8afbfe38..4a32e100a0a 100644
--- a/src/templates/base/2019/base.html
+++ b/src/templates/base/2019/base.html
@@ -173,6 +173,7 @@
   {% block footer %}
     <footer class="alt-bg">
       <a class="navigation-logo home-logo" href="{{ url_for('home', year=year, lang=lang) }}"><img src="/static/images/logo.svg" alt="{{ self.organization() }}" height="39" width="202"></a>
+      <hr>
       <nav aria-label="{{ self.footer_title() }}" class="nav-items">
         <ul>
           <li><a href="{{ url_for('table_of_contents', year=year, lang=lang) }}">{{ self.table_of_contents_title() }}</a></li>
@@ -188,15 +189,33 @@
           </li>
         </ul>
       </nav>
+      <div class="mobile-ha-social-media">
+        <a class="navigation-logo ha-logo" href="https://httparchive.org/">
+          <img src="/static/images/ha-home.svg" alt="{{ self.http_archive_link() }}" height="35" width="70">
+        </a>
+        <ul class="social-media">
+          <li>
+            <a href="https://twitter.com/HTTPArchive" class="twitter">
+              <img src="/static/images/twitter.png" alt="Twitter" height="65" width="80" loading="lazy" />
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/HTTPArchive/almanac.httparchive.org" class="github">
+              <img src="/static/images/github.png" alt="GitHub" height="78" width="80" loading="lazy" />
+            </a>
+          </li>
+        </ul>
+      </div>
+      <hr>
       <p class="copyright">
         <span>{{ self.copyright() }}</span>
         <br>
         <a href="{{ url_for('accessibility_statement', lang=lang) }}">{{ self.accessibility_statement() }}</a>
       </p>
-      <a class="navigation-logo ha-logo" href="https://httparchive.org/">
+      <a class="navigation-logo ha-logo not-mobile" href="https://httparchive.org/">
         <img src="/static/images/ha-home.svg" alt="{{ self.http_archive_link() }}" height="35" width="70">
       </a>
-      <ul class="social-media">
+      <ul class="social-media not-mobile">
         <li>
           <a href="https://twitter.com/HTTPArchive" class="twitter">
             <img src="/static/images/twitter.png" alt="Twitter" height="65" width="80" loading="lazy" />
@@ -208,8 +227,6 @@
           </a>
         </li>
       </ul>
-      <hr>
-      <hr>
     </footer>
   {% endblock %}
   {% block scripts %}
diff --git a/src/templates/base/2019/contributors.html b/src/templates/base/2019/contributors.html
index 40ce115ed44..ce372d2594c 100644
--- a/src/templates/base/2019/contributors.html
+++ b/src/templates/base/2019/contributors.html
@@ -106,7 +106,9 @@
   text-align: center;
   font-style: italic;
   font-size: 17px;
+  font-size: 1.0625rem;
   margin-bottom: 10px;
+  margin-bottom: 0.588em;
 }
 
 .contributor-social {
@@ -126,6 +128,7 @@
 
 .contributor-team {
   font-size: 14px;
+  font-size: 0.875rem;
   color: #757575;
 }
 .contributor-team::after {
diff --git a/src/templates/base/2019/error.html b/src/templates/base/2019/error.html
index b435163818e..0bed321f70c 100644
--- a/src/templates/base/2019/error.html
+++ b/src/templates/base/2019/error.html
@@ -21,6 +21,7 @@
 }
 .error-message {
   font-size: 20px;
+  font-size: 1.25rem;
   font-weight: bold;
   font-style: italic;
 }
diff --git a/src/templates/en/2019/chapters/resource-hints.html b/src/templates/en/2019/chapters/resource-hints.html
index 71d1505583f..754a94504bb 100644
--- a/src/templates/en/2019/chapters/resource-hints.html
+++ b/src/templates/en/2019/chapters/resource-hints.html
@@ -105,9 +105,11 @@ <h3 id="prefetch">
 </p>
 <h2 id="syntax"><a href="#syntax" class="anchor-link">Syntax</a></h2>
 <p>
-  97% of resource hint usage relied on using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> tag to specify a resource hint. For example, <code>&lt;link rel="prefetch" href="shopping-cart.js"&gt;</code>.
+  97% of resource hint usage relied on using the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> tag to specify a resource hint. For example:
 </p>
-<p>Only 3% of resource hint usage used <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link">HTTP headers</a> to specify resource hints. For example, <code>Link: &lt;https://example.com/shopping-cart.js&gt;; rel=prefetch</code>.</p>
+<pre><code>&lt;link rel="prefetch" href="shopping-cart.js"&gt;</code></pre>
+<p>Only 3% of resource hint usage used <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link">HTTP headers</a> to specify resource hints. For example:</p>
+<pre><code>Link: &lt;https://example.com/shopping-cart.js&gt;; rel=prefetch</code></pre>
 <p>Because the usage of resource hints in HTTP headers is so low, the remainder of this chapter will focus solely on analyzing the usage of resource hints in conjunction with the <code>&lt;link&gt;</code> tag. However, it's worth noting that in future years, usage of resource hints in HTTP headers may increase as <a href="./http2#http2-push">HTTP/2 Push</a> is adopted. This is due to the fact that HTTP/2 Push has repurposed the HTTP preload <code>Link</code> header as a signal to push resources.</p>
 <h2 id="resource-hints"><a href="#resource-hints" class="anchor-link">Resource hints</a></h2>
 <p class="note">Note: There was no noticeable difference between the usage patterns for resource hints on mobile versus desktop. Thus, for the sake of conciseness, this chapter only includes the statistics for mobile.</p>
@@ -228,7 +230,8 @@ <h2 id="the-crossorigin-attribute">
   </div>
   <figcaption><a href="#fig-3" class="anchor-link">Figure 3.</a> Adoption of the <code>crossorigin</code> attribute as a percent of resource hint instances.</figcaption>
 </figure>
-<p>In the context of resource hints, usage of the <code>crossorigin</code> attribute enables them to match the CORS mode of the resources they are supposed to match and indicates the credentials to include in the request. For example: <code>&lt;link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous"&gt;</code> enables CORS and indicates that no credentials should be included for those cross-origin requests.</p>
+<p>In the context of resource hints, usage of the <code>crossorigin</code> attribute enables them to match the CORS mode of the resources they are supposed to match and indicates the credentials to include in the request. For example, <code>anonymous</code> enables CORS and indicates that no credentials should be included for those cross-origin requests:</p>
+<pre><code>&lt;link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous"&gt;</code></pre>
 <p>Although other HTML elements support the crossorigin attribute, this analysis only looks at usage with resource hints.</p>
 <h2 id="the-as-attribute">
   <a href="#the-as-attribute" class="anchor-link">The <code>as</code> attribute</a>
diff --git a/src/templates/fr/2019/chapters/resource-hints.html b/src/templates/fr/2019/chapters/resource-hints.html
index 08c08ff39fe..539bdbfa23f 100644
--- a/src/templates/fr/2019/chapters/resource-hints.html
+++ b/src/templates/fr/2019/chapters/resource-hints.html
@@ -106,9 +106,11 @@ <h3 id="prefetch">
 <h2 id="syntaxe"><a href="#syntaxe" class="anchor-link">Syntaxe</a></h2>
 <p>
   97&nbsp;% des usages d'indices de ressources sont spécifiés par le tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a
-  >. Par exemple, <code>&lt;link rel="prefetch" href="shopping-cart.js"&gt;</code>.
+  >. Par exemple&nbsp;:
 </p>
-<p>Seuls 3&nbsp;% des indices de ressources proviennent <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link">d'en-têtes HTTP</a> permettant de les spécifier. Par exemple, <code>Link: &lt;https://example.com/shopping-cart.js&gt;; rel=prefetch</code>.</p>
+<pre><code>&lt;link rel="prefetch" href="shopping-cart.js"&gt;</code></pre>
+<p>Seuls 3&nbsp;% des indices de ressources proviennent <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link">d'en-têtes HTTP</a> permettant de les spécifier. Par exemple&nbsp;:</p>
+<pre><code>Link: &lt;https://example.com/shopping-cart.js&gt;; rel=prefetch</code></pre>
 <p>Comme l'utilisation des indices de ressources dans les en-têtes HTTP est très faible, le reste de ce chapitre se concentrera uniquement sur l'analyse de l'utilisation des indices de ressources passant par la balise <code>&lt;link&gt;</code>. Cependant, il convient de noter que dans les années à venir, l'utilisation des indices de ressources dans les en-têtes HTTP pourrait augmenter avec l'adoption de <a href="./http2#http2-push">HTTP/2 Push</a>. En effet, HTTP/2 Push réutilise l'en-tête HTTP de préchargement <code>Link</code> comme un signal permettant de pousser des ressources.</p>
 <h2 id="les-indices-de-ressources"><a href="#les-indices-de-ressources" class="anchor-link">Les indices de ressources</a></h2>
 <p class="note">Note: il n'y a pas de différence notable entre l'usage des indices de ressources sur les pages web destinées aux ordinateurs ou périphériques mobiles. C'est pourquoi, par souci de concision, ce chapitre n'inclut que les statistiques relatives aux mobiles.</p>
@@ -229,7 +231,8 @@ <h2 id="lattribut-crossorigin">
   </div>
   <figcaption><a href="#fig-3" class="anchor-link">Figure 3.</a> Adoption de l'attribut <code>crossorigin</code> en pourcentage du nombre d'indices de ressources.</figcaption>
 </figure>
-<p>Dans le contexte des indices de ressources, l'utilisation de l'attribut <code>crossorigin</code> leur permet de correspondre au mode CORS des ressources auxquelles ils sont censés correspondre et indique les références à inclure dans la requête. Par exemple : <code>&lt;link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous"&gt;</code> active le mode CORS et indique qu'aucun identifiant ne doit être inclus pour ces requêtes <code>cross-origin</code>.</p>
+<p>Dans le contexte des indices de ressources, l'utilisation de l'attribut <code>crossorigin</code> leur permet de correspondre au mode CORS des ressources auxquelles ils sont censés correspondre et indique les références à inclure dans la requête. Par exemple, <code>anonymous</code> active le mode CORS et indique qu'aucun identifiant ne doit être inclus pour ces requêtes <code>cross-origin</code>&nbsp;:</p>
+<pre><code>&lt;link rel="prefetch" href="https://other-server.com/shopping-cart.css" crossorigin="anonymous"&gt;</code></pre>
 <p>Bien que d'autres éléments HTML prennent en charge l'attribut <code>crossorigin</code>, cette analyse ne porte que sur l'utilisation avec des indices de ressources.</p>
 <h2 id="lattribut-as">
   <a href="#lattribut-as" class="anchor-link">L'attribut <code>as</code></a>