10

10Body text, sections and headings

10.6

An inline section

In­line sec­tions are not num­bered, they are ef­fec­tively a sub-sub­sec­tion, you can see one in the Basic properties of the asides sec­tion of this web­site. They have a tex­tual head­ing and no over-line:

Figure 10.21 - Inline section
Figure 10.21   Inline section

In­line sec­tions are given a js-- ID (just like all the other types of sec­tion), the only dif­fer­ence is that in­line sec­tions don’t have a num­ber of their own, so I just use the num­ber of last num­bered sec­tion and add an al­pha­betic char­ac­ter at the end. If the last num­bered sec­tion were 10.1.1, then the first in­line sec­tion would have the ID:

js--100101a,

the sec­ond would be:

js--100101b, and so on.

The code it­self is al­most iden­ti­cal to the sub­sec­tion (§ 10.5):

inline section html
  1.  
  2. <!-- ****************************************************************** [WP INLINE]
  3.      SECTION INLINE
  4.      ***************************************************************-->
  5.  
  6. <section class="section-std" id="js--100101a">          <!-- Start of section         -->
  7.     <div class="rg-row sub-title-row">                  <!-- Start of subtitle row    -->
  8.         <div class="rg-col rg-span1-5"></div>           <!-- Left column (not used)   -->
  9.         <div class="rg-col rg-span3-5">                 <!-- Start of subtitle column -->
  10.             <div class="sub-title-text-box"><h4>Inline section</h4></div>
  11.         </div>                                          <!-- End of subtitle column   -->
  12.         <div class="rg-col rg-span1-5"></div>           <!-- Right column (not used)  -->
  13.     </div>                                              <!-- End of Subtitle row      -->
  14.  
  15.     <div class="rg-row">                                <!-- Start of section content -->
  16.         <div class="rg-col rg-span1-5">                 <!-- Start of left column     -->
  17.             <aside class="aside-left">                  <!-- Start of left side bar   -->
  18.                 <p>Optional left side bar with right justified<br>text</p>
  19.             </aside>                                    <!-- End of left side bar     -->
  20.         </div>                                          <!-- End of left column       -->
  21.  
  22.         <div class="rg-col rg-span3-5">                 <!-- Start of section text    -->
  23.  
  24.             <p class="hyp"><span class="all-caps">Inline section.</span> This is an inline section.</p>
  25.  
  26.         </div>                                          <!-- End of section text      -->
  27.  
  28.         <div class="rg-col rg-span1-5">                 <!-- Start of right column    -->
  29.             <aside class="aside-right">                 <!-- Start of right side bar  -->
  30.                 <p>Optional right side bar with left justified<br>text</p>
  31.             </aside>                                    <!-- End of right side bar    -->
  32.         </div>                                          <!-- End of right column      -->
  33.     </div>                                              <!-- End of section content   -->
  34. </section>                                              <!-- End of section           -->
  35. <!-- ================================================================== [WP END]      -->
  36.  
Code 10.12   Inline section HTML

Be­cause the in­line sec­tion has no num­ber, the line con­tain­ing the sub-title-num-box class is not pre­sent; this means that the sub-title-text-box floats to the left fill­ing its place with the head­ing text.

The head­ing text uses the <h4> el­e­ment in­stead of the <h3>, again, see § 10.8



End flourish image