The DIV and SPAN elements - The Human Factor | WebReference

The DIV and SPAN elements - The Human Factor

Front Page12345678910

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:

NameDIV
UsageSeparates a block of content
ContextThis is a block element.
ContentsMay contain only block elements.
Start-tagRequired
End-tagRequired
language attributes
identifier attributes
NameSPAN
UsageSeparates a piece of text
ContextThis is an inline element.
ContentsMay contain only inline elements.
Start-tagRequired
End-tagRequired
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.

Front Page12345678910

http://www.internet.com

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: http://www.webreference.com/html/tutorial5/9.html
Created: August 20, 1998
Revised: August 20, 1998