Jeffery Zeldman offers this entertaining definition for Divitis and Classitis:
Classitis is the measles of markup, obscuring meaning as it adds needless weight to every page. The affliction dates back to the early days of semi-CSS-capable browsers and the many designers’ initially childish comprehension of how CSS works.
Alas, many have not yet outgrown that childish misunderstanding of CSS … Classitis is as bad in its own way as the
<font>tag ever was; rarely does good markup require it … At other times classitis is exacerbated by a still more serious condition … divitis … Classitis and divitis are like the needless adjectives with wich bad writing is strewen. They are the weeds in the garden of meaning. – Jeffrey Zeldman, Designing with Web Standards
An example of markup wraught with divitis and classitis:
div elements and 11 classes for a single item. What a stench! :) View this markup in action.
The equivalent markup disease free:
Cleaner, more meaningful, and with all the functionality of the former code. One
div element and 3 classes for a single item. ShamWow! View this markup in action.
Both of these markup snippets are visually and functionally equivalent. In the first example the
classes, and cryptic
ids weigh down the page and pollute the meaning of the markup. In the later, a more semantic / structural approach is taken Both these snippets were pulled from my attempts at the Google Web Developer Exercise.
Clean meaningful markup is the API that users and web crawlers consume – it’s important and easy to keep things clean, it just takes a little experience. Thank goodness for patterns like MVC that let us control our API (the markup).
I always found the definition of “Semantic / Structural Markup” murky on the intertubes. I thought Jeffrey Zeldman described it well in his book Designing with Web Standards.
What Is Semantic / Structural Markup?
Markup is “semantic” when tags are chosen according to what they mean. For example, tagging a headline
h1because it is the most important headline on the page is a semantic authoring practice. Tagging a headline
h1“to make it look big” is not. … I use the phrase “structural markup” to mean pretty much the same thing as “semantic markup.” (“Structural markup” takes its name specifically from the idea that the web document has an outline-like structure.) – Jeffrey Zeldman, Designing with Web Standards
Zeldman goes on to make many great points on why semantic markup matters, here’s my paraphrase.
Why Does Semantic / Structural Markup Matter?
- it helps make web sites more accessibile
- it provides a means to meet government mandatied web accessibility guidelines
- it’s a critical component for Search Engine Optimization (SEO) because the Google search engine is the biggest blind user on the web – Zeldman
- doing the right thing is the right way to do things - developers should have a sense of pride in being a craftsman :)
- did I mention Search Engine Optimization?
Keep watching these videos here: http://www.railsenvy.com/tags/MVC
A couple years ago I tried getting a Web Developer position at Google. After a few interviews they had me complete their Web Developer exercise. I did it, and my initial submission would have made any respectable web developer ill – you can read more here: Getting a Job at Google: A Web Developer Fizzbuzz. I redid the exercise over a year ago, but today even that code stink.
I did the exercise yet again (the third time) because my last attempt needed some improvements:
- it suffered from chronic classitis and divitis (too many classes, ids, and divs were making me itchy)
- it wasn’t really using semantic / structural markup (all the extra divs etc… cluttered my markup, and some of my class names like
container-bordersare non-semantic altogether)
- it suffered from my software ethnocentrism (my variable and object naming like
GoogleExercisewas mirroring statically typed languages and not the native language they were being written in)
Here’s my latest Google Exercise (addressing all the above concerns):
View this post outside your RSS reader to see it in action or view it here.
If you think I can improve on my code then let me know. Oh yeah, and if you’re a recruiter from Google then hire me! :)
It feels like Web Standards have always just existed, but they’ve only been around since the 90′s. Today, they’re the default for cross-browser compatible web applications. However; some people still like to talk them down – fingers are pointed at ambiguities within the written specifications, imperfections, and various edge cases between browser implementations (most of which can thankfully be resolved through test suites and browser vendor collaboration). Today, if you’re not embracing Web Standards, then you’re missing a bigger point.
The importance of Web Standards lies in its unified language. Web Standards offer a common paradigm, a starting point, they’re intended to be built upon / extended, and (like everything else we’ve created as a species) they’re not perfect. Web Standards and the Object Paradigm (Object Oriented Design / Object Oriented Programming) share these similarities. Eric Evans describes the value of the Object Paradigm to be its widespread adoption, not its technical superiority:
Today, the object paradigm also has some significant circumstantial advantages deriving from its maturity and widespread adoption … Objects are already understood by a community of thousands of developers, project managers, and all the other specialists involved in project work. – Eric Evans, Domain Driven Design
On a similar thought Bill Bryson describes the dark ages of chemistry – before standardized conventions and the periodic table was formed:
chemists for so long worked in isolation, conventions were slow to emerge. Until well into the second half of the century … Chemists also used a bewildering variety of symbols and abbreviations, often self invented … Despite the occasional tidying-up, chemistry by the second half of the century was in something of a mess … [Mendeleyev] began toying with a way to arrange the elements … thanks to Mendeleyev’s invention [the periodic table], chemistry was now on a firm footing. – Bill Bryson, A Short History of Nearly Everything
Today, Web Standards are understood by a community of thousands of developers, designers, project managers, and most of the other specialists involved in web work. Web Standards are our firm footing. Web Standards aren’t about being perfect, they’re about a common language, about working collectively towards (or at least embracing) a goal. Web Standards are here to stay.