Remove trailing slashes from void elements (#3353)

* Remove trailing slashes from void elements

* Revert SVG changes

* more updates

Author: tunetheweb

src/content/en/2020/http.md

@@ -346,7 +346,7 @@ This <a hreflang="en" href="https://github.com/andydavies/http2-prioritization-i
     <thead>
       <tr>
         <th>CDN</th>
-        <th>Prioritize <br />correctly</th>
+        <th>Prioritize <br>correctly</th>
         <th>Desktop</th>
         <th>Mobile</th>
       </tr>

src/content/en/2020/media.md

@@ -43,7 +43,7 @@ For example:
 
 ```html
 <img srcset="images/example_3x.jpg 3x, images/example_2x.jpg 2x"
-      src="images/example.jpg" alt="..." />
+      src="images/example.jpg" alt="...">
 ```
 
 Around 26.5% of all pages now include `srcset`
@@ -79,15 +79,15 @@ When providing the candidate list to the user agent, we have two mechanisms to a
 
 ```html
 <img srcset="images/example_3x.jpg 3x, images/example_2x.jpg 2x"
-      src="images/example.jpg" alt="..." />
+      src="images/example.jpg" alt="...">
 ```
 
 `w` descriptors describe the candidate's pixel width, along with a `sizes` attribute that is used to select the appropriate image.
 
 ```html
 <img srcset="images/example_small.jpg 600w, images/example_medium.jpg 1400w, images/example_large.jpg 2400w"
       sizes="100vw"
-      src="images/example_fallback.jpg" alt="..." />
+      src="images/example_fallback.jpg" alt="...">
 ```
 
 Both approaches enable the user agent to mathematically factor in the current device pixel ratio when assessing the most appropriate image candidate.
@@ -115,7 +115,7 @@ For example:
 ```html
 <img sizes="(min-width: 640px) 50vw, 100vw"
       srcset="images/example_small.jpg 600w, images/example_medium.jpg 1400w, images/example_large.jpg 2400w"
-      src="images/example_fallback.jpg" alt="..." />
+      src="images/example_fallback.jpg" alt="...">
 ```
 
 {{ figure_markup(
@@ -154,8 +154,8 @@ While there are some services and image CDNs which can provide auto-format switc
 
 ```html
 <picture>
-    <source type="image/webp" srcset="images/example.webp" />
-    <img src="images/example.jpg" alt="..." />
+    <source type="image/webp" srcset="images/example.webp">
+    <img src="images/example.jpg" alt="...">
 </picture>
 ```
 
@@ -191,11 +191,11 @@ Here is an example of the markup syntax that could be used to offer multiple for
 
 ```html
 <picture>
-  <source type="image/avif" srcset="images/example.avif" />
-  <source type="image/webp" srcset="images/example.webp" />
-  <source type="image/jp2" srcset="images/example.jp2" />
-  <source type="image/vnd.ms-photo"  srcset="images/example.jxr" />
-  <img src="images/example.jpg" alt="Description" />
+  <source type="image/avif" srcset="images/example.avif">
+  <source type="image/webp" srcset="images/example.webp">
+  <source type="image/jp2" srcset="images/example.jp2">
+  <source type="image/vnd.ms-photo"  srcset="images/example.jxr">
+  <img src="images/example.jpg" alt="Description">
 </picture>
 ```
 
@@ -235,11 +235,11 @@ In this example, we are changing out the aspect ratio of the served media, from
 ```html
 <picture>
   <source media="(max-width: 780px)"
-          srcset="image/example_square.jpg 1x, image/example_square_2x.jpg 2x" />
+          srcset="image/example_square.jpg 1x, image/example_square_2x.jpg 2x">
   <source media="(max-width: 1400px)"
-          srcset="image/example_4_3_aspect.jpg 1x, image/example_4_3_aspect_2x.jpg 2x" />
-  <source srcset="image/example_16_9_aspect.jpg 1x, image/example_16_9_aspect_2x.jpg 2x"/>
-  <img src="image/example_fallback.jpg" alt="..." />
+          srcset="image/example_4_3_aspect.jpg 1x, image/example_4_3_aspect_2x.jpg 2x">
+  <source srcset="image/example_16_9_aspect.jpg 1x, image/example_16_9_aspect_2x.jpg 2x">
+  <img src="image/example_fallback.jpg" alt="...">
 </picture>
 ```
 
@@ -267,7 +267,7 @@ Example syntax:
           media="(min-width: 960px) and (orientation: landscape)">
   <source srcset="images/example_tall.jpg"
           media="(min-width: 960px) and (orientation: portrait)">
-  <img src="..." alt="..." />
+  <img src="..." alt="...">
 </picture>
 ```
 

src/content/en/2021/accessibility.md

@@ -183,11 +183,11 @@ Before the introduction of HTML5, ARIA landmark roles were needed to accomplish
   <table>
     <thead>
       <tr>
-        <th>HTML5 <br />element</th>
-        <th>ARIA role <br />equivalent</th>
-        <th>Pages with <br />element</th>
-        <th>Pages with <br />role</th>
-        <th>Pages with <br />element or role</th>
+        <th>HTML5 <br>element</th>
+        <th>ARIA role <br>equivalent</th>
+        <th>Pages with <br>element</th>
+        <th>Pages with <br>role</th>
+        <th>Pages with <br>element or role</th>
       </tr>
     </thead>
     <tbody>

src/content/en/2021/security.md

@@ -974,7 +974,7 @@ When looking at the adoption of certain security features such as CSP and `X-Fra
       <tr>
         <td>Blogger (Blogs)</td>
         <td>
-          X-Content-Type-Options (99.6%),<br/>
+          X-Content-Type-Options (99.6%),<br>
           X-XSS-Protection (99.6%)
         </td>
       </tr>
@@ -986,7 +986,7 @@ When looking at the adoption of certain security features such as CSP and `X-Fra
         <td>Drupal (CMS)</td>
         <td>
           X-Content-Type-Options (77.9%),
-          <br />
+          <br>
           X-Frame-Options (83.1%)
         </td>
       </tr>
@@ -997,35 +997,35 @@ When looking at the adoption of certain security features such as CSP and `X-Fra
       <tr>
         <td>Shopify (E-commerce)</td>
         <td>
-          Content-Security-Policy (96.4%),<br/>
-          Expect-CT (95.5%),<br/>
-          Report-To (95.5%),<br/>
-          Strict-Transport-Security (98.2%),<br/>
-          X-Content-Type-Options (98.3%),<br/>
-          X-Frame-Options (95.2%),<br/>
+          Content-Security-Policy (96.4%),<br>
+          Expect-CT (95.5%),<br>
+          Report-To (95.5%),<br>
+          Strict-Transport-Security (98.2%),<br>
+          X-Content-Type-Options (98.3%),<br>
+          X-Frame-Options (95.2%),<br>
           X-XSS-Protection (98.2%)
         </td>
       </tr>
       <tr>
         <td>Squarespace (CMS)</td>
         <td>
-          Strict-Transport-Security (87.9%),<br/>
+          Strict-Transport-Security (87.9%),<br>
           X-Content-Type-Options (98.7%)
         </td>
       </tr>
       <tr>
         <td>Sucuri (CDN)</td>
         <td>
-          Content-Security-Policy (84.0%),<br/>
-          X-Content-Type-Options (88.8%),<br/>
-          X-Frame-Options (88.8%),<br/>
+          Content-Security-Policy (84.0%),<br>
+          X-Content-Type-Options (88.8%),<br>
+          X-Frame-Options (88.8%),<br>
           X-XSS-Protection (88.7%)
         </td>
       </tr>
       <tr>
         <td>Wix (Blogs)</td>
         <td>
-          Strict-Transport-Security (98.8%),<br/>
+          Strict-Transport-Security (98.8%),<br>
           X-Content-Type-Options (99.4%)
         </td>
       </tr>

src/content/en/2022/accessibility.md

@@ -211,11 +211,11 @@ Landmarks help divide a web page into thematic regions that makes it easier for
   <table>
     <thead>
       <tr>
-        <th>HTML5 <br />element</th>
-        <th>ARIA role <br />equivalent</th>
-        <th>Pages with <br /> element</th>
-        <th>Pages with <br /> role</th>
-        <th>Pages with <br /> element or role</th>
+        <th>HTML5 <br>element</th>
+        <th>ARIA role <br>equivalent</th>
+        <th>Pages with <br> element</th>
+        <th>Pages with <br> role</th>
+        <th>Pages with <br> element or role</th>
       </tr>
     </thead>
     <tbody>

src/content/en/2022/http.md

@@ -113,7 +113,7 @@ With the challenges to HTTP/2 priorities, a new prioritization scheme was needed
 While most of the resource priorities are decided by the browser itself, developers can now also use the new <a hreflang="en" href="https://web.dev/priority-hints/">priority hints</a> to tweak the priority of a particular resource. Priority hints can be specified via the `fetchpriority` attribute in the HTML. For example, suppose that a website would like to prioritize a hero image, it can add `fetchpriority` to the image tag:
 
 ```html
-<img src="hero.png" fetchpriority="high" />
+<img src="hero.png" fetchpriority="high">
 ```
 
 Priority hints can be very effective in improving user experience. For example, <a hreflang="en" href="https://www.etsy.com/codeascraft/priority-hints-what-your-browser-doesnt-know-yet">Etsy conducted an experiment</a> and observed a 4% improvement in Largest Contentful Paint (LCP) on product listing pages that included priority hints for certain images.
@@ -158,7 +158,7 @@ Given the challenges to using HTTP/2 Push, and it's deprecation from Chrome, dev
 Developers can use Preload as one alternative to pre-emptively request a resource that will be used later in a page load. This is enabled by including[`<link rel="preload">`](https://developer.mozilla.org/docs/Web/HTML/Link_types/preload) in the `<head>` section of the HTML. For example:
 
 ```html
-<link rel="preload" href="/css/style.css" as="style" />
+<link rel="preload" href="/css/style.css" as="style">
 ```
 
 Or as a `Link` HTTP header:

src/content/en/2022/mobile-web.md

@@ -213,7 +213,7 @@ Pages that fail the audit generally have more than one failing link. The median
 
 ### Zooming and scaling
 
-Mobile devices have become a big part of daily life for most people, and the expectation is that interaction with mobile web content should be quick and easy. How websites handle zooming and scaling can go a long way to improving interactions on mobile. There are different takes on this, and while most will agree that you need to set a proper initial scale in the viewport for mobile users (`&lt;meta name="viewport" content="width=device-width, initial-scale=1">`), there is not universal agreement about the second part of a viewport setting, which controls if you should or shouldn’t disable scaling and zooming (`…user-scalable=no" />` or perhaps `…user-scalable=yes" />`). Most authorities, <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/proposed/">including the W3C</a>, suggest that restricting scaling and zooming can create a bad user experience and adversely impact accessibility, so it should be avoided. Settings for `minimum-scale` and `maximum-scale` can also be set, and these are often safer limits, if a developer believes that limits are needed.
+Mobile devices have become a big part of daily life for most people, and the expectation is that interaction with mobile web content should be quick and easy. How websites handle zooming and scaling can go a long way to improving interactions on mobile. There are different takes on this, and while most will agree that you need to set a proper initial scale in the viewport for mobile users (`&lt;meta name="viewport" content="width=device-width, initial-scale=1">`), there is not universal agreement about the second part of a viewport setting, which controls if you should or shouldn’t disable scaling and zooming (`…user-scalable=no">` or perhaps `…user-scalable=yes">`). Most authorities, <a hreflang="en" href="https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/proposed/">including the W3C</a>, suggest that restricting scaling and zooming can create a bad user experience and adversely impact accessibility, so it should be avoided. Settings for `minimum-scale` and `maximum-scale` can also be set, and these are often safer limits, if a developer believes that limits are needed.
 
 Zooming can be a good workaround for a user who is visually impaired, or anyone who just doesn’t have their reading glasses handy when they need them. On the other hand, it can be hard to build sites that universally scale well on mobile. There are many different font size settings that would need to be accommodated, and getting it wrong can make the site much harder to interact with. This is why some designers prefer to prevent scaling and zooming, to ensure that the page renders in a highly predictable way that is not impacted by scaling and zooming. While this is true, disabling zooming and scaling impedes the usability of a mobile site, and thus, should be avoided for the sake of accessibility.
 

src/content/en/2022/security.md

@@ -1098,41 +1098,41 @@ Another factor that can strongly influence the adoption of certain security mech
       <tr>
         <td>Blogger</td>
         <td>
-          <code>Content-Security-Policy</code> (99%),<br/>
-          <code>X-Content-Type-Options</code> (99%),<br/>
-          <code>X-Frame-Options</code> (99%),<br/>
+          <code>Content-Security-Policy</code> (99%),<br>
+          <code>X-Content-Type-Options</code> (99%),<br>
+          <code>X-Frame-Options</code> (99%),<br>
           <code>X-XSS-Protection</code> (99%)
         </td>
       </tr>
       <tr>
         <td>Wix</td>
         <td>
-          <code>Strict-Transport-Security</code> (99%),<br/>
+          <code>Strict-Transport-Security</code> (99%),<br>
           <code>X-Content-Type-Options</code> (99%)
         </td>
       </tr>
       <tr>
         <td>Drupal</td>
         <td>
-          <code>X-Content-Type-Options</code> (77%),<br/>
+          <code>X-Content-Type-Options</code> (77%),<br>
           <code>X-Frame-Options</code> (77%)
         </td>
       </tr>
       <tr>
         <td>Squarespace</td>
         <td>
-          <code>Strict-Transport-Security</code> (91%),<br/>
+          <code>Strict-Transport-Security</code> (91%),<br>
           <code>X-Content-Type-Options</code> (98%)
         </td>
       </tr>
       <tr>
         <td>Google Sites</td>
         <td>
-          <code>Content-Security-Policy</code> (96%),<br/>
-          <code>Cross-Origin-Opener-Policy</code> (96%),<br/>
-          <code>Referrer-Policy</code> (96%),<br/>
-          <code>X-Content-Type-Options</code> (97%),<br/>
-          <code>X-Frame-Options</code> (97%),<br/>
+          <code>Content-Security-Policy</code> (96%),<br>
+          <code>Cross-Origin-Opener-Policy</code> (96%),<br>
+          <code>Referrer-Policy</code> (96%),<br>
+          <code>X-Content-Type-Options</code> (97%),<br>
+          <code>X-Frame-Options</code> (97%),<br>
           <code>X-XSS-Protection</code> (97%)
         </td>
       </tr>
@@ -1143,16 +1143,16 @@ Another factor that can strongly influence the adoption of certain security mech
       <tr>
         <td>Wagtail</td>
         <td>
-          <code>X-Content-Type-Options</code> (51%),<br/>
+          <code>X-Content-Type-Options</code> (51%),<br>
           <code>X-Frame-Options</code> (72%)
         </td>
       </tr>
       <tr>
         <td>Medium</td>
         <td>
-          <code>Content-Security-Policy</code> (75%),<br/>
-          <code>Expect-CT</code> (83%),<br/>
-          <code>Strict-Transport-Security</code> (84%),<br/>
+          <code>Content-Security-Policy</code> (75%),<br>
+          <code>Expect-CT</code> (83%),<br>
+          <code>Strict-Transport-Security</code> (84%),<br>
           <code>X-Content-Type-Options</code> (83%)
         </td>
       </tr>

src/content/es/2020/http.md

@@ -346,7 +346,7 @@ Este <a hreflang="en" href="https://github.com/andydavies/http2-prioritization-i
     <thead>
       <tr>
         <th>CDN</th>
-        <th>Prioriza <br />correctamente</th>
+        <th>Prioriza <br>correctamente</th>
         <th>Escritorio</th>
         <th>Móvil</th>
       </tr>

src/content/it/2020/http.md

@@ -346,7 +346,7 @@ Questa <a hreflang="en" href="https://github.com/andydavies/http2-prioritization
     <thead>
       <tr>
         <th>CDN</th>
-        <th>Assegna la priorità <br />correttamente</th>
+        <th>Assegna la priorità <br>correttamente</th>
         <th>Desktop</th>
         <th>Mobile</th>
       </tr>