Fix html structure

issue: https://github.com/alphagov/manuals-frontend/issues/104

The problem: Every page of a manual has the same `<h1>`. This is not very informative. In many cases the most useful heading on the page is actually the `<h2>`.

The solution: 
- Keep the `<h1>` in the heading, add an `aria_labelledby` to the `<heading>` tag to point to it's child `<h1>`.
- Promote the content title from an `<h2>` to an `<h1>`
- Add an `<article>` around the main content of the document and add an `arial_labelledby` to the newly promoted `<h1>`
- Move the `id=content` to the meat of the page (stuff below the `<header> ... </>`

Outstanding questions:
For the index page, the manual title (the one in the header) actually is the most important and useful `<h1>`. In this case I've marked up as the following, but am unsure if it's right (and can't find anything online). I guess what I'm wondering is, is it appropriate to have two bits labelled by the same element, and, furthermore, is it OK if that label is a descendant of one of the elements and not of the others (technically it looks like a "niece" of the other element but I'm p. sure nobody has ever called that relationship in HTML that...)

```
<header arial_labelledby="manual-title">
  <h1 id="manual-title">...</h1>
  ...
</header>
<article aria_labelledby="manual-title">
...
</article>
```
Where does `manual-title` come from in this context? I can't spot it, but I might just not understand the structure of this page.