span vs. div, block vs. inline

Also, what are the differences between these elements?



Both elements will display exactly the same way due to you changing the display of one in each example. Semantically they are different, meaning they are supposed to be used for certain things. Here are some examples of their proper usage.

DIV Tag: http://www.w3schools.com/tags/tag_div.asp

SPAN Tag: http://www.w3schools.com/tags/tag_span.asp

Well basically a div is a "block level element" meaning it inherently cause a line break. A span is a box like a div but won't cause a break, unless you set the "display" attribute to "block". Read those two links he posted, you should really understand the semantics of these elements before you start coding css, because its super easy to use the wrong kind of element for the wrong purpose. You won't know if you've used it correctly, because the result will be the same, but it won't make sense to other developers and could cause problems later down the road.

The reason I asked is because I found some sample code on the Internet where someone used In his explanation, he wrote, "it does not turn the span into a block level element and the normal rules for inline elements in html must still be obeyed".

I only know of two differences between block and inline elements. First, block elements have an implied line break before and after them, whereas inline elements do not. Second, a block element takes up the entire width of its parent, whereas an inline element takes up only the width of its content. Are there other differences? I have run some tests and can not find any "normal rules for inline elements in html" that make a block level span behave any differently than a plain old div.

DIV and SPAN are both non-semantic containers. Their only "physical" difference is that one is by default display:block and the other is by default display:inline.(*)

However ...

Within the HTML and XHTML doctypes there are various rules as to what elements can appear where. In those rules DIV is a block level container. It can contain just about anything, but it can only appear within other block level containers. A SPAN is an inline level container. Its very restricted in what can appear within it - mostly only other inline level elements, however it can appear almost anywhere. In some places they can both appear (e.g. LI, DT) in others only one can. e.g. BODY, FORM (DIV); Hx, DT, P, STRONG, A (SPAN).

So, when you need an non-semantic element the one you choose is dependent on where in the html structure the element is located. Then if the default display setting is not what you require, change it in the CSS. I think we might be getting a couple more of these in the next versions of HTML/XHTML, the newish inline-block should have its own non-semantic container - although given it generally can appear anywhere an inline level element can, I guess it could end up being a SPAN.

(*) Sawatadee, those differences you have described are the differences between the display:block and display:inline. Appearance of elements are completely controlled by their styles. Default appearance is the default styles applied in the browser stylesheet. E.g. If you search for FF's stylesheets (res directory iirc) you'll find "strong {font-weight: bold; }" amongst all the other standard styles.