1. Technology

Lesson 2: The SPAN and DIV Elements

CSS Short Course

By

Updated September 09, 2012

The SPAN and DIV elements are very useful for using Cascading Style Sheets. People often use these elements in a similar fashion, but they serve different purposes.

The DIV Element

The DIV element defines logical divisions in your web page. In terms of layout, the DIV element does only one thing, it defines the contents within to be all within one division of the page. This is not a semantic division, such as the ARTICLE and NAV elements create. Instead, use the DIV element for styling sections of your pages.

The DIV element also gives you the chance to define the style of whole sections of HTML. You can define a section of your page and give that section a different style from the surrounding text.

But that's not all it does! The DIV element gives you the ability to name certain sections of your documents so that you can interact with them with style sheets or JavaScript.

One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV element it's less common to enclose a DIV element inside a paragraph.

The only attributes of the DIV element that you'll need for this class are:

class
style

You use the class attribute with embedded styles and external style sheets, which you will learn later on in this lesson. The style attribute is used with inline styles.

Even if you don't use style sheets or JavaScript, you should get into the habit of using the DIV element. This will give you more flexibility. Also, you can use the id attribute to name your sections so that your web pages have anchors for links, styles, and JavaScript.

Because the CENTER tag was deprecated in HTML 4 and is no longer a part of the HTML5 specification at all, it is a good idea to start using the DIV element with CSS to center your text and images. Here's a simple DIV that centers all the contents:

<div style="text-align:center;">

This was a very brief introduction to this important element. If you want to learn more you should read more about the DIV element.

The SPAN Element

The SPAN element has very similar properties to the DIV element, in that it affects the style of the text it encloses. Items in the <span> can be aligned or given specific style attributes.

The primary difference between the SPAN and DIV elements is that the SPAN element doesn't do any formatting of it's own. The DIV element acts like a paragraph break, because it is defining a logical division in the document. The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN element.

The only attributes of the SPAN element that you'll need for this class are:

class
style

Just like with the DIV element, you use the class attribute with embedded styles and external style sheets, which you will learn later on in this lesson. The style attribute is used with inline styles.

Use the SPAN element when you want to change the style of elements without naming them in a separate division within the document. For example, if you have a Level 3 Heading (H3) where you wanted the second word to be red, you could surround that word with a SPAN element:

<h3>Word <span style="color : #ff0000;">Word</span> Word</h3>

The second word would have the same attributes as the rest of the H3 element, but it would also be red (#ff0000).

This was a very brief introduction to this important element. If you want to learn more you should read more about the SPAN element.

Next Page: Styles for the Current Document > 1, 2, 3, 4

Related Video
DIV and Span Tags

©2014 About.com. All rights reserved.