Does anyone know if the
figcaptionelement can be used without its parentfigureelement?What are the pros and cons of doing so? And is there a recommended option over another?
Lastly, can you back up your answer with links to a reliable resource(s)?
Can the <figcaption> be used without its parent <figure> element?
592 Views Asked by iosvaldo At
2
There are 2 best solutions below
0
On
Your question is basically "What problems could arise if I put HTML element in context it does not belong to per specification?"
Well, it depends on your definition of "problem" and clearly best practice is never let it happen and stick to "valid" HTML structure in the first place, but your curiosity is also valid and certainly worth exploring.
You probably imply that misplaced tag will be always interpreted somehow -- in this case (figcaption) will even remain as a block level element in the DOM, so you will be still able to style it and handle from JS even without it's standard <figure> parent.
There is a chance that in this particular case you will never run into serious problem. You could even consult specs and look into error handling and see that such "bad" scenarios mostly have defined behaviour WRT DOM construction; <body><figcaption>foo</figcaption> will (probably) produce figcaption element with text 'foo', while <body><table>bar</table> will produce text 'bar' in body element followed by empty table element, for example. The thing is those rules are really complex and despite these specs implementations across user agents may vary wildly after all, so after you test your app on all devices you have you end up in uncertainty what could go possibly wrong on devices you have not tested:
- Maybe some fulltext indexing robot will crash while parsing your code and discard your page or it's portion from index,
- maybe some assistive technology will hang while searching for image that is not there for stray
<figcaption>leaving your users in hostile space, - maybe you'll stumble upon JavaScript library that won't know how to toggle it's display and you end up with inline display instead of block,
- or you will include CSS library that sets absolute position implying relative figure wrapper, so you end up with all stray figcaptions on the bottom of your page one over the other.
Those are just few hypothetical scenarios that come to mind. The point is it is clearly better to not give them chance to happen.
See the specification: