- HTML4 Tutorial
- The Web
- HTML and URLs
- HTML Element Structure
- HTML Document Structure
- HTML - Create Your First HTML Document
- HTML Text Formatting Elements
- HTML Entities
- HTML Lists
- HTML Links
- HTML and Images
- HTML Tables
- HTML Forms
- HTML div and span Elements
- HTML iframe
- HTML Meta Tags
- CSS Introduction
- XHTML Introduction
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).