Generic Elements (div and span)

Generic Elements (div and span)

What if none of the elements we’ve talked about so far accurately describes <div>...</div>
your content? After all, there are endless types of information in the world, Generic block-level element
but as you’ve seen, not all that many semantic elements. Fortunately, HTML
provides two generic elements that can be customized to describe your <span>...</span>
content perfectly. The div element indicates a division of content, and span Generic inline element

indicates a word or phrase for which no text-level element currently exists.

The generic elements are given meaning and context with the id and class
attributes, which we’ll discuss in a moment.
The div and span elements have no inherent presentation qualities of their
own, but you can use style sheets to format them however you like. In fact,
generic elements are a primary tool in standards-based web design because
they enable authors to accurately describe content and offer plenty of
“hooks” for adding style rules. They also allow elements on the page to be
accessed and manipulated by JavaScript.
We’re going to spend a little time on div and span (as well as the id and
class attributes) and learn how authors use them to structure content.

Divide it up with a div

The div element is used to create a logical grouping of content or elements mArkup Tip
on the page. It indicates that they belong together in some sort of conceptual
It is possible to nest div elements
unit or should be treated as a unit by CSS or JavaScript. By marking related within other div elements, but don’t
content as a div and giving it a unique id identifier or indicating that it is go overboard. You should always
part of a class, you give context to the elements in the grouping. Let’s look strive to keep your markup as simple
at a few examples of div elements. as possible, so add a div element only
if it is necessary for logical structure,
In this example, a div element is used as a container to group an image and styling, or scripting.
two paragraphs into a product “listing.”
<div class="listing">
<img src="felici-cover.gif" alt="">
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p>A combination of type history and examples of good and bad type
design.</p>
</div>

By putting those elements in a div, I’ve made it clear that they are conceptu-
ally related. It will also allow me to style two p elements within listings dif-
ferently than other paragraphs on the page.
Here is another common use of a div used to break a page into sections
for layout purposes. In this example, a heading and several paragraphs are
enclosed in a div and identified as the “news” division.
<div id="news">
<h1>New This Week</h1>
<p>We've been working on...</p>
<p>And last but not least,... </p>
</div>

1
 Generic Elements (div and span)

Now that I have an element known as “news,” I could use a style sheet to
position it as a column to the right or left of the page. You might be think-
ing, “Hey Jen, couldn’t you use a section element for that?” You could! In
fact, authors may turn to generic divs less now that we have better semantic
grouping elements in HTML5.

Get inline with span

A span offers the same benefits as the div element, except it is used for phrase
elements and does not introduce line breaks. Because spans are inline ele-
ments, they can only contain text and other inline elements (in other words,
you cannot put headings, lists, content-grouping elements, and so on, in a
span). Let’s get right to some examples.

There is no telephone element, but we can use a span to give meaning to

telephone numbers. In this example, each telephone number is marked up
as a span and classified as “tel”:
<ul>
<li>John: <span class="tel">999.8282</span></li>
<li>Paul: <span class="tel">888.4889</span></li>
<li>George: <span class="tel">888.1628</span></li>
<li>Ringo: <span class="tel">999.3220</span></li>
</ul>

You can see how the classified spans add meaning to what otherwise might
be a random string of digits. As a bonus, the span element enables us to
apply the same style to phone numbers throughout the site (for example,
ensuring line breaks never happen within them, using a CSS white-space:
nowrap declaration). It makes the information recognizable not only to
humans but to computer programs that know that “tel” is telephone number
information. In fact, some values—including “tel”—have been standardized
in a markup system known as Microformats that makes web content more
useful to software (see the Microformats and Metadata sidebar).

id and class attributes

In the previous examples, we saw the id and class attributes used to provide
id and class Values context to generic div and span elements. id and class have different pur-
The values for id and class poses, however, and it’s important to know the difference.
attributes should start with a letter
(A–Z or a–z) or underscore (although
Internet Explorer 6 and earlier have
Identification with id
trouble with underscores, so they The id attribute is used to assign a unique identifier to an element in the
are generally avoided). They should document. In other words, the value of id must be used only once in the
not contain any character spaces or
special characters. Letters, numbers,
document. This makes it useful for assigning a name to a particular element,
hyphens, underscores, colons, and as though it were a piece of data. See the sidebar id and class Values for
periods are OK. Also, the values are information on providing values for the id attribute.
case-sensitive, so “sectionB” is not
interchangeable with “Sectionb.” This example uses the books’ ISBN numbers to uniquely identify each list-
ing. No two book listings may share the same id.

2
 Generic Elements (div and span)

<div id="ISBN0321127307">
<img src="felici-cover.gif" alt="">
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p>A combination of type history and examples of good and bad type.
</p>
</div>

