Typography: Include semantic elements in code examples

[GCHQ-Developer-299]

What component is this related to?

Typography

Why do we need it?

The typography guidance page says:

Add a variant to the typography element to change its style. This doesn't change the semantic level of the typography element so make sure to always adhere to accessible heading levels. For example, body text with a variant of h2 will appear visually as an h2 but still be body text in the DOM.

To support this best practice, we should update the Code examples to include semantic tags, like below:

<ic-typography variant="h1"><h1>H1</h1></ic-typography>
<ic-typography variant="h2"><h2>H2</h2></ic-typography>
<ic-typography variant="h3"><h3>H3</h3></ic-typography>
<ic-typography variant="h4"><h4>H4</h4></ic-typography>
...

This is important, otherwise developers might end up using Typography to make headings that only visibly appear as headings.

[gd2910]

Completed as part of #751