Guidelines for creating better markup

I've mentioned several times here that I feel writing markup (or any other code, for that matter) is a craft. I take pride in writing as lean and clean code as possible. From the looks of things there aren't a whole lot of other Web professionals that feel that way, but we do exist.

One of them is Garrett Dimon, who has touched upon this subject before, and in Markup as a Craft (published at Digital Web Magazine) provides twenty-one guidelines that will help you create better markup. That's a lot of guidelines, but they are all relevant and contain very good advice. Highly recommended reading.

After reading Garrett's article I couldn't resist creating a list of what I think are the six most important guidelines for writing better markup:

  • Keep it simple. Keep your markup as simple as possible, which is often simpler than you may think at first.
  • No layout tables. This is obvious to anyone who has not been living in a cave for the last several years. Unfortunately, the caves seem full of Web developers. Tables are meant for marking up tabular data, not creating layouts. Use CSS instead.
  • Avoid classitis. Does every element you want to style with CSS have a class attribute? They almost certainly do not need to. Use descendant selectors instead.
  • Structure and meaning first, presentation later. Focus on semantics and document structure while you are writing markup. Save the presentational thinking for when you are writing your CSS.
  • Know all HTML elements and attributes. Go through the Index of Elements and the Index of Attributes in the HTML 4.01 Specification. You will probably make some new acquaintances. Read up on them and learn when to use them.
  • Validate, validate, validate. The markup validator is your friend, not your enemy. Anybody can make typos or mistakes. The validator will help you catch them and improve your markup.

What would your most important guidelines for writing better markup be?


This article has been translated into the following languages:

Posted on April 12, 2007 in Quicklinks, (X)HTML