HTML tag semantics

HTML (hyper-text markup language) is uses tags imbedded in the text as suggestions for interpretion by the web browser software visitors use to view a site. These have meaning deeper than font sizes used in page layout or in print media. Consider the heading tags:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

They not only change font size, but also classify the order of importance in a hierarchy. For example, suppose you want a heading to register as important <h1>Important Heading</h1> but it visually dominates the page more than you want.

There are a number of ways to handle this, but I prefer to control appearance with CSS (cascading style sheets). Both lines below are H1 level, but for the second one I have applied the class "soft" from my site style sheet making it less intrusive visually but preserving the interpretation I want.

Important Heading

Important Heading

In addition, should I later decide to use another color or a different typeface, I can do so for every place on my web site where I use the "soft" class simply by editing my style sheet.

Other common misuses of tags are:

If you are deciding whether to use a GUI program for constructing your web pages, in addition to appearance in your browser, check the page source for the above plus overuse of tables with cells containing clearpixel.gif images to control spacing. You can often improve performance and make maintenance easier by using HTML as it was intended to be used.

Addendum: As I look at these words while visiting this page to add Google Analytics code, I have to say that misuse of the semantic meaning of HTML tags has gotten worse, not better. The people who ignored this are now designing templates and themes for CMS! My point is that you build from the inside out. Like, if you see a blue car that works well but you want a red one, it is a lot easier to paint the blue car red than to repair or replace an engine, brakes, etc. on a non-functional red car.
15 September 2009

web design * database * Macintosh OS X * Linux * UNIX