posted on:June 24, 2008
CSS dos and donts 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.
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 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.
- 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.
- 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.
Comments (24 Comments)
Sorry, the comment form is closed at this time.