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

Question

Since a range can have: block display, when should I use this compared to a div?

Answer 1

The technical difference is that the div is a block level element, and the span is an inline element for use with text. Although gaps can be displayed and behave like block elements, by their nature they are still considered inline elements and therefore cannot contain block elements as valid HTML.

div may contain a span , but a span cannot correctly contain a 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 span to wrap parts of your text, for styling or structural purposes.

Some links to the HTML specification:

div - common stream container

Allowed Content

Zero or more stylish elements followed by flow.

... where the content of the stream consists of the contents of the phrase and many block-level elements (stream elements).

span - general range

Allowed Content

The content of phrases.

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

Answer 2

Theoretically, you can create a range to do the same thing as a div. But the bigger you can surround all the text in h1's and change the styles to look normal. Check out @BoltClock's answer as it explains that you cannot have divs within a range and maintain the validity of the code.

Answer 3

Technically, you can make <span /> do the same as <div /> . All about semantics.

Are you showing the section of the page that you want to mark as your own division on the page? Then use <div /> .

Are you wrapping a separate block of what is not really a complete separation on the page? Then use <span /> (referring to the caveats mentioned by BoltClock regarding valid HTML).

Keep in mind that you can do the same with any other HTML tag. <div /> and <span /> really should only be used as a last resort if there are no other semantically superior options available.

In short, building semantic HTML makes your markup easier to read, and your intention is easier to understand. Use the tags that make the most sense, and then go to the city with CSS to display them the way you want them to look.

Answer 4

They are different. Or you add an attribute display: block a range in which you cannot put block level elements.

Answer 5

Div are used as building blocks for the page.

Where span are used to modify any part of an element.

Example:

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

to split the page into two parts

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

You can set the span to lock and use it as a div.

However, this is not the element that is intended for.

You can also create a page using tables, which works great, but again, that not the tables that are designed for :)

Answer 6

If you care about standards compliance, you should also bear in mind that many elements allowed inside a <div> are not allowed inside a <span> , for example the W3C Validator will give you an error if you have a <div> inside a <span> .