Is it necessary to wrap <strong>, <em>, <b>, <i> inside <p> tag, if content is not paragraph?

Question

For example:

This is ok

<div>
<p>some <strong>long</strong> text</p>
<strong>- end -</strong>
<p>some long text</p>
</div>

Or this is more semantically correct?

<div>
<p>some <strong>long</strong> text</p>
<p><strong>- end -</strong></p>
<p>some long text</p>
</div>

Answer 1

If it isn't a paragraph, then it shouldn't be marked up as a paragraph. (The HTML specification explains how to read the DTD to determine what elements are allowed at a given point in a document.)

<p><strong>- end -</strong></p>

… however, I don't know what this is. You should follow the normal rules for grammar.

Answer 2

If the content is not a paragraph, then it is not semantic to mark it as such.

If your end marker is designed to be read, then it is debatable whether or not it is actually a paragraph or not. If it's not designed to be read, then it shouldn't be marked up with reading-oriented tags like <strong>, but instead should be in a span or div with a stylesheet applied to make the font weight bold.

Answer 3

Academic answer: both are XHTML-compatible. Practical answer: browsers won't give a sh@t about it

Answer 4

As you mentioned the lower is more semantically correct as the <strong> tag is not a block level element which means you need to wrap it in the <p>. Otherwise I'm sure you will come across issues when you try and validate your HTML.

Answer 5

The spec doesn't say you have to. The validator is happy for you to have it in some other block-level container.

Answer 6

Seems to me that "- end -" is a case for an <hr/> or a p:after{content:"-end-"}