Helpful tips on migrating to CSS for layout

Posted by: JDS

HTML was not intended to be a way to describe how a page looks. The modern use of HTML+CSS is a far more powerful way to design web pages than some older "hacks". Here are my suggestions on how to start using CSS.

I am cutting and pasting this from a Usenet post from earlier today. I wrote the post! It is not plagarism!

For layouts, use *either* CSS *OR* tables[1], but please not both. Unless a table is being used as intended: for tabular data (and a lot of things fall into that category).

In general, for a CSS layout, my "best practices" are as follows:

  1. Start with a plain vanilla HTML 4.01 strict page which has absolutely zero author-imposed layou or design characteristics. USE SEMANTICALLY CORRECT HTML!! That is to say, a pargraph uses a <P> tag and a list of items uses <UL> or <OL> and <LI> tags, etc. DO NOT USE <DIV>s FOR EVERYTHING!!!!!!!!!!!!!!!!!!!!
  2. Give classes and/or Id's to every element. Remeber, an element can have more than one class. Also, each ID must be unique!
  3. Take an image of what you want the layout to look like and start applying CSS layout rules. This last bit is the tricky part, of course. Also, you can start to add a smattering of <DIV>s here and there to force the layout how you want it. But use pure <DIV>s sparingly!!

Why the warnings against DIVs? A <DIV> has no real semantic meaning and using only <DIV>s will create a (valid, yes) HTML page that is not search optimizable, not "508" accessible, and ultimately not as flexible as one that uses "proper" HTML markup as HTML was intended to be used.

[1] Some will say "never use tables anymore for layout" but I don't completely agree, for a few reasons. For myself, though, I have stopped using tables for layout.

« Prev item - Next Item »
---------------------------------------------

Comments

No comments yet. You can be the first!

Leave comment