70

Is it syntactically and semantically correct to nest <div> or any other block level element inside the <p> tag. I am talking about HTML4 Transitional DTD.

If not then is it OK to instead use <span style="display: block"> instead?

Salman A
  • 262,204
  • 82
  • 430
  • 521

5 Answers5

102

Syntactically, a div inside a p is invalid in all standards of HTML. Moreover, when using a conforming HTML parser, it is impossible to place a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.

Semantically, the correct choice depends on the content that you are marking up. You will need to show at least a sample full paragraph and possibly the content surrounding it to be sure of providing sufficient information for the correct semantic mark-up to be determined.

However, given that both <div> and <span> are semantics free, and that CSS in no way can ever change that, if you are certain that the contents of the <p> tag truly form a paragraph, and that <span style="display: block"> gets you the presentational effect that you are seeking, then that is valid HTML and would be a wholly appropriate solution.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Its a graphical rating (e.g. 3 stars out of 5) that I am trying to inject inside the paragraph along with text. The results page contain just 1 heading and 1 paragraph per result so I want to inject the graphic inside the paragraph instead of adding additional divs. – Salman A Nov 27 '10 at 15:26
  • What about block level elements inside a tag? – chainwork Mar 22 '12 at 18:09
  • Can you refer to some documentation that points this out? Is this just some rule for the `p` tag when it encounters a `div` or is this a rule for a `div` with every tag except a `div`? – jmlopez Oct 26 '12 at 23:31
  • 2
    @jmlopez - Broadly speaking, it's a rule about block level elements in `p` elements. But more precisely, it's just a bunch of specific rules in the parsing algorithm. See http://dev.w3.org/html5/spec/tokenization.html#parsing-main-inbody and search down for "If the stack of open elements has a p element in button scope, then act as if an end tag with the tag name "p" had been seen." (There's several separate rules that say this). – Alohci Oct 26 '12 at 23:46
26

No, a paragraph element may not contain other block elements.

Reference

A paragraph tag is intended for a block of text. If your elements is a part of the text (and not block elements), it would be semantically correct, otherwise not. A span tag with display:block is still a block element.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • 3
    +1 for citing W3C. You can try copying and pasting those contents from W3C here to see if the answer gets more votes. – Alejandro García Iglesias Oct 31 '12 at 15:21
  • 2
    @GarciaWebDev: It's a bit difficult to copy the formatted content and make it look reasonably good. I think that W3C is one of the few sources that you can link to without a big risk that it goes away or changes too much. After all, if W3C goes away, this answer is moot... :) – Guffa Oct 31 '12 at 18:33
6

It is syntactically incorrect, as you can see for yourself using the W3C markup validator.

Semantically and practically I would say it's "ok" in the sense that a) it is very natural, b) all browsers handle it correctly (indeed this is one of the easiest problems they have to face daily).

If your HTML is produced by user input (e.g. an HTML editor widget using which visitors can leave comments) then I 'd say simply let it be, even if it is "incorrect".

Otherwise, you could change the markup a bit. Personally I would go with

<div class="para">
    <div>Some content</div>
</div>

and give .para appropriate margins with CSS.

Jon
  • 428,835
  • 81
  • 738
  • 806
  • 1
    `.para`, though more valid CSS on a technical level, is pretty darn awful as far as semantics go :/ – Matchu Nov 27 '10 at 12:02
  • 1
    @Matchu: that's why I 'm saying that the incorrect approach is probably better in practical terms. And also, consider that `
    ` is much much better semantically than `` which the OP mentioned.
     – Jon Nov 27 '10 at 12:07
1

FWIW: I had a paragraph bracketed by paragraph tags. Inside that I put a div with display:inline on the div. But it still treated the div as a block element and closed the paragraph, creating a new line with a paragraph spacing.

It appears that any block element inside paragraph tags forces the paragraph to close even if the block element is being displayed as inline in its CSS.

John Page
  • 357
  • 3
  • 5
0

Without any context, it seems fine to me, so long as your outer tag really is still a paragraph. If your div is something like your top nav bar, then not so much, but if it's a container for an image and caption that you're going to float off to the right, then there's no problem.

Matchu
  • 83,922
  • 18
  • 153
  • 160