fix(elements.html): follow section heading good practices (#76)

Avoid multiple `h1` headings in the same HTML page.

Author: vihuna

elements.html

@@ -61,11 +61,11 @@ <h1>HTML5 Test Page</h1>
     <main role="main">
       <section id="text">
         <header>
-          <h1>Text</h1>
+          <h2>Text</h2>
         </header>
         <article id="text__headings">
           <header>
-            <h1>Headings</h1>
+            <h2>Headings</h2>
           </header>
           <div>
             <h1>Heading 1</h1>
@@ -81,7 +81,7 @@ <h6>Heading 6</h6>
         </article>
         <article id="text__paragraphs">
           <header>
-            <h1>Paragraphs</h1>
+            <h2>Paragraphs</h2>
           </header>
           <div>
             <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit
@@ -95,7 +95,7 @@ <h1>Paragraphs</h1>
         </article>
         <article id="text__blockquotes">
           <header>
-            <h1>Blockquotes</h1>
+            <h2>Blockquotes</h2>
           </header>
           <div>
             <blockquote>
@@ -112,21 +112,21 @@ <h1>Blockquotes</h1>
         </article>
         <article id="text__lists">
           <header>
-            <h1>Lists</h1>
+            <h2>Lists</h2>
           </header>
           <div>
-            <h3>Definition list</h3>
+            <h4>Definition list</h4>
             <dl>
               <dt>Definition List Title</dt>
               <dd>This is a definition list division.</dd>
             </dl>
-            <h3>Ordered List</h3>
+            <h4>Ordered List</h4>
             <ol>
               <li>List Item 1</li>
               <li>List Item 2</li>
               <li>List Item 3</li>
             </ol>
-            <h3>Unordered List</h3>
+            <h4>Unordered List</h4>
             <ul>
               <li>List Item 1</li>
               <li>List Item 2</li>
@@ -139,7 +139,7 @@ <h3>Unordered List</h3>
         </article>
         <article id="text__hr">
           <header>
-            <h1>Horizontal rules</h1>
+            <h2>Horizontal rules</h2>
           </header>
           <div>
             <hr>
@@ -150,7 +150,7 @@ <h1>Horizontal rules</h1>
         </article>
         <article id="text__tables">
           <header>
-            <h1>Tabular data</h1>
+            <h2>Tabular data</h2>
           </header>
           <table>
             <caption>Table Caption</caption>
@@ -209,13 +209,13 @@ <h1>Tabular data</h1>
         </article>
         <article id="text__code">
           <header>
-            <h1>Code</h1>
+            <h2>Code</h2>
           </header>
           <div>
             <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
             <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
             <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
-            <h2>Pre-formatted text</h2>
+            <h3>Pre-formatted text</h3>
             <pre>P R E F O R M A T T E D T E X T
   ! " # $ % &amp; ' ( ) * + , - . /
   0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@@ -230,7 +230,7 @@ <h2>Pre-formatted text</h2>
         </article>
         <article id="text__inline">
           <header>
-            <h1>Inline elements</h1>
+            <h2>Inline elements</h2>
           </header>
           <div>
             <p><a href="#!">This is a text link</a>.</p>
@@ -261,7 +261,7 @@ <h1>Inline elements</h1>
         </article>
         <article id="text__comments">
           <header>
-            <h1>HTML Comments</h1>
+            <h2>HTML Comments</h2>
           </header>
           <div>
             <p>There is comment here:
@@ -279,20 +279,20 @@ <h1>HTML Comments</h1>
       </section>
       <section id="embedded">
         <header>
-          <h1>Embedded content</h1>
+          <h2>Embedded content</h2>
         </header>
         <article id="embedded__images">
           <header>
-            <h2>Images</h2>
+            <h3>Images</h3>
           </header>
           <div>
-            <h3>No <code>&lt;figure&gt;</code> element</h3>
+            <h4>No <code>&lt;figure&gt;</code> element</h4>
             <p><img src="https://picsum.photos/seed/elems-1/1000/600" alt="Image alt text" width="750" height="400">
             </p>
-            <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
+            <h4>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h4>
             <figure><img src="https://picsum.photos/seed/elems-2/600/400" alt="Image alt text" width="600"
                 height="400"></figure>
-            <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
+            <h4>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h4>
             <figure>
               <img src="https://picsum.photos/seed/elems-3/600/800" alt="Image alt text" width="600" height="800">
               <figcaption>Here is a caption for this image.</figcaption>
@@ -304,7 +304,7 @@ <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaptio
         </article>
         <article id="embedded__audio">
           <header>
-            <h2>Audio</h2>
+            <h3>Audio</h3>
           </header>
           <div><audio controls="">audio</audio></div>
           <footer>
@@ -313,7 +313,7 @@ <h2>Audio</h2>
         </article>
         <article id="embedded__video">
           <header>
-            <h2>Video</h2>
+            <h3>Video</h3>
           </header>
           <div><video controls="">video</video></div>
           <footer>
@@ -322,7 +322,7 @@ <h2>Video</h2>
         </article>
         <article id="embedded__canvas">
           <header>
-            <h2>Canvas</h2>
+            <h3>Canvas</h3>
           </header>
           <div><canvas>canvas</canvas></div>
           <footer>
@@ -331,7 +331,7 @@ <h2>Canvas</h2>
         </article>
         <article id="embedded__meter">
           <header>
-            <h2>Meter</h2>
+            <h3>Meter</h3>
           </header>
           <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
           <footer>
@@ -340,7 +340,7 @@ <h2>Meter</h2>
         </article>
         <article id="embedded__progress">
           <header>
-            <h2>Progress</h2>
+            <h3>Progress</h3>
           </header>
           <div><progress>progress</progress></div>
           <footer>
@@ -349,7 +349,7 @@ <h2>Progress</h2>
         </article>
         <article id="embedded__svg">
           <header>
-            <h2>Inline SVG</h2>
+            <h3>Inline SVG</h3>
           </header>
           <div><svg width="100px" height="100px">
               <circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle>
@@ -360,7 +360,7 @@ <h2>Inline SVG</h2>
         </article>
         <article id="embedded__iframe">
           <header>
-            <h2>IFrame</h2>
+            <h3>IFrame</h3>
           </header>
           <div><iframe src="index.html" height="300"></iframe></div>
           <footer>
@@ -370,7 +370,7 @@ <h2>IFrame</h2>
       </section>
       <section id="forms">
         <header>
-          <h1>Form elements</h1>
+          <h2>Form elements</h2>
         </header>
         <form>
           <fieldset id="forms__input">