CODEWITHSUNDEEP
html
Linas
Linas

Reputation: 4408

Strange html error with paragraph

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 <p> doesn't contain anything any more.

If i would try to remove div text would be back in <p> tag again, so my best guess would be that <p> 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 <p> if i was going to build a list of things... Anyways thank you all for your help.

Upvotes: 1

Views: 713

Answers (4)

pascalhein
pascalhein

Reputation: 5846

You're right, <p> 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

Upvotes: 2

Daedalus
Daedalus

Reputation: 7722

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

Upvotes: 2

gearsdigital
gearsdigital

Reputation: 14205

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}

Upvotes: 2

HJW
HJW

Reputation: 23443

P can only contain inline element.

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

Should ol/ul be inside <p> or outside?

Upvotes: 1

Related Questions