Edinburgh GEL

Headings and text

Subheadings can be used to create visual interest and summarise blocks of text.

The first available heading level is <h2>, as <h1> is used for the page title. Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Headings as used in EdWeb

Accessibility review

Standard well-formed HTML headings and text are fully accessible. There are no problems with these elements.

Accessibility issues

Headings should be nested properly. The page should have a logical heading structure. A manual check is often necessary to make sure that heading structure is correct.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<h1>An H1 heading</h1>
<h2>An H2 heading</h2>
<h3>An H3 heading</h3>
<h4>An H4 heading</h4>
<h5>An H5 heading</h5>
<h6>An H6 heading</h6>

<h3>A paragraph</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus orci quis dui ultrices, vitae euismod mi mollis. In aliquam accumsan nisl. Ut eleifend hendrerit erat, ac interdum urna lobortis vitae.</p>

<h3>A lead paragraph</h3>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus orci quis dui ultrices, vitae euismod mi mollis. In aliquam accumsan nisl. Ut eleifend hendrerit erat, ac interdum urna lobortis vitae. </p>

<h3>Emphasised text. (Use within a text element eg. &lt;p&gt;)</h3>
<p><em>Lorem ipsum dolor sit amet consectetur adipiscing elit, morbi rhoncus orci quis dui ultrices vitae euismod mi mollis</em>. In aliquam accumsan nisl. Ut eleifend hendrerit erat, ac interdum urna lobortis vitae. </p>

<h3>Small text. (Use within a text element eg. &lt;p&gt;)</h3>
<p><small>Lorem ipsum dolor sit amet consectetur adipiscing elit, morbi rhoncus orci quis dui ultrices vitae euismod mi mollis</small>. In aliquam accumsan nisl. Ut eleifend hendrerit erat, ac interdum urna lobortis vitae. </p>

<h3>Strong text. (Use within a text element eg. &lt;p&gt;)</h3>
<p><strong>Lorem ipsum dolor sit amet consectetur adipiscing elit, morbi rhoncus orci quis dui ultrices vitae euismod mi mollis</strong>. In aliquam accumsan nisl. Ut eleifend hendrerit erat, ac interdum urna lobortis vitae. </p>