html: Should <code> be placed within a paragraph?

According to the w3c <code> is an inline element so it can be placed inside a <p> element.

FYI, your <pre> tag is redundant. Not only do most user-agents display content as if it was wrapped in a <pre> (e.g. no word wrap and monospace type) but you should be using CSS to control the presentation of <code> elements anyway.


As John said, code is an in-line element, and can be placed in paragraphs. (Not necessarily should; there are plenty of other places it's also allowed.) Either your title or examples above are wrong, so I'll cover both possible cases, stealing from Gruber's docs.

To produce a code block requires pre, which is a block element and isn't allowed inside a p tag.
Use the following Markdown:

This is a normal paragraph:

    This is a code block.

...which will output:

<p>This is a normal paragraph:</p>
<pre><code>This is a code block.</code></pre>

as you showed above.
Markdown is correct in doing this; the paragraph and code are related, but they're not a unit. (But as I said in my comment above, I'm unclear whether this is what you're actually trying to do.)

 

To produce an in-line code element, you should be using the following Markdown:

Use the `printf()` function.

...which will output:

<p>Use the <code>printf()</code> function.</p>

And the HTML5 terminology is:

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

Since code's categories include "Phrasing content", code can be put inside p.

See also: https://stackoverflow.com/questions/9852312/list-of-html5-elements-that-can-be-nested-inside-p-element

Tags:

Html