10Body text, sections and headings

This is just a sum­mary of the head­ings men­tioned in the pre­vi­ous sec­tions; it shows how I’ve used the <h1>...<h6> head­ing el­e­ments in the dif­fer­ent types of <sec­tion> el­e­ments: lead-in, sec­tion, sub­sec­tion and in­line sec­tion

I haven’t dis­cussed the <h1> el­e­ment, if you re­mem­ber, the <sec­tion> el­e­ments start with the <h2> head­ing el­e­ment and progress from there to the <h6> el­e­ment — I missed out the <h1> head­ing al­to­gether.

The <h1> head­ing is used to give the chap­ter head­ing (we’ve only looked at sec­tions so far). The chap­ter head­ing ap­pears at the top of each web page

I’ve high­lighted it in Fig­ure 10.25.

There is only one <h1> head­ing on a page^†1 and this is al­ways the chap­ter num­ber and chap­ter head­ing text.

Chap­ter num­bers are al­ways in the for­mat XX; they do not have a dec­i­mal point. Sec­tions have the for­mat XX.​YY where XX is the chap­ter num­ber and YY the sec­tion num­ber within that chap­ter, sub­sec­tions take this one step fur­ther with the for­mat XX.​YY.​ZZ where XX and YY are the same chap­ter and sec­tion num­ber, ZZ being the sub­sec­tion num­ber within the sec­tion.

The <h1> head­ing forms part of the <header> se­man­tic el­e­ment and I dis­cuss this fur­ther in section 11.

The <h2> head­ing has two uses, first (and mainly) as the head­ing for a stan­dard sec­tion (high­lighted below):

It can also be used as the side­bar title for a lead-in sec­tion:

Let’s look at the code be­hind the <h2> head­ing, this is de­fined near the start of the style.​css file and looks like this:

h1, h2, h3, h4, h5, h6 {                    /* set standard headings */
    font-family: 'conc-t3-r';
    font-weight: normal;
    font-feature-settings: "ss02";
    font-size: 100%
}

This is fairly straight for­ward stuff, just fonts and sizes re­ally.

Firstly, all the head­ings <h1>...<h6> are made iden­ti­cal; they all use the sans serif Con­course 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 styl­is­tic set:

    font-feature-settings: "ss02";

Fi­nally, I set the font size to be iden­ti­cal to the html el­e­ment size (i.e. 24 pix­els that is re­spon­sive, re­duc­ing to 12 pix­els at a browser width of 520 px, see § 10.1.1)

    font-size: 100%

This last line is im­por­tant, it im­bues the head­ings with the re­spon­sive as­pects of the html text; and while I will sub­se­quently change the font-size (the head­ings are gen­er­ally big­ger than the html text), they will just be a scaled ver­sion of the html text font size (I use the rem unit, and this is al­ways rel­a­tive to the html text size).

Thus as the browser width be­comes nar­rower, the head­ings will be­come smaller along with the body text, but will al­ways main­tain the same rel­a­tive size dif­fer­ence.

The next ques­tion is “if I’ve set the <h2> font-size to be the same as the html body text, why is it big­ger in the sec­tion head­ings?”

The an­swer is given in the section title, the <h2> head­ing is em­bed­ded in ei­ther the sub-title-num-box class (for the head­ing num­ber) or the sub-title-text-box class (for the head­ing text); in ei­ther case it is these classes that spec­ify 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 em­bed­ding the <h2> within these classes, (in both cases the <h2> el­e­ment is a child of the class) it adopts the prop­erty of the class so the font size be­comes 190% of the body text size.

At this point you’ve prob­a­bly gone back through your notes and are about to point out that I’m a com­plete idiot and don’t know what I’m talk­ing about (I gen­er­ally ac­cept this type of crit­i­cism with the self-dep­re­cat­ing wis­dom taught to all Eng­lish­men at school).

