If you truly get into web standards you’ll soon find out that the most important thing is – markup. A good, solid, well structured markup. Html, XTHML, tags, attributes, structure… That’s what it’s all about actually. We tie in the terms CSS and web standards. Term CSS has become almost a synonym for standards. I often use the term “css designer” or “css this”, “css that” to quickly explain what methods and approach I am talking about. But the real truth is, CSS would mean NOTHING if your markup structure is wrong. Markup is the king.

Structuring a document

The key to web standards compliant document is it’s structure. It must be meaningful and logical. Document should follow a certain flow and it must be readable and understandable without any css styling.
Most documents have different sections (navigation, main content, side content, copyright area, contact area etc.) User, human or non-human. should be able to understand those sections as well as sections importance from the first look at it. The most important section should be as high up in the flow as possible, but importance of a certain section is also defined with heading tags (h1, h2, h3, h4, h5, h6). In a way headings define documents structure.

Structural and Presentational Tags

In web standards world you often hear a syntagm “separating presentation from content”. What does it mean? Basically it means that no html elements should exist for presentation purpose only. You should try to avoid having empty divs for drop shadows or something similar. Let all your markup has its structural meaning and exist as a logical part of a document.

Tag choices

There are many tags to choose from and you should embrace that variety. Don’t rely on divs alone for container elements. Sometimes a simple paragraph with some child spans or ems is enough to get what you want. We all use ordered and unordered lists, but we also have another type of lists that I don’t see used that often – definition list. DL is ideal in many cases because of it’s “2-dimensional” structure. Also why not use ADDRESS tag for contact info that we place in a footer? Take a pick!

Validation

Validation has its importance in analyzing your code. But validating alone doesn’t mean that your document is built according to standards. You can have entire document made of divs with class names. That would validate, but would it be meaningful? Not to everyone, and certainly not to search engines.

Do

• pay extra attention to document’s structure. It’s the most important thing.
• think semantics, use tags in a meaningful order, create a logical html “flow”.
• use variety of tags, choose appropriate one for a certain type of content.
• well, practice… try to think outside the box in order to achieve certain effect.
• try to use as few html elements as possible for the same design effect, you’ll feel better about yourself.
• compromise in terms of design. Well up to a certain point that is. Sometimes it’s better not to use certain design effect and have cleaner markup.

Don’t

• think that if something is valid it is automatically web standards compliant.
• overuse certain tags, like divs.
• use presentational tags, or at least keep it to the minimum.
• don’t avoid using certain elements thinking that they are not “web standards” (yes, I am talking about tables).
• compromise in terms of markup.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (24 Comments)

1. Daniel Nielsen
   June 24, 2008

   Good article. Gave me some stuff to think about

2. Peter Benoit
   June 24, 2008

   Nice article, like the comment on tables.

3. Mark Creative
   June 24, 2008

   Nothing ground breaking about the post, but it puts many simple points together. Does it annoy anyone when larger and supposedly 'better' design agencies still design sites in tables and charge a lot more ?

4. Jitendra Vyas
   June 25, 2008

   This is the best tutorial to understand web standards. your writing style is very easy to understand. There are many sites and blogs on CSS, Web Standards etc. but in Cssglobe.com i like your simpler explanation on Technical topics.

5. Drew
   June 27, 2008

   This was a nice article overall and I enjoyed it, but I must disagree on this point: "don't avoid using certain elements thinking that they are not "web standards" (yes, I am talking about tables)." Tables should be used for displaying tabular data, thats it. No exceptions. Using tables for a site layout is an extremely unnecessary use of precious bandwidth, I dont think clients will appreciate you using more bandwidth and memory than necessary. Tables are for tabular data NOT design. Thanks for the article. Regards, Drew

6. cssglobe
   June 28, 2008

   Thanks for the comment Drew. Of course tables are not meant for site structure. Actually I was referring to developers who avoid using tables all together even when it comes to tabular data. I went through that phase myself, I coded calendars with lists etc.

7. Daniel Nielsen
   June 29, 2008

   I got a new colleague who just made a tabular datalist with li's, because he says it's easier and safer when using AJAX, as in not running into errors? Is he right or just a lazyboy or what? I haven't used AJAX much myself yet, but I am still wondering why exactly he doesn't use tabels. I have always used tabels alot in the past, too much I would say. So I have never understood why to make a tabular list with anything else. /Pardon my english

