Real World CSS

For anyone who is still mired in the HTML Tag Soup of old-style web page design, the question, “Why should I switch to using CSS” often arises. Here’s an excelent real world example. [via scottandrew.com]

It’s true that busting your butt to make a webpage fully XHTML (or even HTML 4.0) compliant might not be “necessary” for your application. And I don’t necessarily agree with those who cry “tables are evil!”. Those of us working in the real world know that sometimes you have to compromise. You try to do the Right Thing whenever possible, but there are times that you have to just do the Working Thing, instead. Heck, this page doesn’t validate. But if you have the patience to check, you’ll see that most of the errors are pretty minor — mostly it’s internal URLs that don’t properly handle “&” characters. If I was worried about trying to parse the page as XML, I’d have to fix it. But I’m not, so it’s not a priority for me.

On the other hand, if you view the page source, you’ll see that I rely heavily on CSS and structural markup. I try to use HTML markup elements as they are intended to be used. I don’t use <blockquote> tags just to indent something — I use it when I’m actually quoting something. If I want something indented, I’ll create a CSS class and just style a regular paragraph with it. This makes the underline code and page stucture much easier to understand, both for humans and for machines. If someone wanted to screen-scrape info off of this page with HTML::TreeBuilder, for instance, it would be a fairly simple task, because the page elements are used in a logical and consistent manner. Of course, there’s not much reason to screen-scape, because I provide an RSS feed.

Stumble It!
Real World CSS

Related posts:

  1. The Real Round Up
    " Whoops, I forgot to rename that previous post, since I didn’t actually post the round up. So, this post will be the real round..."
  2. The World
    " The World If I had a gazillion squared dollars, I’d want to buy a piece of The World. 300 private islands laid out to..."
  3. Technorati redesign
    " Thanks to the efforts of Tantek: a new Technorati design. In the words of Scotty, “It’s…it’s… It’s green!” By rewriting the vast majority of..."
  4. World of Ends
    " The latest meme making the rounds is World of Ends, an essay written by Doc Searls and David Weinberger. “All we need to do..."
  5. Hello, World!
    " Peppermint ver 0.2 World, meet Peppermint. “Peppermint” is the working title for our new baby. This is in keeping with the food theme, since..."
This entry was posted in Web Design and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Subscribe

  • Follow Me

    Twitter  Facebook  Flickr  Last.fm  LinkedIn  StumbleUpon  Technorati  Delicious  
  • Referrals

    Sign up for Text Link Ads and earn money from your blog.
  • Lifestream