Grouping content
When marking up a page of content, you will always have groups of elements that are related to each other in some way. Whether it’s a headline and a couple paragraphs, a set of lists, or branding and navigation, it makes sense to group and identify these elements together. You can do this using the
<div>
element, short for division. The <div> element is simply a way to group content into related chunks and provides no further semantic meaning (or default visual appearance) to the content.
For example, if you have a headline followed by a few paragraphs of information relating to the headline, you can nest this content inside a <div> element to indicate that form of relationship. It’s a very loose relationship, mind you, but it can be an important and useful tool when marking up entire pages of content. The <div> element can also be nested within itself to form more specific associations,
using one <div> element to relate content already grouped inside other <div> elements.
<div>
<h1>Overview of How I Learned to Ride a Bike</h1>
<p>In this short excerpt, I'll describe the various steps I needed to
take to learn how to ride a bicycle when I was but a young
lad.</p>
</div>
By grouping content into logical chunks like this, you can then effect changes and work with the entire
chunk at the same time. But, how do you identify which chunk you want to work with? For that, you
need to provide descriptive names to these chunks using the common attributes described in the next
section.
Identifying content
There are two core attributes defined by the XHTML DTD that can be used to give elements names
that you can refer to later (mostly in Cascading Style Sheets, described later in this book). These attributes
are id and class, and they can both be used on any element. The id attribute is simply a way to
give a unique identity to an element. The class attribute serves a similar purpose, but instead of being
unique throughout the document, the same class can be specified any number of times.
A common example of this is to set the id attribute on particular <div> elements to provide a little
more meaning to the group. For example, say you have a headline and a paragraph about a featured
product on your website:
<h1>Swingline Stapler</h1>
<p>This workhorse stapler brings you a solid and consistent performance
that makes it an industry standard. An all-metal die-cast base for
years of durability. A performance driven mechanism with an inner
rail for long-term stapling integrity. Ease of use, refined design,
time-tested features: exactly what you'd expect from America's
#1 stapler.</p>
Let’s nest these two elements inside a <div> element to group them together:
<div>
<h1>Swingline Stapler</h1>
<p>This workhorse stapler brings you a solid and consistent
performance that makes it an industry standard. An all-metal
die-cast base for years of durability. A performance driven
mechanism with an inner rail for long-term stapling integrity.
Ease of use, refined design, time-tested features:
exactly what you'd expect from America's #1 stapler.</p>
</div>
Now you can identify that <div> element as a “feature” on your web page by using the id attribute:
<div id="feature">
<h1>Swingline Stapler</h1>
<p>This workhorse stapler brings you a solid and consistent
performance that makes it an industry standard. An all-metal
die-cast base for years of durability. A performance driven
mechanism with an inner rail for long-term stapling integrity.
Ease of use, refined design, time-tested features:
exactly what you'd expect from America's #1 stapler.</p>
</div>
Since you’ve used the id attribute, you’ve also implied that you’ll have only one “feature” on your web
page at any given time. If this isn’t true, and you’ll in fact have multiple “features,” then you need to
use the class attribute instead. You can still use unique values in id attributes to identify individual
features if you like.
<div class="feature" id="feature-1">
<h1>Swingline Stapler</h1>
<p>This workhorse stapler brings you a solid and consistent
performance that makes it an industry standard. An all-metal
die-cast base for years of durability. A performance driven
mechanism with an inner rail for long-term stapling integrity.
Ease of use, refined design, time-tested features:
exactly what you'd expect from America's #1 stapler.</p>
</div>
<div class="feature" id="feature-2">
<h1>Black Standard Stapler</h1>
<p>Not as exciting as the Swingline Stapler, but a classic stapler
nonetheless! </p>
</div>
Most important, id and class attributes should add meaning to the markup and describe what the
content is. Avoid id values that are presentational in nature, such as left-column or blue-box.
Presentation and styling will be completely handled using CSS, so your markup should remain as
semantic as possible.
0 comments:
Post a Comment