close #116 | encourage to explicitly wrap sections in elements

Author: riccardoscalco

index.html

@@ -112,6 +112,29 @@ <h1>Code snippet of a section.</h1>
               <p>The example shows a section with a heading and two paragraphs, a lower level heading and another paragraph.</p>
             </figcaption>
           </figure>
+          <p>The code snippet above shows an example of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Implicit_sectioning">implicit sectioning</a>, where both the <code>&lt;h1&gt;</code> and <code>&lt;h2&gt;</code> elements are in the same section. Authors are encouraged to <em>explicitly</em> wrap sections in elements of <a href="https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#headings-and-sections">sectioning content</a>, instead of relying on the implicit sections generated by having multiple headings in one <code>&lt;section&gt;</code> element.</p>
+          <figure>
+            <pre><code>&lt;main&gt;
+  &lt;article&gt;</code>
+<mark><code>    &lt;section&gt;
+      &lt;h1&gt;...&lt;/h1&gt;
+      ...
+      &lt;section&gt;
+        &lt;h2&gt;...&lt;/h2&gt;
+        ...
+        &lt;section&gt;
+          &lt;h3&gt;...&lt;/h3&gt;
+          ...
+        &lt;/section&gt;
+      &lt;/section&gt;
+    &lt;/section&gt;</code></mark>
+<code>  &lt;/article&gt;
+&lt;/main&gt;</code></pre>
+            <figcaption>
+              <h1>Explicit sectioning.</h1>
+              <p>Sections in HTML5 can be nested, use headings of the appropriate rank for the section's nesting level. Explicit sectioning allows for <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">predictable document outlines</a> and better user experience.</p>
+            </figcaption>
+          </figure>
         </section>
 
         <section>