April 3rd, 2006

But it Validates!

In my personal opinion, the overall state of the Web is growing in the acceptance of valid markup. For the most part this is great; having valid markup is often the first hurdle to overcome when becoming a good developer. I know that when my eyes were first opened to valid markup, I was turned off by the fact that I could not do things as I had been doing for some time. Instead of going about writing markup using the methods I had taught myself, I now had a set of rules to follow that made my life that much more difficult. I have come a long way from there and now know that having valid markup is one of the core criteria for a good end product.

Many people have also come to this realization, but the problem is - many have also stopped there. A lot of developers feel that having the W3C Validator tell you that your markup is valid is enough, that you can now move on to the next phase of your project. Passing validation is great, but it is merely a single part of the process. An example is that even though tabular layouts are considered valid, they are still frowned upon.

Semantics of Web

Semantics are a largely overlooked concept when it comes to ‘valid markup’. Many developers who began their practice using tabular layouts now overuse div to emulate what they were doing with table. The problem is, when you begin developing using tabular layouts, you find yourself in the mindset of obtaining a grid to work upon as a goal. Should this thought process carry over to your newfound love for CSS, your markup and styling will be severely limited. Once you break free from the restraints tabular layouts hold, you will discover an entirely new set of possibilities when it comes to your styling. Having your markup flooded with divs instead of tables in a way defeats the entire reason for making this move to Cascading Stylesheets.

I think that the value of HTML is often overlooked. The language allows you to effectively mark up a document using minimal code and the results are often quite stunning out of the box. The tags offered to you as a developer will be applicable to every part of your document. You will find that effectively marking up your document will essentially help you with your styling in later stages. For instance, those elements of HTML that display:block by default will more often than not allow you to remove that extra div that in all honesty does not need to be there. It goes without saying that there are circumstances where you will need to add markup in order to structure the layout to the spec of the design — the point to take home is that you want to keep it to a minimum.

CSS Naked Day

I am a long time reader of Dustin Diaz and was excited to read that he envisioned the First Annual Naked Day. The idea is that on April 5th, 2006, Web sites will remove the style and let their markup flow in the wind. I couldn’t welcome this idea more. Viewing your site without your stylesheet is one way to get an overview of how well your markup is written. With the stylesheet disabled, your site should lose nothing but a pretty face. I am really happy to see so many people in agreement with the idea and I look forward to going down the Naked List and navigating the participating sites. It will be better than hitting CTRL+Shift+S to have the Web Developer Extension remove the CSS one page at a time. I think it will also inspire many people to take another look at their markup and see how it can be cleaned up if need be.

Unfortunately…

It is great that so many people want to participate — the problem is the people that do not. I noticed that the article was Dugg and reading through the comments really gives us an insight as to how many people feel. A good number of those people commenting completely miss the point of Dustin’s idea. They speak of a site ‘looking ugly’ and ‘confusing people for a day’. The fact of the matter is — that is the point. If you were to remove the stylesheet from your site, it should not become confusing to use. If it does become difficult to use and navigate, the semantics of your markup have been compromised and should be given some attention. It is great to read some of the good comments there — trying to explain the point behind Naked Day; but unfortunately it is falling on deaf ears.

Closing Thoughts

I think that this will give a good look into the structure of sites with good markup, because those who have bad markup will not be willing to remove their stylesheets. That’s okay, I just hope all the sites that do strip themselves of their stylesheets are used as inspiration for those that need to brush up on the semantics of their markup. Developers need to know that Validity does not equal best practices and that Web standards mean more than validation. When thinking about Validity and Accessibility it is important to remember that the W3C Validator can only determine if your markup is written using the correct methods and syntax, it will not determine if your markup is structured and semantic. That is a job only humans can perform, and should perform. I hope now that validation is really making a stand, we will see less and less of the Divitis/Div Mania trend and more semantic markup across the Internet.

 Comments

