10Body text, sections and headings


A lead-in section

Lead-in sections are generally used at the start of a chapter before the first numbered section (like the first page of this section section 10).

Lead-in sections are very similar to the standard section discussed previously (§ 10.3). The only difference is with the heading, a standard section has a heading and a heading number, like this:

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

The lead-in section just has a line (no title):

Figure 10.18 - Lead-in section — with no visible heading
Figure 10.18   Lead-in section — with no visible heading

The code behind this is (I’ve missed out some of the paragraphs in the middle):

lead-in section html
<!-- *************************************************************** [WP LEADIN]

<section class="section-std" id="js--980000">           <!-- 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-thinline"></div>      <!-- Thin overline            -->
            <div class="sub-title-text-box"><h6>Placeholder</h6></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-head">                  <!-- 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">Lead in section.</span></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.10   A lead-in section

The only difference between this and the standard § 10.3, is the central column of the sub-title-row (the bit shown in green).

Let’s go through it in detail:

            <div class="sub-title-thinline"></div>      <!-- Thin overline            -->
            <div class="sub-title-text-box"><h6>Placeholder</h6></div>

The first thing is I’m using the thinline class instead of the overline class (see § 10.3.2) this inserts a thin, light grey line above the start of the section; it spans the central column area.

The next bit is the main difference, although I said above that a lead-in section doesn’t have a title, it does; it’s just not visible. The heading doesn’t have a number area, it just has the sub-title-text-box class and I use the <h6> heading, in this case the heading is just “placeholder”:

            <div class="sub-title-text-box"><h6>Placeholder</h6></div>

This line replaces the sub-title-num-box and sub-title-text-box classes with the <h2> element used in the standard section:

            <div class="sub-title-num-box"><h2>10.1</h2></div>
            <div class="sub-title-text-box"><h2>Section</h2></div>

So why doesn’t the <h6> heading show up on the web page?

Well the answer is because I’ve made it invisible in the CSS. The <h6> element has the following applied to it:

h6 {                                        /* Placeholder heading - not displayed */
    margin: 0;
    display: none;

Firstly I remove its margins, and then I stop it displaying with the property:

    display: none;

This is the same display property we used to make thing line up with each other in the CSS box model (§ 6.1.3) and with the sub-title-box classes (§ 10.3.2). Here I’ve set it to none and that stops the element from being displayed at all (it simply will not appear on the screen).

Why do I have to do this?

The answer is because the <section> semantic element is required to have a title in a <hx> element and if I don’t have one it will fail the HTML validation. So I have to put a heading element in there, but I don’t actually want it to appear on the website, so I set to be invisible (display: none). It’s another useful trick.

I look at how I set the heading elements up in more detail in § 10.8.

  • Even though the <h6> heading is not visible on the web page, it should still be given a meaningful title that reflects the content of the section — this is because search engines pay attention to headings and they like them to reflect the subject matter following them. My heading of “placeholder” would not be good enough for a real web page it should perhaps be “Lead-in sections explained”.

End flourish image