Using span and div with CSS and HTML
The <span> and <div> tags were introduced later in the HTML game that are very useful
when dealing with Cascading Style Sheets. People tend to use them in similar fashion,
but they serve different purposes.
The <div> tag defines logical divisions in your Web page. In terms of layout, the <div>
tag does only one thing, it determines the alignment of that section of your page.
<div> also gives you the chance to define the style of whole sections of HTML. You
could define a section of your page as a call out and give that section a different style
from the surrounding text.
But that's not all it does! The <div> tag gives you the ability to name certain sections of
your documents so that you can affect them with style sheets or Dynamic HTML.
One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as
a paragraph end/beginning, and while you can have paragraphs within a <div> you can't
have a <div> inside a paragraph.
The primary attributes of the <div> tag are:
Even if you don't use style sheets or DHTML, you should get into the habit of using the
<div> tag. This will give you more flexibility when more XML parsers become available.
Also, you can use the id and name attributes to name your sections so that your Web
pages are well formed (always use the name attribute with the id attribute and give them
the same contents).
Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start
using <div> align="center" to center your text and images. You can also use the text-
align: center style tag.
More About the <div> Tag
The <span> tag has very similar properties to the <div> tag, 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> tags is that <span> doesn't do any
formatting of it's own. The <div> tag acts as a paragraph break, because it is defining a
logical division in the document. The <span> tag simply tells the browser to apply the
style and align rules to whatever is within the <span>.
The <span> tag has no required attributes, but the one that is most usefule is:
Use <span> when you want to change the style of elements without naming them in a
separate division within the document. For example, if you had a Level 3 Heading (<h3>)
that you wanted the second word to be red, you could surround that word with <span>
style="color : #f00;">2ndWord</<span> and it would still be a part of the <h3> tag as
well, just red.
The <span></span> tag allows you to provide localized formatting within documents.
<span> Web Browser Support:
Netscape 4, 6, 7
Internet Explorer 4, 5, 6
XHTML 1.0: XHTML Text Module
Usually any HTML text that you want to specify a style for. The following tags are valid
within the <span> tag:
a, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe,
img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong,
sub, sup, textarea, tt, u, var
<span> Valid Context:
The <span> tag is valid within the following tags:
a, acronym, address, applet, b, bdo, big, blockquote, body, button, caption, center, cite,
code, dd, del, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins,
kbd, label, legend, li, noframes, noscript, object, p, pre, q, s, samp, small, span, strike,
strong, sub, sup, td, th, tt, u, var
change style of text within a paragraph
<p>This is a paragraph with <span style="color : purple; text-decoration : line-
through;">one short phrase</span> in purple, and crossed out.</p>
<span> Special Notes:
Unlike the div tag, you can use span within paragraph tags, but you can't use it to
group block elements, like you can with the div tag.