Break the <FONT ...> Habit: SPAN and DIV

Sometimes you want to set the font styles of a range of text without associating that text with a particular logical markup such as <EM> or <A ...>. In that case you'll find the <SPAN ...> and <DIV ...> tags handy. <SPAN ...> and <DIV ...> were specifically created to allow for the free form application of styles.

<SPAN ...> is a text-level element. It should only be used to set text within a paragraph. For example, suppose we want a range of text which is big and red. We could create a class like this (in a STYLE tag or in a style sheet file):

.bigred
{
font-size:30pt;
color:red;
font-weight:900;
}

Now we can apply the style to a span of text by setting its class to bigred:

Are you <SPAN CLASS="bigred">crazy?</SPAN>

which gives us this sentence: Are you crazy?

<DIV ...> is a block level element. It starts a new paragraph at the beginning and closes the paragraph at the end. Styles are applied to <DIV ...> in the same way as for <SPAN ...>: set the class using the CLASS class attribute. So, for example, we can use the same style rule as above and apply it to a <DIV ...> like this:

<DIV CLASS="bigred">
Be sure to disconnect socket A from plug B or severe damage will occur.
</DIV>

which gives us