Christian Ziebarth

Just yell a little

In Uncategorized on December 29, 2008 at 8:11 pm

In the Internet world writing something in all caps is seen as the cyber-equivalent of yelling . . . vocally . . . out loud, basically rude “netiquette” (haven’t seen that term in a while). While I agree with that general sentiment I feel that there are situations where I wish people would just yell a little.

What I’m getting at is when mentioning X/HTML elements in articles and when referring to them within CSS documents I wish web developers would put them in capital letters.

It is true that within an XHTML document itself tags should be in lowercase but outside of an XHTML document there is no such requirement. The only exception is if your XHTML is being served as XML, in which case the elements in your XHTML document and their respective elements in the CSS must be exactly matched, but since XHTML is hardly ever served as XML that is only a rare case.

I understand that some people may just like the style of always putting XHTML tags in lowercase letters, but sometimes I get the distinct feeling people think the XHTML police will be after them if they ever show an XHTML tag in uppercase letters.


Why do I feel that way? It’s because it greatly increases readability. Consider the following example from a style sheet I am currently working on. If I write everything in lowercase as follows:

  1. #header ul li a:link
  2. {
  3. color: #FFFFFF;
  4. text-decoration: none;
  5. }

then when I glance at it I have to take a few extra moments to figure out which parts of it are referring to X/HTML elements. But if I type the rule as follows:

  1. #header UL LI A:link
  2. {
  3. color: #FFFFFF;
  4. text-decoration: none;
  5. }

it is much easier to read. The difference is even greater when I look at a style sheet somebody else has created.

What about in an article?

It seems to also be popular to put X/HTML tags in lowercase when simply mentioning them in a web development article. For example, in this excellent article on CSS Stacked Bar Graphs at The Wojo Group site, the following appears:

Next, we hide the dt tags.

But its readability is greatly improved if it were to appear as follows:

Next, we hide the DT tags.

Of course, its readability would go up even more if the tags were highlighted in some way or otherwise made to stand out, like so:

Next, we hide the DT tags.

But even just putting them in uppercase letters helps a lot, and it should be emphasized that it in no way violates any rule of web development.

UPDATE: I just stumbled across a different type of example where seeing an X/HTML element written in uppercase would’ve greatly improved readability. Actually, it’s really another reason why it would help for people to do that when writing style sheets.

I am working on the style sheet for this very blog and I found in it some places that said .cite and some that said cite. One is a class name and one is referring to the CITE element. If the element had been written in uppercase I would’ve been able to distinguish the two much quicker.

  1. While I agree that when writing articles or documentation, it makes sense to capitalise tags for legibility, I personally would never capitalise any of my CSS. It would drive the meticulous nature in me insane.

    I can’t see how it makes the selectors any easier to read to be honest, and I think laying out your declarations with indents, headings and logical ordering of properties is more important for stuff like that.

    It’s also far more consistent, (and therefore logical) – not to mention aesthetically pleasing – to keep things the same in both mark-up and CSS, no?

  2. I think each person is going to have their own personal style and what works best for them. The point of my article is not to make people follow one rigid way of doing things as much as it is that I have often had the feeling that when many in the web development world learned that tags are supposed to be in lowercase within an XHTML document they then generalize that and think they have to lowercase X/HTML element references EVERYWHERE they write them. You seem to know that’s not the case. Can I prove that people think that way? No, but in all my exposure to the web dev world and looking at others’ code, tutorials, etc., I sure get the feeling that that is the case.

    Your personal style is to uppercase them when writing articles or documentation but lowercase them within a style sheet. Personally, when I see a style sheet it helps me a lot to have X/HTML tag references capitalized, and that’s possibly my own shortcoming. All the other things that keep the CSS clean and organized help too, and may get touched on at this blog later.

    Thanks for leaving a comment.

All comments are screened for appropriateness. Commenting is a privilege, not a right. Good comments will be cherished, bad comments will be deleted.