Can I have a <pre> Tag inside a <p> tag in Tumblr?
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;
}
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.
And the HTML5 terminology is:
p
's "Content model" is "Phrasing content": "https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-elementpre
'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?