Headings

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use a heading to title content that is immediately below it. Headings are large, bold, concise text that are hierarchical in nature.

Design and coding

Basic use

Default

Use headings so the search engine can properly rank your content. Headings are ranked more important than regular text. Choose headings strategically. The <h1> is the most important; the <h6> is the least important.

Appearance

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Correct use

Compliance point(s):

Capitalize the following:
- First word in a title
- Proper noun (name of a person, place, title of a person or formal publication, or calendar time)
- First word after a colon ( : ) or endash – ( – ) . Use lower-case for the rest
Use mainly <h1> to <h4> headings to structure content
- Avoid <h5> to <h6> headings. Rather, consider restructuring content
- Ensure information is in meaningful content blocks (groups)
Place a title immediately above the content section that it relates to
Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use headings to mimic a text size and weight
Do not use for superficial styling purposes

Code

<h1>h1 heading</h1>

<h2>h2 heading</h2>

<h3>h3 heading</h3>

<h4>h4 heading</h4>

<h5>h5 heading</h5>

<h6>h6 heading</h6>

Secondary text

Use to create lighter, secondary text in any heading.

Appearance

h1 heading – Secondary text

h2 heading – Secondary text

h3 heading – Secondary text

h4 heading – Secondary text

h5 heading – Secondary text

h6 heading – Secondary text

Correct use

Compliance point(s):

Use the .small class to de-emphasize only a portion of the heading

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)
Do not use to de-emphasize primary information
Do not use headings to mimic a text size or weight
Do not use for superficial styling purposes
Do not use the <small> tag, as it is for defining small text (side-comments, disclaimers and "fine" print, including copyright and legal text)

Code

<h1>h1 heading &#8211; <span class="small">Secondary text</span></h1>

<h2>h2 heading &#8211; <span class="small">Secondary text</span></h2>

<h3>h3 heading &#8211; <span class="small">Secondary text</span></h3>

<h4>h4 heading &#8211; <span class="small">Secondary text</span></h4>

<h5>h5 heading &#8211; <span class="small">Secondary text</span></h5>

<h6>h6 heading &#8211; <span class="small">Secondary text</span></h6>

Underline

Use to add an underline to a heading.

Appearance

Correct use

Compliance point(s):

Use .page-header to make a heading stand out

Incorrect use

Compliance point(s):

Do not use this component in a way that conflicts with the preceding compliance point(s)

Code

<h1 class="page-header">h1 heading</h1>

<h2 class="page-header">h2 heading</h2>

<h3 class="page-header">h3 heading</h3>

<h4 class="page-header">h4 heading</h4>

<h5 class="page-header">h5 heading</h5>

<h6 class="page-header">h6 heading</h6>

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Sizing

Supporting principles

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified:: 2019-04-11