HTML div and span tags

Often times, you will need to separate a section or sections of a document. The <div> and <span> tags can be used for just that.

This lesson focuses on:

The <div> tag
The <span> tag
Div vs. Span

The <div> tag

The <div> tag can be used to separate a section in a document. You can use the <div> tag to group block level elements and then format them with styles. For example, if you have a two column layout, you can separate the columns using <div>, and same goes for a three column layout.

Example:

<div id="data">
Here is some data
</div>

The id attribute is used by a stylesheet to affect the style of the content within the <div>.

The <span> tag

The <span> tag, like the <div> tag can be used to separate a section in a document. You can use the <span> tag to group inline elements in a document and then format them with styles. For example, you can format a paragraph or a header using <span>.

Example:

<p>
<span class="text">
Here is some text
</span>
</p>

The class attribute is used by a stylesheet to affect the style of the content within the <span>.

Div vs. Span

While <div> and <span> do the same thing, there is an important difference between them:

The <div> tag should be used for block level elements. Use the <div> tag for things such as columns in a layout, and the location of a menu on a page.

The <span> tag should be used for inline elements such as paragraphs and headers.

NOTE: Most browsers will automatically place a line break before and after a div element. There is no such line break for a span element.