November 2008 Intro to XHTML and CSS

What’s the difference between XHTML and HTML?

XHTML is the next generation mark up language for the web. It is a transitional language on the road to the Semantic Web, and is actually an XML application. It’s nearly the same as HTML 4 (the last HTML version), just a little more strict. Key things to remember:

✓ XHTML elements must be nested properly. ✓ All elements (even empty elements, like
) must be closed. ✓ Elements must be lowercase. ✓ There always has to be an root element. ✓ Attribute values have to be in quotes and written out completely. ✓ Always include a DOCTYPE declaration (DTD). You can cut and paste them from the W3C web- site (http://www.w3schools.com/XHTML/xhtml_dtd.asp)

What the heck is a DOCTYPE declaration?

The DTD at the head of each web page tells the browser what language the page is speaking. It en- sures interoperability and adherence to standards, which are very good things. All versions of XML require DTDs, but the three we care about are those related to XHTML:

✓ XHTML 1.0 Strict (very clean code, with all presentation information in CSS) ✓ XHTML 1.0 Transitional (might still use some presentational elements in the XHTML page) ✓ XHTML 1.0 Frameset (I lied, we only care about the first two; frameset is using HTML frames, which is generally in bad form and frowned upon)

Alright, I’ve been hearing about this CSS thing...

XHTML was created with a key goal in mind: separating presentation and structure (or, as I think about it, appearance from content). CSS stands for Cascading Style Sheets, and is presentation code that is usually linked to the content (or .html) pages of your website. All style declarations are kept in the CSS file, and all content and structure are in the XHTML file. There are three ways to declare style:

✓ Linked style sheets (these are separate files linked to the .html page in the tag) ✓ Embedded styles (these are style declarations placed in the between