<div id="ISBN0881792063">
<img src="bringhurst-cover.gif" alt="">
Not Just for divs
<p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst The id and class attributes may be
</p> used with all elements in HTML5,
<p>This lovely, well-written book is concerned foremost not just div and span. For example,
with creating beautiful typography.</p> you could identify an ordered list as
</div> “directions” instead of wrapping it in
a div.
Web authors also use id when identifying the various sections of a page. In
<ol id="directions">
the following example, there may not be more than one element with the id
<li>...</li>
of “main,” “links,” or “news” in the document. <li>...</li>
<section id="main"> <li>...</li>
<!-- main content elements here --> </ol>
</section> Note that in HTML 4.01, id and
class may be used with all elements
<section id="news"> except base, basefont, head, html,
<!-- news items here --> meta, param, script, style, and title.
</section>

<aside id="links">
<!-- list of links here -->
</aside>

Microformats and Metadata

As you’ve seen, the elements in HTML fall short in describing <div class="location">Manchester Grand Hyatt,
every type of information. A group of developers decided that if San Diego, CA</div>
class names could be standardized (for example, always using <a class="url" href="http://events.example.com
“tel” for telephone numbers), they could establish systems for pub/e/403">Permalink</a>
describing data to make it more useful. This system is called </section>
Microformats. Microformats extend the semantics of HTML The hCard vocabulary identifies components of typical contact
markup by establishing standard values for id, class, and rel information (stored in vCard format), including: address (adr),
attributes rather than creating whole new elements. postal code (postal-code), states (region), and telephone
There are several Microformat “vocabularies” used to identify numbers (tel), to name a few. The browser can then use
things such as contact information (hCard) or calendar items a service to grab the information from the web page and
(hCalendar). The Microformats.org site is a good place to learn automatically add it to an address book.
about them. To give you the general idea, the following example There is a lot more to say about Microformats than I can fit
describes the parts of an event using the hCalendar Microformat in this book. And not only that, but there are two additional,
vocabulary so the browser can automatically add it to your more complex systems for adding metadata to web pages
calendar program. in development at the W3C: RDFa and Microdata. It’s not
<section class="vevent"> clear how they are all going to shake out in the long run,
<span class="summary">O'Reilly Emerging and I’m thinking that this metadata stuff is more than you
Technology Conference</span>, want to take on right now anyway. But when you are ready
<time class="dtstart" datetime="20110306">Mar 6 to learn more, WebSitesMadeRight.com has assembled a
</time> - great big list of introductory articles and tutorials on all three
<time class="dtend" datetime="20110310">10, options: websitesmaderight.com/2011/05/html5-microdata-
2011</time> microformats-and-rdfa-tutorials-and-resources/.

3
 Generic Elements (div and span)

Classification with class

The class attribute classifies elements into conceptual groups; therefore,
unlike the id attribute, multiple elements may share a class name. By mak-
ing elements part of the same class, you can apply styles to all of the labeled
elements at once with a single style rule or manipulate them all with a script.
Let’s start by classifying some elements in the earlier book example. In this
first example, I’ve added class attributes to classify each div as a “listing”
and to classified paragraphs as “descriptions.”
<div id="ISBN0321127307" class="listing">
<header>
<img src="felici-cover.gif" alt="">
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
</header>
<p class="description">A combination of type history and examples of
good and bad type.</p>
</div>

<div id="ISBN0881792063" class="listing">

<header>
<img src="bringhurst-cover.gif" alt="">
<p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst
</p>
</header>
<p class="description">This lovely, well-written book is concerned
foremost with creating beautiful typography.</p>
</div>

Tip Notice how the same element may have both a class and an id. It is also
possible for elements to belong to multiple classes. When there is a list of
The id attribute is used to identify. class values, simply separate them with character spaces. In this example,
The class attribute is used to classify. I’ve classified each div as a “book” to set them apart from possible “cd” or
“dvd” listings elsewhere in the document.
<div id="ISBN0321127307" class="listing book">
<img src="felici-cover.gif" alt="CMT cover">
<p><cite>The Complete Manual of Typography</cite>, James Felici</p>
<p class="description">A combination of type history and examples of
good and bad type.</p>
</div>

<div id="ISBN0881792063" class="listing book">

<img src="bringhurst-cover.gif" alt="ETS cover">
<p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst
</p>
<p class="description">This lovely, well-written book is concerned
foremost with creating beautiful typography.</p>
</div>

This should have given you a good introduction to how div and span ele-
ments with class and id attributes are used to add meaning and organi-
zation to documents. We’ll work with them even more in the style sheet
chapters in Part III.