SEM-008: void element has children

Error: the page doesn't build until this is fixed.

Elements like img, input, br and meta can't contain anything in HTML. Browsers would move the children out of them, somewhere you didn't put them.

Fails

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  img("/img/runner-x.jpg", alt: "Runner X in blue, side view") { p "Our lightest shoe" }
}

error[SEM-008]: `img` can't have children
 --> page.hypra:3:3
  |
3 |   img("/img/runner-x.jpg", alt: "Runner X in blue, side view") { p "Our lightest shoe" }
  |   ^^^
  = docs: https://hypralang.dev/rules/sem-008/

1 error, 0 warnings

Fixed

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  h1 "Shoes"
  figure {
    img("/img/runner-x.jpg", alt: "Runner X in blue, side view")
    figcaption "Our lightest shoe"
  }
}