06.10 Basic Markdown and text formatting

6.10Headings

Headings are created by adding hash signs # in front of a word or sentence. The number of hashes indicates the level of the heading: a single # indicates a level 1 heading, ## a level 2 all the way down to ###### (six hashes) which is a level 6 heading.

The headings can also be constructed using the HTML tags <h1></h1> … <h6></h6>.

Headings are also covered in section 16.5.2; this shows how headings are structured for the PracticalSeries Wikis and includes a lot of information about spacing and numbering and generally making the headings look better.

Headings level 1 and 2 are underlined. Headings get progressively smaller:

^{Figure 6.3 — Markdown headings on GitHub}

The above headings are produced with the following Markdown:

^{Markdown, HTML equivalence and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽	${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽	${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
# Heading level 1 ## Heading level 2 ### Heading level 3 #### Heading level 4 ##### Heading level 5 ###### Heading level 6	<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6>	Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6
^{Table 6.36 — Heading Markdown}

Alternatives for heading 1 and 2

Headings 1 and 2 can be recreated by adding equal signs = for heading level 1 or minus signs - for heading level 2.

The equals or minus signs must be added to the line immediately below the heading text. It doesn’t matter how many equals or minus signs, one will do, but often the signs are extended for the length of the heading text:

^{Markdown, HTML equivalence and GitHub output}
${\large \color{#0050C0}\text{M\ A\ R\ K\ D\ O\ W\ N}}$ 🔽	${\large \color{#00C050}\text{H\ T\ M\ L}}$ 🔽	${\large \color{#B00000}\text{G\ I\ T\ H\ U\ B}\space\ \space\text{O\ U\ T\ P\ U\ T}}$ 🔽
Heading level 1 ===== Heading level 2 -----	<h1>Heading level 1</h1> <h2>Heading level 2</h2>	Heading level 1 Heading level 2
^{Table 6.37 — Heading 1and 2 Markdown alternatives}

${\LARGE \color{#C00000}\text{DO\ NOT\ USE\ EQUALS\ AND\ MINUS\ SIGNS\ FOR\ HEADINGS}}$

It is generally best not to use these alternatives; they only cover the first two heading levels — stick with the hashes.

⬆️ Top

6.10.1Headings Markdown rules

	^{List 6.10 — Headings Markdown rules}
❶	The first `#` must be at the start of a line
❷	The last `#` in the group must be followed by a space (before the heading text)
❸	All the text on the same line as the first `#` will form part of the heading
❹	Best practice dictates that each heading should be preceded by a blank line (it makes the text easier to read)
❺	Character for emphasis (bold, italic and underline) all work within headings
❻	Don’t use equal signs `=` or minus signs `-` to construct headings

Note

Multiple consecutive spaces (from the space bar) are ignored in headings, other forms of space (e.g. the non-breaking space:   see section 7.2) are not and these can be used to correctly space numbers and text within a header.

⬆️ Top

6.10.2Heading properties

The following are the GitHub properties applied to each heading:

HEADING	MAIN WINDOW PROPERTIES	SIDEBAR AND FOOTER VARIATIONS
`# Heading 1`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 32.0px Line spacing: 40.0px (125%) Underlined: Yes `rgb(223, 228, 233) #DFE4E9`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 19.2px Line spacing: 24.0px (125%) Underlined: Yes `rgb(223, 228, 233) #DFE4E9`
`## Heading 2`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 24.0px Line spacing: 30.0px (125%) Underlined: Yes `rgb(223, 228, 233) #DFE4E9`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 16.8px Line spacing: 21.0px (125%) Underlined: Yes `rgb(223, 228, 233) #DFE4E9`
`### Heading 3`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 20.0px Line spacing: 25.0px (125%) Underlined: No	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 15.0px Line spacing: 18.75px (125%) Underlined: No
`#### Heading 4`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 16.0px Line spacing: 20.0px (125%) Underlined: No	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 12.0px Line spacing: 15.0px (125%) Underlined: No
`##### Heading 5`	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 14.0px Line spacing: 17.5px (125%) Underlined: No	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 10.5px Line spacing: 13.13px (125%) Underlined: No
`###### Heading 6`	Font: Segoe UI Colour: `rgb(89, 99, 110) #59636E` Font size: 13.6px Line spacing: 17.0px (125%) Underlined: No	Font: Segoe UI Colour: `rgb(89, 99, 110) #59636E` Font size: 10.2px Line spacing: 12.75px (125%) Underlined: No
Body text (for comparison)	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 16.0px Line spacing: 24.0px (150%) Underlined: No	Font: Segoe UI Colour: `rgb(31, 35, 40) #1F2328` Font size: 12.0px Line spacing: 18.0px (150%) Underlined: No
^{Table 6.38 — Headings properties}		^{Differences are in bold}

Note

These figures are for a Windows PC using a 2560 × 1560 monitor at native resolution, the browser is Edge set to a zoom of 100%. Where there are differences between the columns, these are highlighted in bold.