CSS - Divitis and Tagitis

Tagitis: Tagitis is the adding of many useless XHTML tags. This header, for instance, suffers from tagitis:


You don't need the extra <em> tag. One line of CSS would give the same effect:

h3 {
  font-style: italic;

You may consider the <em> tag from the semantic point of view (the <em> tag imply a certain meaning), but I think the semantic meaning of the h3 tag already cover it.

Divitis: a common problem with webdesigners, using too many nested/unnecessary divs to mark up a page. Divs are grouping elements. They are supposed to be used to group sections of the page into divisions - for example, a top division with logo and links, a sidebar, or even a footer. They are generic grouping elements with no default style - no borders, padding, margins, fonts. The only default style of a div is that it is a block-level element - which, by default, will take up the maximum width available. Divs are not to be ignored completely. Many CSS designers use extra divs to display little niceties for the site - for example, a fixed div with a background image that sits at the top of the page. The <body> tag is a container (and you can style it too, using style='margin: 0 auto') so you don't need a div with id='container'. Any time you see a div or span with an ID or Class containing the word "head" you can guarantee it should be replaced with a heading tag.

Divitis: what it is, and how to cure it.
Why tables and divitis make your site inaccessible?
Avoiding classitis
Combating Classitis with Cascades and Sequential Selectors

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License