Bad Habits - A Cautionary Tale of Non-Semantic Markup and Donuts
I work with really great people. On their way into the office, my co-workers routinely stop and pick up a box of donuts to share. While their hearts are certainly in the right place, their donut-wielding generosity is absolute murder on my diet.
Just One Won't Hurt, Will It?
I know I shouldn’t eat a donut. I don't need the calories and eating it won't really satisfy me. In all likelihood, eating one donut will probably just make me want another. It's really so simple. I just shouldn't eat a donut.
That's what I try to tell myself as I sit at my desk, staring blankly at my monitor, while a chocolate glazed calls my name. Over and over that sugary ring of deliciousness calls to me until I inevitably give in to temptation and eat a donut - and then the guilt begins.
The Bad Habits of Web Site Design
Building websites is like always being tempted by the delicious, yet unhealthy, lure of donuts. We know the benefits and advantages of semantic markup and keeping presentational elements out of our HTML, but just like it's easy to say “yes” to that donut, it is similarly easy to give into temptation and insert a <br /> tag into our markup to provide some visual separation.
Just like it's unwise for us to put the belly-bursting calories of donuts into our bodies, it is equally unhealthy for us to fill our markup with visuals and presentational elements that are rightfully the domain of CSS.
Why is it so easy to say “yes” to things that we know are bad for us!
Our Own Worst Enemies
In the case of donuts, the answer is easy. They taste good. Really good. It's always hard to say “no” to something when it provides us with some kind of happiness, however fleeting that happiness may be.
In terms of web design, our excuse is often that presentational markup is quick and easy. With deadlines and budgets always nipping at our heels, the temptation to cut corners and add a presentational element is often great. Maybe it is the aforementioned <br /> tag, or perhaps it is an inline image that is a design element rather than a piece of content, or it could even be an overuse of classes or divs, the effects are the same – bloated, unhealthy web pages.
A Healthy <body>
We often make decisions in the here and now, rather than thinking of the ultimate consequences of our actions. This is particularly true when the decisions in question are small ones. Choices like whether to eat or not eat a donut or whether or not we should insert an inline image are minor when compared to many of the important life or project-alerting decisions we routinely need to make. That being the case, it is easy for us to ignore the long term, negative effects of a decision because we can’t see past the immediate gratification that a tasty treat or easy presentational markup will provide.
Keeping our markup lean and fit takes the same kind of determination and effort that keeping our bodies healthy requires. We have to be committed to keeping ourselves on the right track by saying “no” to things that are bad for us, no matter how delicious they may taste or easy they may be to add to our HTML.
We know what the right choice is, we just need to make it.
A Routine of Good Habits
It is often said that bad habits are hard to break, but the truth is that any habit is hard to break – good ones included. The more often we make good decisions, the quicker they become part of our routine. This can often allow us to completely ignore bad choices because we won't even consider them anymore. Such is the power of a positive routine consisting of good habits.
So while I know that the donuts will be delicious, I will thank my co-workers for their generosity, but graciously pass on their sugary offerings. I will keep the unhealthy calories out of my body the same way I work to keep the unnecessary markup out of my web pages, and they will both be healthier and happier for the good habits I will be establishing.