Language selection

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 &#8211; ( ) . 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

h1 heading

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.

Supporting principles

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

Date modified: