Divs and Spans

So far in this series of tutorials we have looked at various objects that we can place in our web page including text, images, lists, and links. At no stage have we looked at how to manipulate these objects so as to set their appearance or position on the page. The reason for this is that it is the job of the (X)HTML to define what is on the web page and not where or how it would look.To define how the content of the page should look and where on the page it should appear we use stylesheets.

There will be times where we have pieces of content on our page that we want to have a different appearance from the surrounding content. For example we may have some section of text within a paragraph that we want to display in a different colour or which we want to highlight by making it bold and/or colouring the background. The actual appearance will be set in the stylesheet but we need some way to tell the stylesheet what piece of text that the style is to be applied to. We can identify a piece of our content requiring a different appearance by placing that content within a span container like this:

<p>Highlight <span class="hilite">some text</span> in
a paragraph.</p>

The span container identifies the piece of content to which the special styling is to be applied and the class attribute provides an identifier so that the stylesheet knows which styles are applicable.

If you wish to mark an entire paragraph to have a special style applied (or any other complete container for that matter) you do not need to put the content of the paragraph inside a span as it is already contained within the paragraph. Instead we can identify the entire paragraph (or whatever container) by addin a class attribute to the p tag itself.

When we apply the class attribute to the various tags within our content the same stylesheet will be applied to all of the content that has the same class attached. This means that we can't use the class attribute when we want to set the position of some of the content. To apply positioning style information to some of our page content we place that content into a div container like this:

<div id="content">
<p>The content of the page is here.</p>
<p>It has more than one paragraph.</p>

The id attribute uniquely identifies a particular container on our web page and the stylesheet will contain a reference to that id to provide the specific style information. Again if everything is already in the one container we don't need to contain that within a div as we can just apply the id to that tag instead.

So let'd just clarify when we should use span and when we should use div. A span is what is known as an inline container, it identifies a piece of content within a block that is to have special styles applied. A div is a block level container it identifies a group of objects. So if you want to identify a piece of a list element or part of a link that is to have special styling you would use a span. Lists, paragraphs, and headings are considered to be blocks of text. If we want to apply a particular style to them as a group we need to contain them within a div.

Similarly if you need to identify a specific object to which a given style is to apply you use the id attribute. Each id attribute on your page must be assigned a unique value that is not assigned to any other id on that page. If you want to apply the same style to multiple objects then you would identify all of them using the same class attribute.

You may have noticed that there is no link on this page to a sample page to show you how the styled content looks. The reason for this is that until such time as you define the stylesheet that contains the definitions of how these items are to appear on your page they will not look any different than the content did before you added the span and div tags. It is only when styles are applied that this content will take on its desired appearance and/or position.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow