June 8, 2007

Wanted Dead: Bad Tags

Bad tags usually come down to tags that are presentational, which is the realm of CSS, or simply not valid, leading to unreliable code that can’t be guaranteed to work on different or future browsers.

  • Applet --- Embed a Java applet. Not valid. Use object tag.
  • b --- Bold. A valid tag, but purely presentational. Use CSS font-weight for bold or HTML em or strong for emphasis.
  • big --- Big text. A valid tag, but purely presentational. Use CSS font-size.
  • blink --- Blinking text. Not valid. Use JavaScript or CSS text-decoration: blink if you really insist on inflicting this.
  • center --- Center. Not valid. Use CSS margin: 0 auto or text-align: center.
  • font --- Font name and size. Not valid. Use CSS font, font-family, and font-size.
  • hr --- Horizontal rule. A valid tag, but presentational. Perhaps the most controversial of these Bad Tags, many argue that this has a genuine role as a divider of content. As it belongs to the XHTML Presentational Module and as its name implies, however to truly separate structure and presentation, hr should be avoided. CSS borders can replicate hortizonal rules, as can background images.
  • i --- Italic. A valid tag, but truly presentational. Use CSS font-size for italics or HTML em or strong for emphasis.
  • marquee --- Scrolling text. Not valid. Use JavaScript, Flash or other plugin.
  • small --- Small text. A valid tag, but purely presentational. Use CSS font-size.
  • sub --- Superscript. A valid tag, but purely presentational. Use CSS vertical-align or position.
  • sup – Superscript. A valid tag, but purely presentation. Use CSS vertical-align or position.
  • u --- Underline. Not valid. Use CSS text-decoration.
  • align --- Aligns content. As with center tag, CSS text-align should be used.
  • background --- Background image. Not valid. Use CSS background-image.
  • target --- Specifies where a link should open (such as in a new window). Not valid. JavaScript is a possible alternative, but the use of this should be questioned due to the adverse effect it has on usability and accessibility.
  • link, alink and vlink --- Non-visited, active and visited link colors. Not valid. Use CSS :link, :active and :visited pseudo-classes.