The DIV and SPAN elements - The Human Factor
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.
Produced by Stephanos Piperoglou
All Rights Reserved. Legal Notices.
URL: https://www.webreference.com/html/tutorial5/9.html
Created: August 20, 1998
Revised: August 20, 1998