Web Standards

I linked to the Boagworld web site in my last post, about IE7. I discovered the site and its owner Paul Boag a few weeks ago, and he’s totally changed the way I think about designing websites. I, like many others, have been using table-based designs since we started playing with HTML about 100 years ago. While I’m still not 100% convinced that tables are wrong for layout, I have wholly embraced CSS design and web standards. With tables, you place all the different elements of a website, like navigation, main content, search etc in table cells within the html and usually style it within the html. With web standards, you create flat html (xhtml) with no styling, divided into <div></div> and other tags; tags that are meant for holding the elements of a website — and then style the elements in a separate “style” file or files. Anyone who’s done any website creation anytime in the last 5 years has at least seen CSS or cascading style sheets and like me, you might have even used CSS without realizing you were doing so.

CSS is the style part of a tag.

<a href=”http://www.domain.com&#8221; style=”font-size: 12px; font-weight:bold”>link</a>

The point of web standards, though is to remove all of the styling from the HTML file, and place it in a seperate CSS file. You can then link a tag in the html to the CSS like this:

<a href=”http://www.domain.com&#8221; class=”important-link”>link</a>

I really like the idea of separating the page elements from the style. It makes for much cleaner and easier reading html files and makes changing the look of your website, minor or major, so much easier. For example, when you look at the html file for a web standards based website, the menu items might look like this:

<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>

Which you’d think would give you a straight, vertical bulleted list, but with styling in the css file, you can do any number of things — like laying it out horizontally and adding borders and background colors and borders. You can also tell the browser to change text color or background color when the mouse moves over the menu item.

I’ve known about and have on occasion used CSS, but thanks to Paul Boag’s insistence, I have now completely moved away from tables and putting the style in the html. My HTML and style are completely separate and I consider it a challenge to myself, to make sure it stays that way. I’ve got much more to say about this, but thus post is getting long — so I’ll save it for another time.

How did I learn XHTML and CSS and the concept of web standards. W3schools, of course.

Published in: on July 5, 2006 at 2:20 pm  Leave a Comment  

The URI to TrackBack this entry is: https://jmayoff.wordpress.com/2006/07/05/web-standards/trackback/

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: