The series of posts on Starting Good CSS Habits begins here.

Christoph Wiese, a friend who already has good CSS habits, made some good points I forgot to put in the last post. Before we keep going, it is worth going over them.

HTML vs. XHTML and Self-Closing Tags

Christoph pointed out that the self-closing tags <br /> and <hr /> are technically only valid for XHTML, not HTML. XHTML is the markup language that implements HTML as an XML format. It is HTML but with the stricter structure required by XML. I advocate XHTML and that is where our page will be headed.

While XHTML is our goal, at this intermediary stage without any indication that the page should be read as XHTML, our document is still considered HTML by browsers. I think all browsers handle our self-closing tags in HTML gracefully, but it is technically incorrect. Our page is a work-in-progress so just keep in mind that it may be invalid during the transition.

Lowercase Tags, Attributes and Entities

Christoph mentioned that my “bad HTML” example did not contain something he sees all the time: capitalized tag and attribute names. In HTML capitalization does not matter, but it is considered a bit amateurish. It is like shouting your code at anyone reading it.

Here is an example.

Or you might find mixed-case tags, as I used in my table-tag.

But XHTML uses lowercase names exclusively. No all-caps, no mixed-case. Some developers are surprised to learn that even onmouseover and onclick should be all lowercase.

In addition to tags, entity names in XHTML should also be lowercase. You can use &Eacute; or &NBSP; in HTML, but in XHTML they must be &eacute; or &nbsp;.

Remember: lowercase is recommended for HTML, essential for XHTML.

The capitalization rule applies to tag and attribute names, but not the attribute values. So, for example, onmouseover should be lowercase, but any JavaScript inside the quotes can keep whatever capitalization it needs. But in XHTML, we still need to take care when specifying attribute values.

Attribute Values

This next point is common problem with outdated HTML and I am glad Christoph pointed it out. In old-style HTML, you only need to put quotes around attributes that have whitespace and it is acceptable to have empty attribute values.

In XHTML, every attribute must have a value and that value must be quoted. Omit attributes which do not have a value.

In my HTML, you may notice that I put in links with empty href attributes. I left them blank because they were just examples, but to be technically correct they should contain a URL, “#”, or omit the href attribute altogether.

Citations

We discussed how <italic> and <i> elements should use <em> instead. Christoph pointed out the exception. If you have a book or magazine title putting it inside “emphasis-tags” would be mislabeling it semantically. It is not being italicized because it needs emphasis (like “semantically” in the last sentence), it is being italicized because it is a citation.

For citations, you should use <cite>citation tags</cite> in place of <italic> tags. The default style for cite-tags is italic. While the result is the same, cite-tags are semantically correct and allow citations to be styled differently than emphasized elements.

This entry was posted on Wednesday, April 8th, 2009 at 11:58 am and is filed under CSS, HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.