
Chapter 1 introduced you to <div> and <span>, two generic HTML tags that you can bend to your CSS wishes. When there's no HTML tag that exactly delineates where you want to put a class or ID style you've created, use a <div> or <span> to fill in the gaps.
The div tag identifies a logical division of the page like a banner, navigation bar, sidebar, or footer. You can also use it to surround any element that takes up a chunk of the page, including headings, bulleted lists, or paragraphs. (Programmer types call these block-level elements because they form a complete "block" of content, with line breaks before and after them.) The <div> tag works just like a paragraph tag: type the opening <div>, add some text, a photo, or some other content inside it, and then end it with the closing </div>.
The div tag has the unique ability to contain several block-level elements, making it a great way to group tags that are logically related such as the logo and navigation bar in a page's banner, or a series of news stories that compose a sidebar. Once grouped in this way, you can apply specific formatting to just the tags inside the particular div, or move the entire div-tagged chunk of content into a particular area, such as the right side of the browser window (CSS can help you control the visual layout of your pages in this manner as described in Part 3 of this book).
For example, say you added a photo to a Web page; the photo also has a caption that accompanies it. You could wrap a <div> tag (with a class applied to it) around the photo and the caption to group both elements together:
<div class="photo">
<img src="holidays.jpg"
alt="Penguins getting frisky"/>
<p>Mom, dad and me on our yearly trip
to Antarctica.</p>
</div>
Depending on what you put in the declaration block, the .photo class can add a decorative border, background color, and so on, to both photo and caption. Part 3 of this book shows you even more powerful ways to use <div> tagsincluding nested divs.
A <span> tag, on the other hand, lets you apply a class or ID style to just part of a tag. You can place <span> tags around individual words and phrases (often called inline elements) within paragraphs to format them independently. Here, a class called .companyName styles the inline elements "CosmoFarmer.com," "Disney," and "ESPN":
<p>Welcome to <span class="companyName">
CosmoFarmer.com</span>, the parent
company of such well-known corporations
as <span class="companyName">Disney
</span> and <span class="companyName">
ESPN</span>…well, not really.</p>
|