This is probably one of the more difficult area's of markup and quite some people get it wrong, since they might see the complete value of web standards, but they are not really used to it and end up with style in their markup. I noticed this on leiden.nl for example. Today a saw another classic example from Minz Meyer when he nailed down an Internet Explorer problem in Absolute and Relative ConfuSionS. Although his post is wonderful and gives you some extra insight in how to handle IE, which is important since it probably remains "updateless", he misses one (important) markup point, which isn't particularly relevant to his post, but it is relevant for markup in general.
<div id="headmast"></div> <div id="content"></div> <div id="left"></div> <div id="right"></div>
In the above example we see two problems and one potential problem. Note that they are not problems in his post (well a bit, since they might give people the wrong ideas), since that is about a CSS problem, but it would hurt if you take that markup and build a website around it. It would be the same as having the following markup:
<em class="red"/>
Were the EM element was filled with some value. What if you want to color all special instances of EM (now marked 'red'), 'lime'. Yes, that gives a problem, since you need to change both markup and style, something we have tried to avoid from the beginning.
Now I'm used to use IE to post this comment? Anyway, although I do not use it now I've used class="red" (or something like that) in the past where I made it actually green and I never had a problem with it. Only if you're stupid enough to also change the class="blabla" into something else there is a problem.
Well Anne, you know that I generally agree. But the purpose of marking it up like this was to help people getting an idea where which div is supposed to be on screen throughout the example, and therefore the terms used are somewhat presentational.
Hi Anne -- Thought you should know this page does not render on Mozilla (1.6) because of the unescaped '&' in the title.
Frenzie, that doesn't make sense and you probably didn't get the point. Giving such a class name is the same as using FONT in your code and overwriting it later with CSS.
It's just incorrect use of markup.
June 4, 2004 will go down in history as the day Anne van Kesteren, markup geek l'extraordinaire, failed to escape an ampersand. Anyway...
It's just incorrect use of markup
I disagree. There is nothing in the spec that stipulates or prevents a particular type of class or id name from being used.
You didn't give an example of a better name, but I assume you'd prefer something like "color-1" or "wrong", depending on its actual use (which we don't know).
However, as long as the name makes sense to the author, anything is okay (as long as the name doesn't start with a number - now that would be incorrect!)
There are more important battles to be fought.
Anne, my point is that any name is correct, as long as you don't change the names of the classes in the (X)HTML, there is no problem and you use CSS fine. I think you miss the point by assuming you would need to change all instances of class="red" to class="lime". I see no problem in .red{color:lime}. You see no problem in lack of usability in this comment system yourself. I see no problem in lack of coherent names for people who haven't designed the code. It's the author who is important in this case, not the bypassing person who might not understand it. It is not the same as using font tags unless you use style="color:red".
Heh, I assumed WordPress to escape that for me, but it did not.
Lars, the specification doesn't say anything normative about semantics either, but we all know they exist.
Frenzie, I still disagree with you. Lars assumes the right thing. The class name should be based on it's actual use. This could be a 'warning', an 'error' et cetera.
And about my comment system, it is useable enough for most people who visit this site.
Anne, I use warning or whatever myself (not two years ago, but that's long ago). But for me the main point of using CSS after all is a combination of separating content and markup (that's easier to edit for me) and to make my pages smaller.
When you use class="red", then you still have both advantages, you'll only lose one of them if you change the name of the class while changing the style of the class.
You can't separate content and markup. You can separate markup and style however. When you use class="red" you are actually using stylistic hints in your markup and therefore it is inappropriate.
Anne, while you may have a point here, it is also moot. The CSS will function anyway, no matter what you name your classes and ids. Take a web developer from Onyxistan for example. He uses class="red" because in Onyxish "red" means warning.
While I agree that it doesn't make sense from a semantical point of view to use presentational names in your markup, it is still valid. You can only state it is incorrect on a meta level of semantic fundamentalism.
Note that I agree with you and do not recommend the practice you criticise, but I would rather describe it as "clumsy".
Note that what I actually disagreed with was Yes, that gives a problem, since you need to change both markup and style, something we have tried to avoid from the beginning.
Further I agree with you. I wouldn't describe it as clumsy however, I would just describe it as "has just discovered a few of the benefits of CSS".
I never even knew CSS had many benefits until I stopped using IE. I had tried some things, but they hardly worked as expected, as a result, I concluded CSS sucked. Since I became more aware of Opera (I never liked Mozilla until recently), my view radically switched around. But my statement wasn't even true. I have always used warning and never red. It was only because I was working with code together with others that I also used silver and that Watchzine currently has the class dotted-border.
You can't separate content and markup. You can separate markup and style however. When you use class="red" you are actually using stylistic hints in your markup and therefore it is inappropriate.
But we can seperate content and structure. For example the content is XML and the structure is XHTML (using XSLT as a link between them)
We all know that an id attribute has a semantic value, but I'm still wondering in which way a class attribute could have a semantic value too. If it does have a semantic value I totally agree with Anne, but in most cases it doesn't have a semantic value. So I've to agree with Frenzie that it doesn't really matter.
The W3C agrees with me for once, nice! (Thanks TumTum)
<div id="headmast"> and <div id="content"> are actually quite descriptive of their function, instead of their looks.
For things like id="left", I tend to use stuff like id="side". Though it may in fact appear ‘on the side’ of some other content, it mostly really is information sitting on the sideline.
Or else one could start arguing why the H# element is called a ‘header’.
Note: which is not what it is called. It is called a heading. Can’t believe I just made one of the most made mistakes in HTML terminology.
This is probably one of the more difficult area's of markup and quite some people get it wrong
Some people also use apostrophes instead of plurals too, Anne! * :-)
BTW, any chance your comments textarea could have two paragraph tags already inserted in it, ready for typing?
* I know - English is not your first language so I'll forgive you. Great site here, love the new bright colours!
Kris, I would argue 'side' isn't semantic either. Something like 'nav' or 'news' is much closer to real semantics. For Hx this doesn't matter, since the semantics of that element are already defined and wide spread.
I agree with Anne. Class-names and ID's should reflect purpose, meaning or behaviour, not presentation. Presentation is what CSS is for. Hence, a class should be called «important» and not «red» if the purpose is to emphasize something as important.
But I think that 'left' is an OK class-name, although 'menu' would be better if the box actually contains a menu. The markup should be as representational independent as possible, and the classes and ID's should try to give additional semantical value to the document, if possible.
I still argue for ‘side’ as a declaration of importance. Often, this is a container for changing content with mixed purposes, not just navigation. Calling it ‘navigation’ when it isn’t, or calling it only ‘navigation’ when it is, is not a real solution. That is why I try to find a term that nicely encapsulates the diversity of purposes.
At a soccer match, the audience, the coaches, the spare players, the medics, most of the referees and the hotdog salesman, they all are ‘on the side’. That does not tell where exactly, or about how they look. It says that they are not part of the field, the main game, the main ‘content’.
Be free to suggest a better phrase instead of ‘side’.