The importance of semantic markup and css

Two important rules to get a good design: semantic markup and css!

1. Semantic markup means you apply html in a way that makes sense. In the early days everything was marked up with tables, but was all data presented really tabular? No! Navigation items make more sense being unordered lists (<ul>) of list items (<li>), there are important headlines (<h1>) vs less important ones (<h2> .. <h6>), and a banner wrapped in a h1 tag has extra meaning by adding an id of “logo”.

All this makes that elements are more specific and css styling easier. Application data gets more informative so that microformats (much like XML) allow for sharing vcards and calendars across applications. At last be a little more verbose when coding html, for example adding title, alt and rel attributes, may help impaired users to get a better web experience (text instead of images, screenreaders, etc.). The list goes on. Andy Clark has some good video trainings dedicated to this, and Transcendent CSS is one of the best books regarding this aspect, web design in general and CSS. I just read that Andy released a new title

2. CSS separates content from style. A device without CSS support can see the core content, and we then apply CSS to make a page more attractive and visually ordered. CSS is also a great designer’s tool: instead of fixed mockups in Photoshop it is way more flexible: you want to swap two columns? Edit a stylesheet rule, in PS you would have to draw new rectangulars and save the file again for web.

CSS has strong support for liquid (%) and float designs, I can’t imagine how Photoshop could ever give you that much flexibility to play with your mockup. CSS3 supports nice new features as text shadow, rounded corners, rgba colors and a lot more. The most important aspect is this: keep style and structure separated to warrant flexible design.

© 6237 Bob Belderbos. All rights reserved.

- If you like something here, link to it instead of copy+paste.
- Disclaimer: ideas expressed on my blog are mine, and have nothing to do with the current/previous employers.
- Proudly using Wordpress and the Insider Theme on Bluehost