HTML div and span Elements
The elements <div> and <span> are used to mark sections of an HTML page for special formatting. The two elements do not have any specific style by default, but you can assign a style to them using CSS.
The main difference between <div> and <span> is, that <div> is displayed as a block and <span> is displayed inline. To illustrate the difference, look at these two HTML examples:
This is a line of text <div>with some text in a div</div> and some text after.
This is a line of text <span>with some text in a span</span> and some text after.
Here is how the
div example is displayed in a browser:
This is a line of text
And here is how the
span example is displayed in the browser:
This is a line of text with some text in a span and some text after.
As you can see, the <div> element is considered a separate block (square) from the text it is embedded in, with vertical space before and after the <div> element.
The span element is displayed inline, meaning it flows with the text it is embedded in. In other words, there is no vertical space between the surrounding text and the <span> element.
The div and span Elements and CSS
This text will not get into more detail about the <div> and <span> elements. To see how to use CSS with <div> and <span>, see my CSS tutorial (not online yet - coming in a near future).