Menu
I have a chunk of a page that looks semantically this:
Heading A
Textual information related to heading A.
Blah blah blah blah blah.[image gallery related to heading A]
I can think of a couple of ways to mark this up:
<section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> <figure> <img /> <figcaption>Image 1</figcaption> <img /> <figcaption>Image 2</figcaption> </figure> </section> <section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> <figure> <img /> <figcaption>Image 1</figcaption> <figure> </figure> <img /> <figcaption>Image 2</figcaption> </figure> </section> <section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> <aside> <!--Method 3b: use section here--> <figure> <img /> <figcaption>Image 1</figcaption> <figure> </figure> <img /> <figcaption>Image 2</figcaption> </figure> </aside> <!--Method 3b: use section here--> </section> <section> <h1>Heading A</h1> <p>Textual information related to heading A.<br /> <p>Blah blah blah blah blah.</p> </section> <aside> <figure> <img /> <figcaption>Image 1</figcaption> <figure> </figure> <img /> <figcaption>Image 2</figcaption> </figure> </aside> Which is the semantically correct way of doing it?
215
The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
Definition and Usage The <aside> tag defines some content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content. Tip: The <aside> content is often placed as a sidebar in a document. Note: The <aside> element does not render as anything special in a browser.
In HTML, the <figure> tag is used to include self-contained information such as illustrations, diagrams, photographs, or code listings in a document.
It's unlikely that you're going to get complete agreement on a 'one true way' to mark this up, but I would choose method 2. My reasoning is:
figure element cannot have multiple figcaption children, so method 1 is invalidfigure is already a type of aside, so no need to wrap them: "The figure element represents a unit of content ... that can be moved away from the main flow of the document without affecting the document’s meaning." (W3C HTML5 spec, figure element)
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
