The div and span Tags

The <div> and <span> Tags

You will undoubtedly find within your template two sets of HTML tags that you might not have seen before: the <div></div> and <span></span> tag pairs. These elements are discussed in this appendix rather than Appendix A because they're most often used in conjunction with a thoroughly style-sheeted site.

The <div> is a division of content, which is like a paragraph (<p></p>), but without the hard-coded line breaks that come along with using that tag pair. Most of the block-level elements you'll find in your Blogger template will be within the <div></div> tag pair, often with an ID, class, or both applied to it. For instance, the following identifies a sidebar area and applies the "sidebar" class to all the content contained within:

 <div  >some content</div> 

The <span></span> tag pair is an inline tag rather than a blog-level element. This tag pair essentially enables you to create your own physical markup tags. Because there's no standard HTML tag for "very small moss green text on a light purple background," you can create your own class:

 .mossonpurple {         font-size: 7pt;         color: #669966;         background-color: #CC99FF; } 

With the style defined, you can apply it to the text spanned with the appropriate tag:

 <p>This is <span >horrible-looking</span> text!</p>