updated: November 15th, 2006 / Ross Johnson / 10 Comments

The Semantic DIV, ID, Class, and Span

For those just starting (or even pretty well versed) in CSS and Web Standards, knowing when to use what code can be pretty confusing. After all, there are many instances where any number of the popular tags can accomplish the same goal.

To better understand why we would use one of these tags or elements, let’s first define them all.

HTML Tag Definitions

DIV tag

The div tag defines a division/section in a document

SPAN tag

The span tag is used to group inline-elements in a document.

So the DIV tag is to section off portions of a HTML document. Often times these are used more-so for design rather than semantics and content. That is to say most people won’t use an extra div tag to divide a menu from a header unless they have too. This is more so due to designers over use of the div element being frowned upon, because semantically using a div can be correct in this instance.

A span is to group a set of INLINE elements in a document. So you wouldn’t want to use a span tag to divide your footer from the rest of the page. However, if you had a header that you wanted to be two colors you could use the span element inline with the header to change the color. For Example:


<h1>This headline is <span>TWO COLORS</span></h1>

However, there might be more semantic methods of producing the same effect. That is to say that by itself a SPAN tag has no semantic value. It doesn’t describe the content in any useful way. By changing the color, you are adding extra emphesis to the last two words of the heading. If those last two words really should be emphesized (and not simply another color for design) it would be better to use the <em> tag (or maybe even <strong>).

You can use a SPAN with in just a DIV element, however you wouldn’t want to use it to create colums – that is a job for two DIV’s because you are literally – dividing another DIV. Span is for an inline change, and will not validate if it has tag’s placed with-in it.

Class and ID attribute definitions

ID Attribute

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element. Therefore, in XHTML 1.0 the id attribute is defined to be of type ID.

Class Attribute

This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

That might be a little confusing, so here is a simplified way to look at it

ID’s can only be used once a page, so they should only be used for unique elements. In fact I say that any unique element on the page should be styled with an ID over a class. This makes it much easier to tweak a presentation element from page to page by assigning it a class.


<ul id="top_navigation"> [...]

Or for example if you wanted your footer to have a different background on one page than the others, you could keep all the structure and presentation code in a #footer ID, but change the background with a .alternate_footer class.


<div id="footer" class="alternate_footer"> [...]

Since Class’ can be used many times, any time you have a repeated design element it is best to put it into a class. That way you can code quicker, and only reference the class as opposed to rewriting the code in every ID you come across.

For example – you could have a column class that has a width of 50%, and is floated to the left. That way instead of writing each column ID with a width/float, you can simply assign that div a class and move on.


<div class="column"> ... </div>

<div class="column"> ... </div>

[...]

Class’s are also great ways to shape general/common elements such as making a list with out bullets, floating images/elements one direction or another, or assigning a clear: left / right…

Naming

This isn’t the original scope of my post – but it is also important to think about semantics when naming your class’ and IDs. However don’t be too specific, such as naming the class “bright red background.” At some point you may redesign and change that red to a blue, and the code becomes harder to navigate, follow, and consume. Instead name it to “alt_background” or “new_bg_color” , so that if you do change/tweak the name still is semantic.

The same can be said for IDs, use “header” , “footer” , “content” , “nav” , “sub_nav” , etc. By keeping the code semantic, and developing your own set of standards for the names of your IDs you will find it easier to go back and edit older documents, and quickly plow through new ones improving productivity and response time. Both which are very important.

Closing Statements

The goal is to wrap your content with tags that describes them as best as possible. This is the idea of semantic web design. Because of this it really is best to avoid using div’s and span’s where they are not needed – simply because they don’t describe the content in any way other than “a section of a page” or “a span of an element.” Instead it is better to use strong, em, lists, acronym, abbr, bloackquotes, etc

That’s all folks, leave me some feedback…

10 thoughts The Semantic DIV, ID, Class, and Span

  1. Pingback: class 2 div 2

Comments are closed.