8. Drew
   June 29, 2008

   Hi again, "Actually I was referring to developers who avoid using tables all together even when it comes to tabular data" Just wanted to say that I obviously misunderstood what you were trying to say originally, glad we agree about no tables for design. Best Regards, Drew

9. Welcome to Paradise
   July 4, 2008

   Very informative article. Will help in to add up the knowledge of my CSS and for my future reference as well. Thanks.

10. JaJa
    July 8, 2008

    "Tables should be used for displaying tabular data, thats it. No exceptions. Using tables for a site layout is an extremely unnecessary use of precious bandwidth, I dont think clients will appreciate you using more bandwidth and memory than necessary." Not the best argument I have heard for not using tables. I am not saying that we should use tables for layout, but bandwidth is not all that precious anymore. ============================ "Do compromise in terms of design...Sometimes it's better not to use certain design effect and have cleaner markup." This sounds like someone who doesn't work with real clients. I have never met a client that cared about cleaner markup, but many, many clients want their cool design effect. Maybe it is different where I live (San Francisco), but the clients here are very needy when it comes to design.

11. Drew Douglass
    July 9, 2008

    "Not the best argument I have heard for not using tables. I am not saying that we should use tables for layout, but bandwidth is not all that precious anymore." Hi JaJa, I feel I took this post a little off topic as tables for design (or lack thereof) was not the original topic for this post. However, I must respectfully disagree with your conclusion about bandwidth. It may not be precious to a very small or personal website, but tell a large corporation or client of yours that an unnecessary amount of his/her bandwidth is being used and see how they react. I really cant see the point in wasting bandwidth by using tables for a layout when one has the wonderful world of CSS. Again sorry to be so off topic. Best Regards, Drew

12. Leon P
    July 9, 2008

    It's always worth looking at sites 'naked' (in Firefox it's View-Page Style-No Style), although this wouldn't reveal pointless DIVs. It's surprising how few good-looking sites adhere to this. From a designer's point of view it makes perfect sense to design in this way: a logically-structured document should result in a logical information architecture. In this sense the web is not a visual medium at all.

13. Erik Pettersson
    July 10, 2008

    Nice article! Whis one is bookmarked and will come in handy in my next projekt. Thanks!

14. Kudos
    July 16, 2008

    Good stuff. This kind of article is ever more important and the more the better I say. As the web shifts towards stricter standards compliance, the number of "designers" floating around wanting to do things their own way and the wrong way is high. Too many folk want web design to be art, when it will never be so.

15. Tomas Liubinas
    July 30, 2008

    Not that I'd like to flame here, but guys, how do you define tabular data then? IMO tabular data is two or more elements where the width or height of the element depends on another element. Keeping 100% width is simple using divs, but 100% height is simply not supported by divs (I know there are some crazy enought to master workarounds for that). For sure, to avoid mines you can avoid using 100% height in layout (eg this site). But as long as there are plenty of more complex designs based on 2 or 3 column layout around I wonder where this weird hype about absolute tableless design comes from?!

16. tom
    August 5, 2008

    sweet article.

17. ale
    August 6, 2008

    This is great article!

18. jessabean
    August 9, 2008

    I agree completely, especially the part about tables. Overusing divs because one wants to be "table free" is not any better than using a table-based layout, in my opinion...the code should make sense in relation to the content. I wrote a post about designers/developers who go overboard in the vilification of tables and linked to this article. <a href="http://unquietheart.com/?p=78">The web standards/tables debate</a>

19. Wardell
    August 17, 2008

    Great article! I know someone who should read it.

20. Romy
    August 21, 2008

    Very good Article. I completely agree that tables should be used for tabular data display only and not for whole webpage design.

21. roni
    September 22, 2008

    Always try your sites withg CSS disabled. This helps understand why titles need nested and ordered h1 h2... and p is not same as div... and div after one another is not same a a proper list !

22. covings
    November 22, 2008

    Excellent SITE. I will refer people to your ITEMS. Effective use of Wordpress had some exceptional. Cheers

23. sklepy internetowe kraków
    November 29, 2008

    Thanks for this article, it's great. So great that we've made it 'sticky' on The Webmaster Forums. Now we don't have to repeat ourselves, just send people to this article!Excellent SITE. I will refer people to your ITEMS. Effective use of Wordpress had some exceptional. Cheers

24. Amit Dhok
    April 6, 2009

    This is very useful article, I want to know why we can not apply 100% height in css. Could you please provide some information about dont's about height will be appreciated. thanks very much I am It........

Sorry, the comment form is closed at this time.