DIV versus SPAN

The building blocks of CSS page layout are the <DIV> and  tags. These can also be thought of as the "BLOCK" and "INLINE" tags. This article tells you all you need to know about these seemingly similar elements.

The DIV tag

If you are totally green (new to CSS), it may help to first consider the paragraph tag . Whatever you put inside the paragraph tag will start on a new line. This makes sense, a new paragraph should start on a fresh line. The paragraph element also takes up the full amount of width available. The DIV tag works exactly the same as the paragraph tag in these respects. Where the two elements start to diverge is in default whitespace. The paragraph tag adds a bit of whitespace above it, whereas the DIV tag adds none. It makes sense for the paragraph to do this because it is a common written style for new paragraphs to be separated by one line of whitespace. The DIV tag; however, is a more general purpose element that is used to position information and hence its design is to not inherently add whitespace.

You can arrange DIV tags in many different ways. They are more flexible than TABLE tags and, in fact, render the use of TABLES obsolete because, not only are DIV tags more powerful, but they are easier to maintain.

A BLOCK element

This is a good time to bring up the concept of a "block" element. The DIV tag is a block element. This means that it defaults to starting on a newline and fits its contents in a "box." You can put borders on this box, and you can give it padding as well as margins.

The SPAN element

For the uninitiated, it may help to first think about the  tag. The FONT tag is not really part of true HTML. It is an extension to HTML that Netscape added to its web browser. This was during a time when HTML was evolving too slow for Netscape's desires so they felt free to extend HTML anyway they saw fit. Netscape was so popular that now everybody recognizes the FONT tag. If you've been developing HTML for a while you know that the font tag is used to give a text string color, size, style, etc. For the most part, this is exactly what the  tag is used for. Whatever text you put in a span tag will take on the font, shape, color, and style you desire. The default width for a SPAN tag is simply the width of whatever elements are inside the SPAN tag. This is the opposite of the DIV tag. The DIV tag takes up 100% of the space available whereas the SPAN tag takes up only as much width as it needs to display its contents.

An INLINE element

The SPAN tag is an example of an INLINE element. This means that it is part of whatever line of text you may have. It does not create a new line and it does not exhibit any padding or margins.

CSS Properties

The DIV and SPAN tag are rather bland. They don't have much of any style or features of their own. But, you can make them do practically anything you want by defining style properties. It's a total thought shift. Yes, using defined properties you can make a DIV tag act like an IMG, UL, or practically any other tag. You can also take a basic HTML element, such as an IMG or UL tag, and change their behavior using CSS properties. This is because CSS properties apply to all HTML elements.

A rigid way of using CSS properties is to use the "style" attribute of an HTML element. For example, suppose you wanted text to be bold, you would type . The downside of doing it this way is that if you wanted to make a global change and un-bold, you'd have to go searching through all your HTML and making a multitude of updates. A very rigid or "hard coded" way of going about life.

A flexible way of using CSS properties is to use a "class" or "id" definition and reference that from your HTML element. Using the previous example, suppose we want text to be bold. You would write  or . Between the two naming choices, you should choose "cellNumberStyle" because that truly references the purpose of the style you want to apply. Today you only want to make text bold, but tomorrow you might want to make it underlined instead. Had you chosen "boldStyle" you could still write it so that it makes everything underlined at a later date, but then you'd have a misleading name for your style property, or, you'd have to go through all your HTML and change "boldStyle" to "underlinedStyle."