HTML 5, XHTML and CSS: a quick explanation

About web standards

Standards compliance matters. By having me author your web pages in CSS and HTML5 or XHTML, your web content gains the following advantages:

1. It's device-independant.
2. Your web pages can render as well on a small screen as on a large one. And printed output can look like printed output should look, no matter what kind of device sends the page to the printer.
3. It's accessible. Site users can increase the size of the text for easy readability without disrupting the information flow of the page.
4. It's the latest web standard. Today's web pages will work for years to come.
5. It's fast. Old HTML technology used bloated table coding to control page layout. HTML5 or XHTML+CSS is lean code that loads quickly, and renders correctly in all modern web browsers.
6. It's easy to update. Tired of the site's design and layout? Want a new look? Change your CSS file, and the whole site changes. (No, it's not magic, but it sure can seem that way...)

CSS text and positioning: the heart of XHTML

Current web standards call for the separation of content and presentation. What this means is that the information that is part of a web page should be independent of its layout and formatting.

CSS removes all formatting and layout from the underlying content, and places it into a separate file called a StyleSheet. That's the SS part of the acronym: the C part stands for Cascading. Think of a waterfall, and you'll get the idea of the Cascade: formatting from the Style Sheet Cascades into all the web pages that use the same Style Sheet.

K-C-P.com has used a large subset of CSS for years: CSS Text. In fact, years ago, I wrote one of the most popular web tutorials about using CSS Text in NetObjects Fusion 7.0. That article is still available today.

With CSS Text, the style sheet controls the formatting of all the text in your web documents. The old HTML 1.0 standard placed ugly and unmanageable code like <font="arial" size="large" color="blue"> (etc.) all over your web pages to format your text.

With CSS Text, all that ugly in-line formatting went away. Pages looked better, loaded faster, all because the text formatting commands were out of the content. If you don't want something in your pages to use blue Arial font any more, you don't have to hunt down every instance of that ugly font tag, you simply change the style sheet, and let the Cascade do its thing.

Very slick...

But what about page layout?

For a good many years, building complex HTML tables was the accepted way to controll web page layout. But: controlling page layout with tables gets complex enough that smart web design shops tired of hand coding fancy-looking table layouts.

Web designers clamoured for software that could automatically build intricate table structures to keep their documents arranged the way they wanted them. Many software makers answered the call with tools to make "What you see is what you get" HTML layouts.

So what's wrong with this picture?

• With table-based design, your page layout must be embedded inside every single one of your documents.
• As a result, guess what you have to do to change the page layout of an entire web site? You have to change every single page's complex table structure (ugh!).
• All that in-line table code significantly bloats the file size of the resulting web page, all in the name of "pixel perfection".
• What's worse, all that "pixel perfection" makes such a page unusable on any device except a full-size computer display.

As long ago as 1996, the W3C started urging web designers to sever presentation (layout) from content (information). Sounds like a good idea, but how do I do this?

CSS Positioning to the rescue...

The other major capability of CSS technology is called CSS Positioning, or "CSS-P". Using CSS-P, you can structure a web document with very lean markup that identifies the logical parts of the page.

Then you put your layout Positioning commands into your style sheet (along with your text formatting commands), and again, let the Cascade do its thing.

At the turn of the 21st century, few web browsers supported CSS-P with any degree of reliability. But now, a great majority of modern web browsers understand CSS-P well.

The best mobile device web browsers do too. What a difference a few years makes!.

Down with Pixel Perfect

Today, the once-vaunted "pixel perfect positioning" has become, quite honestly, a bad thing. Here are just a few considerations:

• What about mobile devices?
• What about printing your web page?
• What about making your site accessable to visually impaired users?

Your old-fashioned fixed-width table-based web design only works on one class of device (desktop or laptop full-size computer display) because it's hard coded to be some large number (normally 600-800, or more) pixels wide.

Small displays

When I first wrote this article, it was still too expensive and too geeky to surf the web with a cell phone or wireless tablet or other mobile device. I correctly said "it won't be like that forever."

I was right :-). Now, all the wise heads in the web design community have realized how quickly mobile devices are taking off. By the end of 2012, the odds are that there will be more mobile web devices (tablets and smartphones) being used than desktop computers!

• Do you want your web pages to be ready for someone who decides to view your site using such a device?
• Perhaps your target audience is still people using desktop systems, in which case, you can ignore the web design community's latest rallying cry:
  • " Mobile First!"

Printing

• Does your 770-pixel-wide site print properly, or does a printer chop off the edge of the content?
• If your site is fully XHTML and CSS ready, that can never happen.

Support all common devices

CSS-2 provides a way to create different style sheets for your pages that present your content differently on specific devices: (for example) printers, small screen devices, and the "screen readers" used by visually impaired site users.
If your site does not support such users, you stand to lose a major fraction of your site's target audience.

Summing up

• Free your content from its presentation with HTML 5 or XHTML.
• Create CSS stylesheets for every class of device that you expect your site visitors to use.

I can help you do all this. And more.

Contact KCP.