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.