20 Comments

  1. Michael Chase April 3rd, 2006

    Haha. ‘Divitis’, I like that. I suffer from bouts of it every once in a while when I’m trying to meet deadlines or get a design out there but I always try to go back afterwards and work on the underbelly of the code so it’s accessible without a stylesheet.

  2. Marc McHale April 3rd, 2006

    What about list-itis? I have gone the familiar transition from tables to divs, now to lists! Well everything I seem to do uses lists, navigation, product lists, the list goes on……

    I completely saw Dustins point and I think it should be an annual event for sure. I have now started to work with the css OFF to start with when creating the sematic structure for the site, just to make sure it makes sense before I make it look pretty.

    As a result I have had lots of comments about the sites being easy to use, as well as significantly improved Search Engines traffic for all the right things, and improved accessibility.

    It is so frustrating when people just dont get it. How can we educate these people without alienating them?

  3. Monico April 3rd, 2006

    I am digging myself out of this rut. I would have to say it is extremely easy to fall into it. The event coming up should be interesting, and will hopefully go to provide many people examples on how they should markup their code. I know I’ll be making use of it, and hopefully clean up my sites further.

  4. astridas April 3rd, 2006

    When I first started to learn html/css I tried tabular design. I could never really grasp the concept of laying table ontop of table. Trying to visualize table structure in my head gave me a headache. I began to search for other solutions and stumbled on a lot of old but great websites that documented “Tableless Design.” If you are looking to throw away those tables, there are great articles all over the web.

  5. derek punsalan April 3rd, 2006

    ha. like michael and marc, i often find myself suffering a bout of div-itis or list-itis. i seem to be gathering a great amount of feedback from random people insisting that utilizing lists is the way to go as far as content organization and presentation minus styling.

    btw. i noticed post on digg about “naked day”. i didn’t notice it much until i saw it mentioned here in your post. after reading through the content i pulled up my page wondering what it might look like minus styling. apprehensive, i stripped it away and rejoiced as my page looked “ok” (from my point of view). maybe i’ll participate.

  6. P.J. Onori April 3rd, 2006

    Frankly, one should just ignore about half of the comments on Digg. The place seems to be a flame magnet.

    I totally agree with what you’re saying. Just because something validates doesn’t automatically make it well put together. I could nest five divs within each other for no particular reason and it would validate…

    It’s like saying the book you wrote contains no typos. Therefore it should be considered a literative masterpiece. Validation is the start.

  7. Dustin Diaz April 3rd, 2006

    Hi Jon,
    Is that you’re name? I couldn’t find a name besides the contact page.

    Anyway, I appreciate you writing this. I’m glad you saw the vision that I had in mind. I do my best in avoiding to read the comments on digg for many reasons, but I just had to see what the fuss was about after you pointed it out.

    Other than that, everything you wrote here pretty much sums up why the idea was sparked to begin with. I’m glad you’re on board.

  8. trovster April 4th, 2006

    They speak of a site ‘looking ugly’ and ‘confusing people for a day’. The fact of the matter is — that is the point. If you were to remove the stylesheet from your site, it should not become confusing to use.

    CSS and images are there for a purpose, to take the ugly defaults and turn it into a beautiful usable (by the masses) website.

    I also strongly agree with the ‘confusing’ issues - and anyone who disagrees doesn’t understand the general web-user. It will be extremely confusing for the majority of visitors.

    If I visit a website and the navigation changes or moves even slightly, it’s confusing (and I’m a web developer so I’m used to a huge range of website designs)… just imagine the confused look on peoples faces when they visit a website expecting that familiar design, only to be presented with the defaults.

    Although, I know what is trying to be achieved here - to showcase semantic markup over design goodness - I don’t think this is the most appropriate way of going about it.

    I believe all that will be achieved on this day is that people will get extremely confused, and most probably leave the site (never to return?)

  9. trovster April 4th, 2006

    Not a chance. Although my site has some semantics and isn’t tableless, it’s certainly not my top work, which has improved immensely since I created the site. Some people will see that as an excuse - fine - but I just don’t like the whole idea.

    I’ve been confused visiting sites I know today. Not happy.

  10. trovster April 5th, 2006

    The confused hasn’t stemmed from seeing pure HTML. It’s the fact that I was going to sites, expecting that familiar design, and that expectation was ruined, and I had to think (anyone read that book on usability - Don’t Make Me Think? - seems not) and reassess the website just to do the basics task I could easily do before.

    Designs are their (in most part) to add a friendly user interface, removing them completely destroys this.

  11. smurf April 7th, 2006

    Honestly trovster, for someone that is so obsessed with usability and accessibility, one would think that you could at least try to form a sentence that is grammatically correct and manages to output at least some form of a complete thought. If you’re going to disagree with something because of reasons you think to be ‘rational’, at least try to explain them intelligently instead of just sounding like a 3rd grader that is arguing for argument sake.

  12. Emma - LittleFish Web Design December 6th, 2006

    I haven’t heard of CSS naked day but think it’s a great idea - it would certainly help a lot of more basic designers (and yes, I do feel that includes me sometimes) to focus their minds on what they are trying to achieve with a site.

  13. Is Manipulating the DOM for Presentation Acceptable? - Monday By Noon July 9th, 2007

    [...] not given the liberty to do with the DOM what you please. Expanding upon that, just as important is maintaining semantic markup when manipulating the DOM. This is where things become shaky as far as my stance is [...]

  14. The Best Browser Extensions for Web Development - Monday By Noon September 2nd, 2007

    [...] see what’s going on.. Semantics are really important to document structure and a great way to check up on your markup is to see your document [...]

  15. Site Testing with Text Based Browsers - Monday By Noon September 2nd, 2007

    [...] browser, and also just as important: cross technology. Many times, developers feel that if their code is valid, they’re good to go. Validity is very important, yes, but if a document doesn’t have [...]

  16. Validation Zealotry and Markup Exploitation - Monday By Noon February 25th, 2008

    [...] written my fair share on markup validation, and I do think it’s important to validate your code. I’d like to be explicit in saying that when I speak of my OCD only stretches to my own work. [...]