10

10Body text, sections and headings

10.8

Additional section rows

This is just a summary of the headings mentioned in the previous sections; it shows how I’ve used the <h1>...<h6> heading elements in the different types of <section> elements: lead-in, section, subsection and inline section

10.8.1

The <h1> heading element

I haven’t discussed the <h1> element, if you remember, the <section> elements start with the <h2> heading element and progress from there to the <h6> element — I missed out the <h1> heading altogether.

The <h1> heading is used to give the chapter heading (we’ve only looked at sections so far). The chapter heading appears at the top of each web page

Figure 10.25 - Chapter heading
Figure 10.25   Chapter heading

I’ve highlighted it in Figure 10.25.

There is only one <h1> heading on a page†1 and this is always the chapter number and chapter heading text.

Chapter numbers are always in the format XX; they do not have a decimal point. Sections have the format XX.YY where XX is the chapter number and YY the section number within that chapter, subsections take this one step further with the format XX.YY.ZZ where XX and YY are the same chapter and section number, ZZ being the subsection number within the section.

The <h1> heading forms part of the <header> semantic element and I discuss this further in section 11.

†1 Prior to HTML 5 and CSS 3, it was one of the cardinal rules of HTML that there could be only one <h1> level heading. Additionally, the rule prescribed that this singular <h1> heading should denote the primary subject matter of the page. With HTML 5 and CSS 3 this rule was relaxed and each <section> semantic element could have its own <h1> heading.
In terms of this template, I use a chapter, section, subsection hierarchy that lends itself to the old fashioned way of doing things, so I stick to the old rule of just one <h1> heading per page.

10.8.2

The <h2> heading element

The <h2> heading has two uses, first (and mainly) as the heading for a standard section (highlighted below):

Figure 10.26 - Standard section h2 heading
Figure 10.26   Standard section — <h2> heading

It can also be used as the sidebar title for a lead-in section:

Figure 10.27 - Standard section h2 sidebar  heading
Figure 10.27   Standard section — <h2> sidebar heading

Let’s look at the code behind the <h2> heading, this is defined near the start of the style.css file and looks like this:

style.css
h1, h2, h3, h4, h5, h6 {                    /* set standard headings */
    font-family: 'conc-t3-r';
    font-weight: normal;
    font-feature-settings: "ss02";
    font-size: 100%
}
Code 10.14   CSS classes for the headings

This is fairly straight forward stuff, just fonts and sizes really.

Firstly, all the headings <h1>...<h6> are made identical; they all use the sans serif Concourse font:

    font-family: 'conc-t3-r';
    font-weight: normal;

The next line just makes sure that no embed font weights are used (there aren’t any in these fonts, see § 9.3)

Next I set the font to use the British stylistic set:

    font-feature-settings: "ss02";

Finally, I set the font size to be identical to the html element size (i.e. 24 pixels that is responsive, reducing to 12 pixels at a browser width of 520 px, see § 10.1.1)

    font-size: 100%

This last line is important, it imbues the headings with the responsive aspects of the html text; and while I will subsequently change the font-size (the headings are generally bigger than the html text), they will just be a scaled version of the html text font size (I use the rem unit, and this is always relative to the html text size).

Thus as the browser width becomes narrower, the headings will become smaller along with the body text, but will always maintain the same relative size difference.

The next question is “if I’ve set the <h2> font-size to be the same as the html body text, why is it bigger in the section headings?”

The answer is given in the section title, the <h2> heading is embedded in either the sub-title-num-box class (for the heading number) or the sub-title-text-box class (for the heading text); in either case it is these classes that specify the font-size (Code 10.4):

.sub-title-num-box {                        /* container for sub-title number */
   . . .
    font-size: 1.9rem;
    color: #404030;
}

The font size is set to 1.9 rem and colour to the off grey #404030 (this is also true of sub-title-text-box).

By embedding the <h2> within these classes, (in both cases the <h2> element is a child of the class) it adopts the property of the class so the font size becomes 190% of the body text size.

At this point you’ve probably gone back through your notes and are about to point out that I’m a complete idiot and don’t know what I’m talking about (I generally accept this type of criticism with the self-deprecating wisdom taught to all Englishmen at school).

“Look” you will say “in section 5.6.1 you said that later properties override earlier properties and here the <h2> tag already has a font size property and it is applied later than the sub-title classes”

And you’re right, but you must also remember that despite our charming self-deprecation, Englishmen are also taught to rule†1  — and whilst you are right, so am I. The <h2> font size declaration is:

    font-size: 100%

