CSS do's and dont's Part 2- Markup

written on:24 Jun, 2008 by Alen Grakalic

CSS do's and dont's Part 2- Markup

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.

About the author:

cssglobe's image Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

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

Comments

Daniel Nielsen on 24 Jun, 2008 wrote:

Good article. Gave me some stuff to think about
Peter Benoit on 24 Jun, 2008 wrote:

Nice article, like the comment on tables.
Mark Creative on 24 Jun, 2008 wrote:

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 ?
Jitendra Vyas on 25 Jun, 2008 wrote:

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.
Drew on 27 Jun, 2008 wrote:

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
cssglobe on 28 Jun, 2008 wrote:

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.
Daniel Nielsen on 29 Jun, 2008 wrote:

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
Drew on 29 Jun, 2008 wrote:

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
Welcome to Paradise on 4 Jul, 2008 wrote:

Very informative article. Will help in to add up the knowledge of my CSS and for my future reference as well. Thanks.
JaJa on 8 Jul, 2008 wrote:

"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.
Drew Douglass on 9 Jul, 2008 wrote:

"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
Leon P on 9 Jul, 2008 wrote:

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.
Erik Pettersson on 10 Jul, 2008 wrote:

Nice article! Whis one is bookmarked and will come in handy in my next projekt. Thanks!
Kudos on 16 Jul, 2008 wrote:

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.
Tomas Liubinas on 30 Jul, 2008 wrote:

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?!
tom on 5 Aug, 2008 wrote:

sweet article.
ale on 6 Aug, 2008 wrote:

This is great article!
jessabean on 9 Aug, 2008 wrote:

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.

The web standards/tables debate
Wardell on 17 Aug, 2008 wrote:

Great article! I know someone who should read it.
Romy on 21 Aug, 2008 wrote:

Very good Article.

I completely agree that tables should be used for tabular data display only and not for whole webpage design.
roni on 22 Sep, 2008 wrote:

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 !
covings on 22 Nov, 2008 wrote:

Excellent SITE. I will refer people to your ITEMS. Effective use of Wordpress had some exceptional.
Cheers
sklepy internetowe kraków on 29 Nov, 2008 wrote:

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