19

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?

Johnsyweb
  • 121,480
  • 23
  • 172
  • 229
digitalfleisch
  • 193
  • 1
  • 1
  • 4

3 Answers3

22

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;
}
Pikamander2
  • 4,767
  • 3
  • 37
  • 53
Johnsyweb
  • 121,480
  • 23
  • 172
  • 229
  • 1
    Awesome :). I supposed it was due to my ignorance. Thank you! – digitalfleisch Mar 21 '11 at 05:37
  • 2
    Interestingly, I tried replacing

    by

    which is a block element, too and it worked! And isn't nesting
    s a common practice? I am baffled again...
     – digitalfleisch Mar 21 '11 at 05:45
  • 1
    Happy to help. `
    ` is a grouping element and can be nested; it's particularly useful with CSS, much like ``.
     – Johnsyweb Mar 21 '11 at 05:55
  • 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? – digitalfleisch Mar 21 '11 at 06:03
  • 1
    `
    ` and `` are **not** *block-level* elements, they are *grouping* elements. In my answer I linked to [The global structure of an HTML document](http://www.w3.org/TR/html401/struct/global.html) (for HTML 4.01), that should help you.
     – Johnsyweb Mar 21 '11 at 08:25
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 &lt; and &gt; instead of the carets.

Adriano
  • 2,862
  • 4
  • 25
  • 37
Joel Glovier
  • 6,871
  • 8
  • 46
  • 85
1

And the HTML5 terminology is:

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?

Ciro Santilli新疆棉花TRUMP BAN BAD
  • 256,395
  • 72
  • 959
  • 767