Fix remaining XHTML errors in docs to remove ePub build errors

Had to remove the <details> element for the section linking example in
the "Reference links" section.

This is because Sphinx/MyST renders a <section> element for each heading
and closes it when the next heading starts. If we create a heading
inside a <details> element, the <section> element will not be closed
until the next heading starts, which generates invalid HTML.

docs/advanced_topics/icons.md

@@ -84,7 +84,7 @@ Enable the [styleguide](styleguide) to view the available icons and their names
 
 Here are all available icons out of the box:
 
-<details open>
+<details open="">
 
 <summary>Toggle icons table</summary>
 

docs/contributing/documentation_guidelines.md

@@ -200,9 +200,7 @@ The reference can be linked to, with an optional label, using the Markdown link
 -   [label for section](my_awesome_section)
 ```
 
-<details>
-
-<summary>Rendered output</summary>
+Rendered output:
 
 (my_awesome_section)=
 
@@ -213,8 +211,6 @@ The reference can be linked to, with an optional label, using the Markdown link
 -   Auto generated label (preferred) [](my_awesome_section)
 -   [label for section](my_awesome_section)
 
-</details>
-
 You can read more about other methods of linking to, and creating references in the MyST parser docs section on [Targets and cross-referencing](https://myst-parser.readthedocs.io/en/stable/syntax/cross-referencing.html).
 
 #### Intersphinx links (external docs)

docs/topics/images.md

@@ -394,15 +394,15 @@ Wagtail comes with three pre-defined image formats, but more can be defined in P
 
 ### `Full width`
 
-Creates an image rendition using `width-800`, giving the <img> tag the CSS class `full-width`.
+Creates an image rendition using `width-800`, giving the `<img>` tag the CSS class `full-width`.
 
 ### `Left-aligned`
 
-Creates an image rendition using `width-500`, giving the <img> tag the CSS class `left`.
+Creates an image rendition using `width-500`, giving the `<img>` tag the CSS class `left`.
 
 ### `Right-aligned`
 
-Creates an image rendition using `width-500`, giving the <img> tag the CSS class `right`.
+Creates an image rendition using `width-500`, giving the `<img>` tag the CSS class `right`.
 
 ```{note}
 The CSS classes added to images do **not** come with any accompanying stylesheets or inline styles. For example, the `left` class will do nothing, by default. The developer is expected to add these classes to their front-end CSS files, to define exactly what they want `left`, `right` or `full-width` to mean.