HTML div and span Elements
Jakob Jenkov |
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
The <div> and <span> elements are not really useful without applying CSS styling to them. With CSS you can do a lot of interesting things with <div> and <span>. For instance, you can create layers of HTML floating ontop of each other. With JavaScript you can move these layers, hide them, show them, fade them in and out etc.
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).
| Tweet | |
Jakob Jenkov | |
