CODEWITHSUNDEEP
htmlcss
Bill Gates
Bill Gates

Reputation: 41

What is the difference between a div and a span with display:block?

Since a span can have display:block, when should I use that versus a div?

Upvotes: 4

Views: 221

Answers (6)

nobody
nobody

Reputation: 10635

If you care about standards conformance you should also consider that many elements allowed inside a <div> are not allowed inside <span> for example W3C Validator will give you an error if you have a <div> inside a <span>.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723468

The technical difference is that div is a block-level element while span is an inline element meant for use with text. Although spans can display and behave like block elements, by nature they are still considered inline elements, and so cannot contain block elements as valid HTML.

div can contain span, but span cannot validly contain div even if you apply display: block or display: inline to all of them.

As others mention, you use divs as building blocks to define the layout and structure of your pages, while you use spans for wrapping parts of your text, for styling or structural purposes.

Some links to the HTML spec:

div – generic flow container

Permitted contents

Zero or more style elements, followed by flow content.

... where flow content consists of phrasing content and many block-level elements (flow elements).

span – generic span

Permitted contents

Phrasing content.

... where phrasing content consists of text and inline elements.

Upvotes: 5

Justin Niessner
Justin Niessner

Reputation: 245399

Technically, you could make a <span /> do exactly the same thing as a <div />. It's all about semantics.

Are you rendering a section of the page you want to mark as it's own division on the page? Then use <div />.

Are you wrapping an individual block of something that doesn't really constitute a complete division on the page? Then use <span /> (keeping in mind the caveats mentioned by BoltClock regarding valid HTML).

Keep in mind, though, that you could do the same with any other HTML tag. <div /> and <span /> should really only be used as a last resort when there no other semantically superior choices available.

In short, building semantic HTML makes your markup easier to read and your intent easier to understand. Use the tags that make the most sense and then go to town with CSS to render them they way you want them to look.

Upvotes: 1

Phil
Phil

Reputation: 11175

Theoretically, you could style a span to do the same thing as a div. But than again, you could surround all your text in h1's and change the styles to look normal. Check out @BoltClock answer as he explains that you can't have a div inside a span and maintain code validity.

Upvotes: 2

PeeHaa
PeeHaa

Reputation: 72652

Divs are used like building blocks for a page.

Where spans are used to change some part of an element.

Example:

<div class="left-content">
</div>
<div class="right-content">
</div>

to split a page into two sections

<p>This text is <span class="red">red</span></p>

You can set a span to block and use it like a div.

However that's not what the element is meant for.

You could also design you page using tables which works fine however again that's not what tables are meant for :)

Upvotes: 0

JAiro
JAiro

Reputation: 5999

They are differents. Either you add the attribute display: block to the span you can't put block-level elements inside it.

Upvotes: 0

Related Questions