The Symptoms
Ignoring HTML elements such as h1, h2, ul, li, and instead styling all text with classes applied to divs and spans. e.g.:
Which displays as this:
• Item 1
• Item 2
• Item 3
The Diagnosis
A case of divitus and/or spanitus.
The Antidote
Use HTML elements and then use CSS to style them.
-
.nav ul li{
-
font-size: 10px;
-
}
-
.nav h2{
-
font-weight: bold;
-
font-size: 12px;
-
}
Why Cure This?
There are many reasons:
-
Accessibility.
Using HTML elements for headings, lists, and everything else increases the accessibility of your site to users who may not interact with the World Wide Web in the same way that you do. Faulkner at Fadtastic notes that disabled users account for £50 million (USD$98,780,000 at time of writing) of the 2005 market share in the UK alone. Include those people!
-
Code Readability.
If anyone, and I mean anyone from developer to casual web nut, looks at your source, they will get a basic idea of the structure of your site. This is especially important if you are passing off your work to another developer.
-
SEO.
Search engines place heavy weight on sites that have pertinent keywords within h1 and h2 tags. The 15 minute SEO checklist (thanks, Daniel) also shows negative points are given to poorly coded sites - yes, that means those suffering from divitus and spanitus, you know who you are.
-
Cross-Media Support.
With the advent of pocket devices, mobile phones, and gaming systems with browsers, not everyone may support CSS or be able to view your site in the same way as you intended for the screen. Using proper HTML elements, you allow the devices to override the stylesheet if necessary and interpret your document more accurately. Opera's site offers a checklist of additional quick tips to make sites look great on small devices.
I'm sure there are myriads of other reasons to use HTML elements rather than spans and divs. Do you have any to add? Leave a comment and let me know.
Popularity: 5% [?]
May 22nd, 2007 at 9:36 am
This is always a good point to stress. Many people when they finally "get" CSS go too far and want to do everything as divs and spans. Do not reinvent the wheel, use whatever tag the best matches the structural intent of your code.
May 22nd, 2007 at 12:32 pm
You're right, Greg. Maybe if we cry out with enough voices, they will hear us. Your blog name this issue perfectly - "A Div Too Far" - how true that sometimes can be.