The Wayback Machine - https://web.archive.org/web/20081206191949/http://www.webreference.com:80/html/tutorial5/9.html
The DIV and SPAN elements
The elements in HTML usually give their contents a
certain meaning; they denote semantics. But sometimes, all
you want to do is group a piece of your document into an
element without any special meaning. The primary reason
you'd want to do this is to apply a certain style to it
using CSS. Enter the DIV and SPAN
elements. Here's their syntax:
| Name | DIV
|
| Usage | Separates a block of content
|
| Context | This is a block element.
|
| Contents | May contain
only block elements.
|
| Start-tag | Required
|
| End-tag | Required
|
| language attributes
|
| identifier attributes
|
| Name | SPAN
|
| Usage | Separates a piece of text
|
| Context | This is an inline element.
|
| Contents | May contain
only inline elements.
|
| Start-tag | Required
|
| End-tag | Required
|
| language attributes
|
| identifier attributes
|
The DIV and SPAN elements have
no semantics at all; they just separate a piece of your
document into an element. Usually you'll assign them an
ID or CLASS so you can refer to
them in a stylesheet. Here's an example of their usage:
<DIV CLASS="WhatsNew">
<H1>What's New</H1>
<P CLASS=news>Dr. Arnold D. Propellerhead's
best-selling book, <cite>Transfirbulation
Technology</cite>, is now
<a href="books/OTP/">available
online</A> in its entirety. This
book is a must-read for anyone interested in
Object Transfirbulation and is the perfect companion
for Acme's top-of-the-line Name Sequencer,
M.O.R.O.N.S.<P>
<P CLASS=news><SPAN
CLASS="CompanyName">Acme Computer
Corp.</SPAN> has just acquired <SPAN
CLASS="CompanyName">ThinkMeUp,
Inc.</SPAN>, the industry leader
in Object Costrabulation. This bold business
move promises a combination of Acme's experience
in Transfirbulation with TMU's exciting
Constrabulation technology.
<a href="news/TMUto.html">Read the
full press release</A>.<P>
</DIV>
Here, I have included the whole "What's New" section in a
DIV element with a CLASS of
"WhatsNew," so I can refer to it separately, perhaps so I
can give it a border or something. I have also enclosed both
company names in SPAN elements witha
CLASS of "CompanyName" so I can refer to
company names in my style sheets.