“Look” you will say “in section 5.6.1 you said that later prop­er­ties over­ride ear­lier prop­er­ties and here the <h2> tag al­ready has a font size prop­erty and it is ap­plied later than the sub-title classes”

And you’re right, but you must also re­mem­ber that de­spite our charm­ing self-dep­re­ca­tion, Eng­lish­men are also taught to rule^†1  — and whilst you are right, so am I. The <h2> font size de­c­la­ra­tion is:

    font-size: 100%

No­tice here that I’ve spec­i­fied the font size as a per­cent­age (%) not as a rem. This is im­por­tant; when I spec­ify the size as a per­cent­age it means that the text will be 100% of the text size of the par­ent el­e­ment. In this case the par­ent el­e­ment is ei­ther 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 as­sum­ing the browser width isn’t trig­ger­ing re­spon­sive ad­just­ments):

1. The html class spec­i­fies 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 spec­i­fies that the font size is 100% of the par­ent el­e­ments font size (that is 100% of the sub-title-text/num-box font size) so it re­mains 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> head­ing is used in the side­bar, there are some other prop­er­ties that have to be changed, the main one being the font fam­ily, the side­bar <h2> head­ing uses the Eq­uity serif font (rather than the Con­course font); these changes are made specif­i­cally in .aside-head h2 de­scen­dent class:

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

Rather than re­peat my­self, I refer you to the aside heading style sec­tion.

The <h3> head­ing is used for sub­sec­tions:

The <h3> head­ing is al­most iden­ti­cal to the <h2> stan­dard sec­tion head­ing; in fact they start off being iden­ti­cal with the de­c­la­ra­tion in Code 10.14. How­ever, this is qual­i­fied with the fol­low­ing CSS:

h3 { margin-top: 5rem; }

This just adds more white space above the head­ing, I’ve shown the <h2> and <h3> head­ings side-by-side for com­par­i­son here (the mar­gins are in pur­ple):

The <h3> head­ing needs a big­ger mar­gin be­cause it doesn’t have an over-line (which in the case of the <h2> head­ing car­ries the mar­gin).

The two head­ing are de­signed to have the same dis­tance be­tween the pre­ced­ing sec­tion and the head­ing, this can be seen in Fig­ure 10.29. The dif­fer­ence be­tween the sec­tion and the sub­sec­tion head­ings is that there is no line above the sub­sec­tion head­ing — this is done to make the sub­sec­tion in­fe­rior to the sec­tion

The <h4> hhead­ing is used for in-line sec­tions:

The <h4> head­ing is al­most iden­ti­cal to the <h3> sub­sec­tion head­ing; they start off being iden­ti­cal with the de­c­la­ra­tion in Code 10.14. How­ever, this is qual­i­fied with the fol­low­ing CSS:

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

This again adds white space above the head­ing, but not as much as the <h3> head­ing (the idea being that in-line sec­tions are in­fe­rior to the sub­sec­tions). To demon­strate the dif­fer­ence I’ve shown the <h4> and <h3> head­ings side-by-side for com­par­i­son here (the mar­gins are in pur­ple):

The <h3> head­ing needs a big­ger mar­gin be­cause it doesn’t have an over-line (which in the case of the <h2> head­ing car­ries the mar­gin).

The two head­ing are de­signed to have the same dis­tance be­tween the pre­ced­ing sec­tion and the head­ing, this can be seen in Fig­ure 10.29. The dif­fer­ence be­tween the sec­tion and the sub­sec­tion head­ings is that there is no line above the sub­sec­tion head­ing — this is done to make the sub­sec­tion in­fe­rior to the sec­tion

This one’s easy, I don’t use it. It has ex­actly the same set­tings as the <h4> head­ing, but it doesn’t ap­pear in the HTML.

This is the in­vis­i­ble head­ing used for lead-in sec­tions. In­line sec­tions look like this:

I’ve al­ready ex­plained how this works, see section 10.4.