1. HTML4 Tutorial
2. The Web
3. HTML and URLs
4. HTML Element Structure
5. HTML Document Structure
6. HTML - Create Your First HTML Document
7. HTML Text Formatting Elements
8. HTML Entities
9. HTML Lists
10. HTML Links
11. HTML and Images
12. HTML Tables
13. HTML Forms
14. HTML div and span Elements
15. HTML iframe
16. HTML Meta Tags
17. CSS Introduction
18. JavaScript Introduction
19. XHTML Introduction

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:

And here is how the span example is displayed in the browser:

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