Introduction
The current standard for the eXtensible HyperText Markup Language (XHTML) is XHTML 1.0; it merges the familiar HTML with XML (eXtensible Markup Language), the universal format for structured documents and data on the Web.
Authoring HTML is a matter of philosophies. Some take great pride in hand coding pages in text editors using only the simplest (X)HTML, while others rely on What You See Is What You Get (WYSIWYG) tools like Dreamweaver, GoLive or FrontPage; know this: the Web is not WYSIWYG; it’s inherently dynamic. However, designing Web documents that work in any browser or device that can read (X)HTML is not only possible, it’s practical and simple (from Netscape 1.0 to 9.0; from a cell phone to a text-to-speech browser). If you can enclose a paragraph of text between <p> and </p>, you are well on your way.
HTML has always been a structured language with rules and standards. The World Wide Web Consortium (W3C) sets the standards and recommendations that browser developers and Web designers follow. While their technical documents aren’t very friendly, the W3C is your friend. Authoring (X)HTML according to W3C standards ensures compatibility and longevity with devices and browsers that adhere to these standards, and these days most recent browsers (5.0+) comply.
Our attempts
This tutorial attempts to cover ground on a few fronts: an introduction to (X)HTML, CSS and efficient capitalization of these standards in production, the separation of style and content and bringing structure to (X)HTML documents. We hope to serve authors who may be familiar with code, but not with Cascading Style Sheets or separating style from content.
What about 4.0 browsers?
Some have expressed concerns about abandoning table layouts for older browsers (specifically Netscape 4.x) and possible impacts to this segment of their audience. Adhering to Web standards, separating style from content and bringing structure to your (X)HTML documents does not mean giving the finger to old browsers, or table based layouts for that matter. Adherence to standards is a win-win situation that helps ensure durability on the Web.
Abandon the old ways
Much of the Web is not designed with standards in mind; this is why so many Web pages may not work in the very browser you are using. A costly deed many designers and developers make is embedding elements of presentation in their documents. Merging style and content compromises core concepts about the portability and accessibility of information on the Web, not to mention making for much larger file sizes and maintenance costs. Not adhering to standards and merging style with content potentially makes content completely inaccessible to certain browsers, devices and people.
Adopt the new ways
Removing presentation from (X)HTML documents and using Cascading Style Sheets (CSS) to control visual design is a revolutionary approach for many. Designers will find good reason to separate style from content and abandon use of <table>, <font> and <center> tags to control visual design. For example, a single CSS document can control the visual design for thousands of (X)HTML pages. Updating a site with redundant, non-standard <table> and <font> tag hacks is a chore. With CSS, a few simple changes to the style sheet can refresh an entire site comprised of thousands of documents.
Where to get started
XHTML basics
Writing HTML is simple and straight forward. We identify requirements for XHTML compliance, basic document structure and the evils of <font>, <table> and <center>.
XHTML cheat sheet
A short, sweet list of tags waiting to be printed.
Validating XHTML
The W3C’s validator isn’t always friendly, but we offer some help.
CSS basics
Get started with CSS, in language you can understand. See how messy markup can be refined with clean, smart CSS.
CSS cheat sheet
One of the few times when cheating won’t ruin your karma.
Validating CSS
Validator errors leaving you frustrated? We offer help.
Steal these layouts
Layouts; yours for the taking. (Go ahead, we condone it.)
Thoughts
We are interested in dialogue regarding all things design. Bring your ideas, questions and comments about CSS, HTML or even design to the table.