Health and Safety
Executive / Commission
Styleguide
Proper heading use and nesting are essential to producing an accessible and valid document
HSE house style regarding the use of capitals in headings.
Headings should not be placed inside <p> paragraph blocks, list items or links.
<h2>Hamlet</h2>
<p>To be or not to be, that is the question</p>
<p>
<h2>Hamlet</h2><br/>
To be or not to be, that is the question
</p>
If you wish to make your headline a link, then you should place the link inside the heading tags
<h2><a href="...">News story!</a></h2>
<a href="..."><h2>News story!</h2></a>
There are 4 types of heading allowed on any one page.
<H1 class="headlinehighlight"> Used for page title, should only be used once per page.
Large, bold and coloured, with a light background.
The above is achieved by wrapping an h1 and an h2 in a div tag with class "headline highlight"
<div class="headlinehighlight">
<h1>I am the headline</h1>
<h2>I am the subline</h2>
</div>
Heading 2 <h2> used for subheadings, can be used multiple times.
Normal font size, bold, coloured and tight onto top of text
<h3> used for sub sub headings, can be used multiple times.
Normal font size, bold and same colour as text and tight onto top of text.
The following class can be used on h2 and h3 elements, to create an inverted effect. The choice of h2 or h3 will be influenced by the placement of your element inside the document structure tree. You should maintain the document structure tree correctly at all times.
<h2 class="headlineinverted">Headline inverted h2</h2>
<h3 class="headlineinverted">Headline inverted h3</h3>
To get the best from headings authors should be using a correct document structure tree. This has advantages in Word when building automatic clickable Tables Of Content and also has big advantages in terms of accessibility and search engine friendliness.
Large text is achieved by wrapping the desired word in a <strong>
<p class="headlinekeymessage"> I am normal<br /><strong>I am large</strong></p>