Tech and Media Labs
This site uses cookies to improve the user experience.

HTML div and span Elements

Jakob Jenkov
Last update: 2014-06-15

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
with some text in a div
and some text after.

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).

Jakob Jenkov

Copyright  Jenkov Aps
Close TOC