Added noopener value to external links

https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/

Author: ericwbailey

index.html

@@ -68,10 +68,10 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
     <h2 id="title__about">About</h2>
 
     <p>
-        Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, <code>&lt;command&gt;</code>, and <code>&lt;menu&gt;</code> tags.
+        Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, <code>&lt;command&gt;</code>, and <code>&lt;menu&gt;</code> tags.
     </p>
     <p>
-        Reference <a rel="external" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
+        Reference <a rel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
     </p>
 </aside><!-- End of #section__about -->
 
@@ -131,7 +131,7 @@ <h3 id="subtitle__content">Content</h3>
     <div id="subsection__links" role="region" aria-labelledby="subtitle__links"><!-- Start of #subsection__links -->
         <h3 id="subtitle__links">Links</h3>
         <p>
-            And even if he did catch the <a href="#">train</a> he would not avoid his boss's anger as the <a href="#" rel="external">office assistant</a> would have been there to see the five o'clock train go, he would have put in his report about <a href="https://twitter.com/twitter" rel="external">Gregor</a>'s not being there a long time ago. The office assistant was the boss's man, spineless, and with no understanding. What about if he reported sick? But that would be <a href="#">extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill</a>. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor's recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what's more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual.
+            And even if he did catch the <a href="#">train</a> he would not avoid his boss's anger as the <a href="#" rel="external noopener">office assistant</a> would have been there to see the five o'clock train go, he would have put in his report about <a href="https://twitter.com/twitter" rel="external noopener">Gregor</a>'s not being there a long time ago. The office assistant was the boss's man, spineless, and with no understanding. What about if he reported sick? But that would be <a href="#">extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill</a>. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor's recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what's more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual.
         </p>
         <a href="#">
             <h2>Block-level link title</h2>
@@ -264,7 +264,7 @@ <h3 id="subtitle__symbols">Symbols</h3>
             <li><span aria-label="Not equals">≠</span></li>
         </ul>
         <p>
-            <small>Note: Certain screen readers will not <a rel="external" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code>aria-label</code> to ensure the symbol is read.</small>
+            <small>Note: Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code>aria-label</code> to ensure the symbol is read.</small>
         </p>
     </div><!-- End of #subsection__symbols -->
 </section><!-- End of #section__text-level -->
@@ -439,7 +439,7 @@ <h2 id="subsection__audio">Audio</h2><!-- Start of #subsection__audio -->
             srclang="en"
             kind="captions" />
         Your browser does not support the <code>&lt;audio&gt;</code> element.
-        Please <a rel="external" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
+        Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
     </audio><!-- End of #subsection__audio -->
 
     <h2 id="subsection__video">Video</h2><!-- Start of #subsection__video -->
@@ -461,7 +461,7 @@ <h2 id="subsection__video">Video</h2><!-- Start of #subsection__video -->
             srclang="en"
             kind="captions" />
         Your browser does not support the <code>&lt;video&gt;</code> element.
-        Please <a rel="external" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
+        Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
     </video><!-- End of #subsection__video -->
 
     <p>
@@ -491,7 +491,7 @@ <h2 id="subsection__object">Object</h2><!-- Start of #subsection__object -->
             height="390">
         </embed>
         Your browser does not support the <code>&lt;object&gt;</code> element.
-        Please <a rel="external" href="http://browsehappy.com/">consider upgrading your browser</a> or <a rel="external" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
+        Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a rel="external noopener" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
     </object><!-- End of #subsection__object -->
 
     <h2 id="subsection__canvas">Canvas</h2><!-- Start of #subsection__canvas -->
@@ -500,7 +500,7 @@ <h2 id="subsection__canvas">Canvas</h2><!-- Start of #subsection__canvas -->
         width="400"
         height="400">
         Your browser does not support the <code>&lt;canvas&gt;</code> element.
-        Please <a rel="external" href="http://browsehappy.com/">consider upgrading your browser</a>.
+        Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>.
     </canvas><!-- End of #subsection__canvas -->
 </section><!-- End of #section__embedded -->
 
@@ -896,7 +896,7 @@ <h2 id="title__forms">Forms</h2>
             </span>
 
             <p>
-                <small>Note: Use <code>tabindex="0"</code> in conjunction with <code>role="button"</code> to ensure that the text button is focusable. Use <code>cursor: pointer;</code> in the CSS to communicate that it is interactable. Learn more about <a rel="external" href="https://css-tricks.com/use-button-element/"><cite>When To Use The Button Element</cite></a>.</small>
+                <small>Note: Use <code>tabindex="0"</code> in conjunction with <code>role="button"</code> to ensure that the text button is focusable. Use <code>cursor: pointer;</code> in the CSS to communicate that it is interactable. Learn more about <a rel="external noopener" href="https://css-tricks.com/use-button-element/"><cite>When To Use The Button Element</cite></a>.</small>
             </p>
 
         </fieldset><!-- End of #subsection__buttons -->
@@ -1066,7 +1066,7 @@ <h4 id="subtitle__buttons">Buttons</h4>
                 </button>
 
                 <p>
-                    <small>Note: Use <code>:hover</code>, <code>:focus</code>, and <code>:active</code> selectors to control the other button states. Learn more about <a rel="external" href="https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.b1p96hsrw">Buttons in Design Systems</a>.</small>
+                    <small>Note: Use <code>:hover</code>, <code>:focus</code>, and <code>:active</code> selectors to control the other button states. Learn more about <a rel="external noopener" href="https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.b1p96hsrw">Buttons in Design Systems</a>.</small>
                 </p>
             </div><!-- End of #subsection__buttons -->
         </fieldset><!-- End of #subsection__states-and-validation -->
@@ -1478,7 +1478,7 @@ <h4 id="subtitle__buttons">Buttons</h4>
             </label>
 
             <p>
-                <small>Note: Be sure to reference the <a rel="external" href="http://spaceninja.com/2015/12/08/falsehoods-programmers-believe/"><cite>Falsehoods Programmers Believe</cite></a> collection for creating bulletproof inputs.</small>
+                <small>Note: Be sure to reference the <a rel="external noopener" href="http://spaceninja.com/2015/12/08/falsehoods-programmers-believe/"><cite>Falsehoods Programmers Believe</cite></a> collection for creating bulletproof inputs.</small>
             </p>
 
         </fieldset><!-- End of #subsection__autocomplete -->
@@ -1492,7 +1492,7 @@ <h4 id="subtitle__buttons">Buttons</h4>
     <h2 id="title__credit">Credit</h2>
 
     <p>
-        Inspired by <a rel="external" href="http://mrmrs.cc/">Adam Morse</a>'s <a rel="external" href="https://github.com/mrmrs/html"><cite>mrmrs/html</cite></a>.
+        Inspired by <a rel="external noopener" href="http://mrmrs.cc/">Adam Morse</a>'s <a rel="external noopener" href="https://github.com/mrmrs/html"><cite>mrmrs/html</cite></a>.
     </p>
 </footer><!-- End of #section__credit -->