10.4
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:
The lead-in section just has a line (no title):
The code behind this is (I’ve missed out some of the paragraphs in the middle):
<!-- *************************************************************** [WP LEADIN] CHAPTER - LEAD IN SECTION (NO NUMBERED HEADING) ***************************************************************--> <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”.
