XHTML The Basics
A brief history of HTML SGML (Standard Generalized Markup Language) Then came HTML Followed by the browser…and the great browser wars –IE –Netscape –Opera –Mozilla –Still others have come and gone
Abandoning the old ways Much of the web is not designed with compatibility in mind Web pages don’t work the same way in every browser –This is usually a result of designers and developers merging style and content in their documents. –Not adhering to standards makes content totally inaccessible in some browsers
Adopting the new ways W3C standards enhance accessibility and promise long- term durability (forward web design). The rules take minutes to learn and the benefits are vast. Tools are available to help. Free online validators help ensure that your XHTML and CSS are error free. One of the main goals of XHTML is to get your documents to the point where they are XML compliant. XHTML will help your sites work better in more browsers and devices, reaching more people.
The Rules and Guidelines Open with proper Doctype. All tags must be lower case. All attributes must be in quotes. All tags must be closed. All empty tags must be closed.
Open with proper Doctype XHTML documents must begin with tags that tell the browser how to interpret them. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " This declaration should be placed at the very top of every XHTML document.
You will also find this tag beneficial
All tags must be lowercase These will not validate as XHTML: Class Presentation body text In XHTML, the tags should read: Class Presentation body text Unlike HTML, all XHTML must be typed in lowercase, or your document will not validate.
All attribute values must be in quotes In HTML, you didn’t need to put quotations around attributes values. In XHTML, they must be quoted. The following is incorrect: The following is valid XHTML
All attribute values must be in quotes Even in cases where the attribute only has one possible argument, you must specify the argument! This is not valid code: text text text This is valid XHTML code: text text text
Another change to be aware of: Another change under XHTML is the use of page anchors. Even though this change will not become standard until versions of XHTML later than 1.0, you should begin including the XHTML tag attributes in order to ensure that your pages are compliant in the future. Later versions of XHTML are going to drop the "name=" attribute in page anchors. Instead, one should use the "id=" attribute to name an anchor that's referenced by a "#" in the URL. Currently, most browsers only understand the "name=" argument, so until the browsers all catch up, simply use both of the attributes in your anchors, like this: Something Else
All tags must be closed XHTML requires that you close all of your tags. It's something that we're used to doing already, but the tricky part comes in when you have to use closing tags that are optional in HTML -- when was the last time you used ? Every open tag in your XHTML document needs to be accompanied by a closing tag. A paragraph in you document cannot look like this: This is a bad paragraph Instead, use a closing tag, like this: This is a good paragraph
More on tags You must remember to close every tag! Every needs a and every needs a. The same goes for all standard HTML tags, even the ones which feel awkward, like and. Fortunately, there is a shortcut for closing these tags that don't usually need to be logically closed. The shortcut is to add a close-command slash at the end of the tag to turn it off.
Tag shortcuts Yes, even the break tag needs to be closed. Use either or you can shortcut it as Even img and other tags must be closed: This rule applies to all tags that you wouldn’t normally close if you were writing HTML 4.01
Your basic Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> Bare bones XHTML file
XHTML Strict No tables No font tags Remember, XHTML separates presentation from content Bring documents into strict compliance This is the doctype statement to use for Strict:
Tools W3C validator – W3C CSS Validator HTML Tidy (HTML – XHTML Converter –Dos based program. –Windows or Unix (Linux) based. Also MAC. –Download from Homesite –Personal favorite Macromedia Homesite.
References - World Wide Web Consortiumhttp:// - General tutorial and referenceshttp:// - Good articlehttp:// - Good article and linkshttp://
Notes If you use wysiwyg editors like Dreamweaver or Frontpage, you are likely to have errors Hopefully these will be better in the future Use the Validator to work problems out.
Notes Remember that validators are not perfect, just like any other software product.
Notes The infamous white space bug: Each of the two tags below is functionally equivalent, but because of their varying use (or non–use) of white space, they might display differently in a browser that attempts to parse white space in markup. Thus: Might display differently than:
Notes Second example: Might display differently than: