A single-serving website from Alexander Vishnyakov for testing if it’s valid to put any particular HTML element within another type of HTML element. Kinda neat to have a quick reference for this.
Some combinations feel fairly obvious: can you put a <video> inside an <input>? Uh, no. Some are trickier: can you put a <div> inside an <h1>? Nope — that one bit me this week (derp). Some are a little confusing, like <div> is an invalid child of an <ol> but a valid child of a <dl>.
At the risk of sounding a bit stupid, what exactly do we mean by ?
I tried putting a div inside of an H1 tag and it seems to behave exactly as I’d expect. I didn’t see any unexpected behaviors or noticeable problems.
So what exactly is the consequence of doing this?
Does it hurt accessibility? Does it hurt SEO? Does it cause strange behavior in certain browsers? Or is it just a kind of things.
It’s how the Spec defines the content of each elements. If you check for h1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) you can read that the “permitted content” is “phrasing content” (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content). a Div is not part of the “phrasing content” category so this will make you HTML markup invalid even if you don’t have any unexpected behavior in this case. Use a validator to see the errors you get: https://validator.w3.org/nu/#textarea
If for example you try a div inside p, you will get strange behavior: https://jsfiddle.net/c15q24x7/ (inspect the code to understand why you don’t have a red coloration)
This said, you should always try to have a valid markup to avoid any potential issues even if some invalid markup will work in some cases.
In my case, when using an HTML-to-PDF conversion tool, the whole dang thing choked because of divs in headers that I had used without knowing any better.
Adiv inside an h1 is not valid html. It will fail a validator
Consider your web to be some printed media. Would it make sense to put any paragraph, from content itself, inside of headline? I guess it would not – semantics, that’s why you don’t put
<div>inside of<h1>.Something like this should really be a lint to actually check your code and make sure you don’t screw up on it.
Manually checking doesn’t seem good enough.
The reason “it’s the rule” kind of thing matters, even if your browser seems to handle it as you had hoped, is because you cannot test it on all browsers, on all devices, in all environments, and after all sequences of events— not to mention the inability to foresee future browser or system upgrades. Browser designers are free to interpret bad code in whatever way is convenient or makes sense and that gives us no guarantees on how it will be interpreted.
On the confusing side, div is not valid inside ol, but valid inside ol’s li tag. Can include, nice spec
omg, this is great. I mean I should definitely have a better understanding of HTML than I do (I’ve recently decided I need to “learn HTML” again), but having a tool like this is eminently useful.