Strange html error with paragraph

Question

So i have this code:

<p id="item_1">
    <div class="background displayInline deleteItemFromCart" title="Delete item"></div>
    some text
</p>

Simple right? now what would happen if i would view the source in Chrome dev tools:

enter image description here

And as you can see for some reason  doesn't contain anything any more.

If i would try to remove div text would be back in  tag again, so my best guess would be that  can't contain any or just div elements?

EDIT Well it was stupid question, anyways now that i think about it i could have just used <ul> instead of  if i was going to build a list of things... Anyways thank you all for your help.

score 2 · Answer 1 · answered Sep 08 '12 at 08:42

This isn't strange. It's simply wrong markup :)

<p id="item_1">
    <span style="display:block" class="background displayInline deleteItemFromCart" title="Delete item"></span>
    some text
</p>

But while inline styles are bad you should put something like this to your master.css file.

p span {display:block}
// Or
#item_1 span {display:block}

score 2 · Answer 2 · answered Sep 08 '12 at 08:42

2

The p tag cannot contain block-level elements, including itself. Source: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

answered Sep 08 '12 at 08:42

Daedalus

7,586
5
36
61

score 2 · Accepted Answer · edited Sep 08 '12 at 08:56

2

You're right,  can just contain inline elements and text, but <div> is a block element.

The inline elements are: a abbr acronym applet b basefont bdo big br button cite code del dfn em font i img ins input iframe kbd label map object q samp script select small span strong sub sup textarea tt var

edited Sep 08 '12 at 08:56

Nikola

14,888
21
101
165

answered Sep 08 '12 at 08:43

pascalhein

5,700
4
31
44

score 1 · Answer 4 · edited May 23 '17 at 11:48

1

P can only contain inline element.

See this link for a quick discussion on inline element/flow content.

Should ol/ul be inside or outside?

edited May 23 '17 at 11:48

Community

1
1

answered Sep 08 '12 at 08:42

Oh Chin Boon

23,028
51
143
215

Strange html error with paragraph

4 Answers4