Forum Moderators: not2easy
Thanks
I think of span as being used to divide up text. The <b> and <i> tags are inline as well. You can apply them to text, and text stays there with its new boldiness or italiciness or whatever you told it to look like.
Divs, Tables, Headings and Paragraphs are blocks. I use divs to divide up parts of a page (menu, header, content, footer). Divs and other blocks like to seperate themselves. If you put a div around words in a sentence, you would notice they go down a line into their own little box (you can add an outline around it in CSS if you want to see the borders), and the text after the div is another line down. With CSS you can do fancy stuff to divs and other blocks like float them or use absolute positioning.
So inlines for breaking up text (ie - give some words a background color, different size, a border) without disturbing the flow of the text, and Blocks for breaking up parts of a page.
If you have a line wrapped in a span tag and it goes to a second line, it will not carry the attributes applied to it to the second line. Because a div tag is block level, it can be use similarly to a paragraph or header tag.
A <span> tag will only effect one line of text whereas a <div> tag is for a block of text.If you have a line wrapped in a span tag and it goes to a second line, it will not carry the attributes applied to it to the second line. Because a div tag is block level, it can be use similarly to a paragraph or header tag.
I think that this is an oversimplification. Span tags aren't restricted to lines. If it spans two words and the second word goes onto the next line, then it will still be affected. Simply speaking, the span tag will affect anything that is within it.
QuazBotch provided a pretty good explanation but just to add some info... All the elements in the document hierarchy are either classified (mainly) as inline or block. Block elements include paragraphs, headers, forms, divs. Inline elements include bold tags, em, span etc... By default, an inline element will remain within it the current flow of its parent element. Its parent element can be either an inline or block element. An inline element however cannot hold a block element. So you can't put a div or a paragraph in a span or an em element. Block elements are taken out of the flow of the current text. If you want to see an example, you can compare the following code:
<p>This <span>is</span> a test</p><p>This <div>is</div> a test</p>Another thing thing that you should realize is that inline and block elements don't accept the same properties. For instance, block elements can accept most properties, but inline elements can't have a width or a height applied to them. I actually created a document outlining what properties different display types can take :)
Anyways, HTH.
