What's the difference between XHTML and HTML?

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 website (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 ensures 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 tags) Inline styles (these declarations are placed within an individual XHTML element)

In fact, the Cascading part of CSS comes from the fact that you can declare style in all three ways in one website, and the built in hierarchy determines which declaration is used. The browser reads styles in this order, with the last (inline) superseding those before it: ✓ ✓ ✓ ✓

Browser styles External style sheet Embedded styles Inline styles

XHTML and CSS - March 2009

1

November 2008


How do you write CSS? Each style declaration consists of three parts: selector, property, and value. These are written like this: selector {

property: value; } The selector is the element you want to define styles for, like
or
or
. These are structural elements of the web pages. The property tells the website what you’re changing, for example, the text color or font, or the background image. The value is the value of what property you’re setting. If we wanted a blue heading in Arial font, we’d write something like this: h1 {

color: blue;

font-family: Helvetica, Arial, sans-serif; } How do you tell a particular .html page to use a particular style sheet? That’s easy: In the tag, add a link tag: (notice that closed element, which conforms to XHTML standards) Class and ID selectors What do you do if you have multiple
elements on your page, but you want to style them differently? That’s where class and ID selectors come in! ✓ ✓ ✓

Class selectors can be re-used multiple times in a document. ID selectors should be used only once per page. ID selectors are usually used for major structural elements, like headers, footers, and sidebars, and class selectors for smaller elements like paragraphs and lists. You can name class and ID selectors anything you want, but helps you (and others who might look at your CSS) if they say what they are going to do. For example, a paragraph that is going to be centered might be written as

In your CSS document, class selectors are notified with a # sign. The centered paragraphs we mentioned above would be styled like this: .center p {

align: center; } What are
tags? Div tags help you break your page into a structural elements. Most websites will have a header, footer, sidebar, and content. Each of these sections of your website would be set apart with
tags, identified with a specific ID, and defined in your style sheet.


2

November 2008


Here are some good resources: W3Schools offer great tutorials and references for tags, attributes, and more: http://www.w3schools.com/ CSS Cheat Sheet is a quick and dirty page of style options: http://lesliefranke.com/files/reference/csscheatsheet.html Web Developers Toolbar is invaluable if you use Firefox; it’s a plug in that lets you examine in-depth information on any page you’re viewing: https://addons.mozilla.org/en-US/firefox/addon/60 The Web Developers Field Guide is a catch-all reference site. There’s a lot of stuff here, but it can be really helpful: http://webdevelopersfieldguide.com/ Some Good Books: These are all books that have been really useful to me. Bulletproof Web Design by Dan Cederholm (http://www.worldcat.org/oclc/61265147) The CSS Anthology by Rachel Andrews (http://www.worldcat.org/oclc/166255519) Cascading Style Sheets: Designing for the Web by Hakon Wium Lie and Bert Bos (http://www.worldcat.org/oclc/60558708?) The Art and Science of CSS by Cameron Adams et al (http://www.worldcat.org/oclc/99868584) HTML, XHTML, and CSS by Elizabeth Castro (http://www.worldcat.org/oclc/71252517)


3