Search code examples
jqueryhtmlajaxexploitparagraph

Paragraph(<p>) nesting by jquery html() and load() methods

Paragraph can not contain block-level elements, including other paragraphs. I disagree with this logic, since I don't see anything wrong with nested paragraphs - for example if I want to quote paragraphs inside an paragraph. But maby that's just me.

Yet I managed accidently nest paragraph like this:

<p> <p>inner paragraph</p> </p>

The trick was, to load inside <p> content that contains paragraphs with ajax. As far as I observed, it does work and look just as it would be expected if it would be possible without this exploit in the first place. In my case that would mean css-base margins are respected, and the effect is like "this is not a bug, it is a feature".

Here is a fiddle that shows how does it look: https://jsbin.com/ligilukidu/edit?html,css,js,output

So my questions are:

  1. Should I avoid breaking the <p>-nesting rules, or it's fine to load content with ajax without concern if it contain paragraphs and is loaded inside paragraph?

  2. Would some browsers break the page with paragraphs nested in this way?

  3. Are there other ways to nest paragraphs? Perhaps some "legal" ways?

Solution

  • Don't nest <p> elements. If you nest them inside HTML, the browser splits them up automatically. I'm surprised it works with JS but I wouldn't rely on it.

    If you want to quote something, use quote tag.

    If it's just about styling, span are the elements to use. You need to add some CSS to get them to have the same styling as paragraphs, but this would be the correct (legal) way:

    #test {
padding: .2em;
}

#test span {
display: block; 
padding: .2em;
}
    <p>When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that.</q></p>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> From mdn web docs</a>

<p id="test">
Lorem ipusm 
<span> some more text </span>
</p>