Search code examples
htmlanchorfigure

Why is it embedding anchor element under figure element not allowed?


When I run w3.org's HTML validator for my webpage, it gave the following error:

Error: Element a not allowed as child of element figure in this context. (Suppressing further errors from this subtree.)

Here's the code I've written in the body of my html document:

 <p>
  <figure>
    <img src="http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google"/>
    <figcaption>Google</figcaption>
    <a href="#"> A link. Is it allowed?</a>
  </figure>
 </p>

Based on what I understand from the specifications of < figure >, permited content includes < figcaption > followed by flow content, flow content followed by < figcaption > or just pure flow content. The anchor element is considered a flow content. So why is this not possible?


Solution

  • The issue lies with <figcaption> element. According to the specification of <figcaption>as shown here, it states:

    The HTML element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the element which is its immediate ancestor

    This means <figcaption> element must be the first or last element under a <figure> element.

    Since <figcaption> is not the first element (there's an image above it) or the last element (I placed the <a> element below it), I've violated this rule. While your browser's layout will not break due to this minor issue, your website will not pass w3.org's HTML validator as it does not conform to proper standards.