Account services

Bad habits 3: Incorrect use of tags for graphical effect

Some webdesigners think only graphically when they design a page. In their effort to make it look good, they find they need a large font, and then they look in the HTML4 specification to find a tag that by default have the properties they look for and then they use it. The clearest example I've seen on a website called AclAdmin.

  <h1>Service Name: DataDict</h1>
  <h2>ACL Path: /</h2>
  <h2>Description: <em>DD_root_level_ACL</em></h2>

The page's purpose is to edit the access control list for an object. The object here is DataDict's "/". So none of the three headlines are "real" headlines in the sense of describing what the purpose of the page is. A more appropiate page headline would be:

  <h1>Edit Access Control List</h1>

Our three original friends are information describing the object we are editing, and since they are of the form label/value pairs, a two column table would be more meaningful for them.

Service NameDataDict
ACL Path /
Description DD_root_level_ACL

But this example is easy to understand. There are more examples that are less obvious, such as the use of <blockquote> to get an indentation effect, or <address> for things that are not addresses. Proper use of <div> and <span> with styling should be used.

An even more non-obvious potential for abuse is the <i> tag to achieve italics. I almost all cases your intention is the emphasize something, and then you should use the <em> tag. Why? - <i> and <em> looks exactly the same! Because the webmaster might have decided to do something to the <em> tag to achieve the proper emphasis effect in the context of all the other styles on that website. It might be that the texts are already in italics and so the <em> tag would be restyled to be "normal".

Furthermore, with the chance of translation of your English text to the 24 languages EEA operates with, you should ask yourself; Does italics make sense in the Greek, Cyrillic and Georgian alphabets?

Italics has it place in specific circumstances - such as mathematic symbols, but most often you should favour <em>. The same goes for <strong> over <b>.