A subsection template | PracticalSeries: Web Development

10.5 A subsection

Subsections are very similar to a standard section, the standard section is numbered X.Y and has a thick line above it:

Figure 10.19 - Standard section — with numbered heading — Figure 10.19 Standard section — with numbered heading

A subsection is numbered X.Y.Z and doesn’t have a line above it:

Figure 10.20 - Subsection — with numbered heading, but no over line — Figure 10.20 Subsection — with numbered heading, but no over line

As you can probably guess, this is identical to the standard section but without the sub-title-line.

subsection html


<!-- ****************************************************************** [WP SUBSECTION]
     SUBSECTION - TYPICAL SUBSECTION (X.Y.Z)
     ***********************************************************************-->


<section class="section-std" id="js--100101">           <!-- Start of section         -->
    <div class="rg-row sub-title-row">                  <!-- Start of subtitle row    -->
        <div class="rg-col rg-span1-5"></div>           <!-- Left column (not used)   -->
        <div class="rg-col rg-span3-5">                 <!-- Start of subtitle column -->
            <div class="sub-title-num-box"><h3>10.1.1</h3></div>
            <div class="sub-title-text-box"><h3>Subsection</h3></div>
        </div>                                          <!-- End of subtitle column   -->
        <div class="rg-col rg-span1-5"></div>           <!-- Right column (not used)  -->
    </div>                                              <!-- End of Subtitle row      -->


    <div class="rg-row">                                <!-- Start of section content -->
        <div class="rg-col rg-span1-5">                 <!-- Start of left column     -->
            <aside class="aside-left">                  <!-- Start of left side bar   -->
                <p>Optional left side bar with right justified<br>text</p>
            </aside>                                    <!-- End of left side bar     -->
        </div>                                          <!-- End of left column       -->


        <div class="rg-col rg-span3-5">                 <!-- Start of section text    -->


            <p class="hyp"><span class="all-caps">Subsection.</span> This is a typical subsection.</p>


        </div>                                          <!-- End of section text      -->


        <div class="rg-col rg-span1-5">                 <!-- Start of right column    -->
            <aside class="aside-right">                 <!-- Start of right side bar  -->
                <p>Optional right side bar with left justified<br>text</p>
            </aside>                                    <!-- End of right side bar    -->
        </div>                                          <!-- End of right column      -->
    </div>                                              <!-- End of section content   -->
</section>                                              <!-- End of section           -->
<!-- ================================================================== [WP END]      -->

Code 10.11 Subsection HTML

The lines in green show the heading number and the heading text (just like the standard section title in § 10.3.2). The only difference is that subsection use the <h3> element instead of <h2>, see § 10.8 for an explanation of this.