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. Here’s one for you. I use a beginning dropcap to start each of my posts on my site. I like the classy, magazine-style look it brings. However, the semantics of it are interesting. This is one of those style choices that don’t really have a good, semantically-correct tag to fall back on.

    Although it technically emphasizes the first letter, it’s not really a case of true emphasis in that the point is not to change the way in which one reads or perceives that letter. It’s just for looks.

    The method I use is to simply wrap SPAN tags around the first letter and use a class name called “dropcap.” I could use a class name that doesn’t specify the specific styling involved, but that styling is the sole point of the existance of this particular piece of markup.

    I could make use of the first-letter pseudo-element of the CSS2 standard to accomplish this, but then older browsers would not display the effect. The SPAN method bypasses that entire problem.

    Another possible way to do it (and this gets into the heart of your article) would be to wrap the initial letter in DIV tags with the same class name, float the element to the left, and let the rest of the paragraph wrap around it. Although this could be made to work and look exactly the same on screen as my SPAN method, it would just be terribly wrong on so many levels.

    The DIV is a block-level element and would have to be placed outside the paragraph from which the first letter is pulled. Essentially, you’d have a DIV that contained one letter of meaningless text followed by a paragraph wherein the first word is missing the first letter which might make it too meaningless or (worse yet) give it an unintended meaning.

  2. That is a tricky one, but I think you have coded it exactly how one should.

    The first letter really is no different than the rest of the word in terms of content, it is just a visual element.

    In cases such as that you would want to use a span instead of something semantically meaningful such as strong/em/div/etc.

    Obviously the as IE7 picks up steam we will be able to use pseudo elements more and more. If the market is enough you might feel comfortable that older browsers (which might be 1-2% of your traffic) don’t see the drop-cap first letter.

    ross
  3. Valid points, but you need to learn the grammar behind apostrophes.

    psychometry
  4. Heheh, yeah grammar is not my strong suite (nor spelling, but that is easier to check). 🙂

    For what ever reason, the way my brain processes information makes it hard for me to translate grammar rules into my writing regardless of how many times I have gone over them. Sucks for me. 🙂

    So I am left with the decision of either spending more time nit-picking through my posts and getting someone else to edit them (both of which would dramatically reduce the number of posts/articles I publish) or post anyways knowing that from time to time someone will leave me a comment that only contributes information that I and everyone reading my article already knows – that I suck at grammar.

    Since I write the articles in the effort of helping others, I figure a few wrong apostrophes is out weighted by an article that might aid a beginner or give people new ideas.

    Just my rational.

    ross
  5. I’m pretty good at grammar and spelling, but I still type posts in Word just to cover some of the stuff I miss. Say what you want about Microsoft, but that program has some pretty powerful grammar and spell checkers. Of course, I’m left afterward copying the post to Notepad and hunting down endash, emdash, “smart” quotes, apostrophes that have been converted to right-single-quotes, and such as that, but I’m still closer than I would have been otherwise. That particular method has caught some embarrassing typos for me.

  6. Thanks – enjoyed your post. Good refresher for me.

  7. Wow, as an avid reader of North Temple it is great to see you enjoyed it Ted.

    Thanks for the comment and great work on the NT blog, I read every new post with out exception!

    ross
  8. Pingback: class 2 div 2

  9. I think there is too much about how tags should always be semantic perfect meaning descriptive…
    Afterwall people navigate by the pages, not by the codes, it doesnt really matter that much if you used a DIV or a SPAN, or how descriptively you named its classes. Bottomline is, is it working? and by working I mean, does the resultant page looks the way it should, as you imagined/designed? so its ok!

    Anyway… Ive got a problem here. I have a DIV, which is a menu item. I use its background image to change the state of menu. on hover, the background-position changes from ‘left top’ to ‘left bottom’, and the menu item changes, because the image has the double height size of the div. Im sure everyone is familiar with this technique.
    Point is, when the visitor is in that specific section of the menu, it should always look as it looks on hover. So, after the “id”, I put a class called “selected”. It says that the background-position should be left bottom. However, nothing is happening. Im sure about the order of the statements in the CSS file. And it works if I use an inline style=”..” declaration.

    Any help?

    willhelm
  10. Great little synopsis, although I think it would be improved by having an example of how to call a span id, or class.

    For example do you use .spanname or #spanname to be called from an external css file. If # why, or if . why and so on…

    Lawrence

Comments are closed.