Notice here that I’ve specified the font size as a percentage (%) not as a rem. This is important; when I specify the size as a percentage it means that the text will be 100% of the text size of the parent element. In this case the parent element is either the sub-title-num-box or sub-title-text-box class and in both classes I’ve set the font size to be 1.9 rem. This leads to a bit of a chain (I’m assuming the browser width isn’t triggering responsive adjustments):

  1. The html class specifies that all text has a font size of 24 px

  2. sub-title-text/num-box sets its text to be 1.9 rem
    (1.9 × the html font size = 45 px)

  3. The h2 class specifies that the font size is 100% of the parent elements font size (that is 100% of the sub-title-text/num-box font size) so it remains 45 px

If I’d set the h2 font size to be 1 rem, then the sub-title-text/num-box classes could not have changed it.

When the <h2> heading is used in the sidebar, there are some other properties that have to be changed, the main one being the font family, the sidebar <h2> heading uses the Equity serif font (rather than the Concourse font); these changes are made specifically in .aside-head h2 descendent class:

.aside-head h2 {
    font-family: "eqty-ta-bi";
    font-size: 1.3rem;
    margin-top: -0.45rem;
    line-height: 1.40;
}

Rather than repeat myself, I refer you to the aside heading style section.

†1 “Rule, Britannia” the song says. The comma is important; it’s not an observation, it’s an instruction (from God, or at least from James Thomson). We’re supposed to rule.

10.8.3

The <h3> heading element

The <h3> heading is used for subsections:

Figure 10.28 - Subsection h3 heading
Figure 10.28   Subsection <h3> heading

The <h3> heading is almost identical to the <h2> standard section heading; in fact they start off being identical with the declaration in Code 10.14. However, this is qualified with the following CSS:

h3 { margin-top: 5rem; }

This just adds more white space above the heading, I’ve shown the <h2> and <h3> headings side-by-side for comparison here (the margins are in purple):

Figure 10.29 - Standard section h2 and h3 heading margin differences
Figure 10.29   Standard section — <h2> and <h3> heading margin differences

The <h3> heading needs a bigger margin because it doesn’t have an over-line (which in the case of the <h2> heading carries the margin).

The two heading are designed to have the same distance between the preceding section and the heading, this can be seen in Figure 10.29. The difference between the section and the subsection headings is that there is no line above the subsection heading — this is done to make the subsection inferior to the section

10.8.4

The <h4> heading element

The <h4> hheading is used for in-line sections:

Figure 10.30 - Inline section h4 heading
Figure 10.30   Inline section <h4> heading

The <h4> heading is almost identical to the <h3> subsection heading; they start off being identical with the declaration in Code 10.14. However, this is qualified with the following CSS:

h4, h5 { margin-top: 2rem; }

This again adds white space above the heading, but not as much as the <h3> heading (the idea being that in-line sections are inferior to the subsections). To demonstrate the difference I’ve shown the <h4> and <h3> headings side-by-side for comparison here (the margins are in purple):

Figure 10.31 - Standard section h4 and h3 heading margin differences
Figure 10.31   Standard section — <h4> left and <h3> right — heading margin differences

The <h3> heading needs a bigger margin because it doesn’t have an over-line (which in the case of the <h2> heading carries the margin).

The two heading are designed to have the same distance between the preceding section and the heading, this can be seen in Figure 10.29. The difference between the section and the subsection headings is that there is no line above the subsection heading — this is done to make the subsection inferior to the section

10.8.5

The <h5> heading element

This one’s easy, I don’t use it. It has exactly the same settings as the <h4> heading, but it doesn’t appear in the HTML.

10.8.6

The <h5> heading element

This is the invisible heading used for lead-in sections. Inline sections look like this:

Figure 10.32 - h6 invisible heading used in lead-in section headings
Figure 10.32   <h6> — invisible heading used in lead-in section headings

I’ve already explained how this works, see section 10.4.

10.8.7

Headings: a summary

Heading Used for Apperance Over-line
h1 Chapter headings Very large chapter number with smaller heading text No
h2 Standard section Large chapter number with same sized heading text Yes, thick, dark grey line
h2 Lead-in sidebar Bold and italic serif font used in the sidebar area of Lead-in sections No
h3 Subsection Large chapter number with same sized heading text No
h4 Inline section Large chapter number with same sized heading text No, and has less whitespace above it
h5 Not used Identical to h4
h6 Lead-in section Not visible Yes, thin, light grey line
Table 10.3   Headings and their usage



End flourish image