Can I have a <pre> Tag inside a <p> tag in Tumblr?

Question

today I played around a little bit with Tumblr. I tried to add a preformatted text into a description paragraph block like so:

{block:Description}
    <p id="description">{Description}</p>
{/block:Description}

However, the <pre> element gets rendered just after the <p> element and not within it which was my intention.

Am I doing something wrong here or is it a bug?

Welles

Answer 1

You cannot nest block-level elements, such as <pre>, inside <p> in HTML, so Tumblr is behaving correctly. You should close your paragraph before inserting the pre-formatted text.

If you want inline code-style text, try the <code> tag. You can then supplement it with CSS if needed.

<p>I like to use the <code>code</code> tag in my HTML files.</p>

code
{
    padding: 2px 4px;
    color: #000000;
    background-color: #eeeeee;
    border-radius: 3px;
}

Labuan

Interestingly, I tried replacing <p> by <div> which is a block element, too and it worked! And isn't nesting <div>s a common practice? I am baffled again... – Welles

Happy to help. <div> is a grouping element and can be nested; it's particularly useful with CSS, much like <span>. – Labuan

So there are block level elements which cannot be nested unless it is a grouping block level element? Obviously I underestimated html complexity :). Could you provide a link where I can learn more about this concept? – Welles

<div> and <span> are not block-level elements, they are grouping elements. In my answer I linked to The global structure of an HTML document (for HTML 4.01), that should help you. – Labuan

Answer 2

Also, I just realized where I was having a similar issue pasting code into tumblr inside <pre> and <code> tags is that just because you wrap your code in those tags doesn't prevent you from having to escape the carets with < and > instead of the carets.

Shaniceshanie

Answer 3

And the HTML5 terminology is:

• p's "Content model" is "Phrasing content": "https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element
• pre's "Categories" are: "Flow content" and "Palpable content": https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element

Since pre's categories don't include "Phrasing content", pre cannot be put inside p.

Maybe it is possible to simulate pre with CSS styles though: How to change a span to look like a pre with CSS? but I'm not sure it is allowed in p.

See also: List of HTML5 elements that can be nested inside P element?

Mariann