XHTML

From DreamHost
Revision as of 14:10, 12 May 2010 by Javierrod (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Extensible HyperText Markup Language

XHTML is mostly the same as HTML with a few important differences:

  • All elements must be nested in the proper order
  • All element and attribute names must be lowercase
  • End tags are required on each element (even empty ones like <br> (use <br /> instead)
  • All attributes must be quoted

This means that the following is valid XHTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Valid XHTML</title>
  </head>
  <body>
    <h1>This is Valid XHTML</h1>
    <hr />
    <p>Gaze with <strong><em>wonder</em></strong> upon my 
    <a href="http://validator.w3.org/check?uri=referer">validity!</a></p>
  </body>
</html>

While the following is not:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Valid XHTML</title>
  </head>
  <!-- Oops, can't have tags in uppercase! -->
  <BODY>
    <h1>This is Valid XHTML</h1>
    <!-- Nope, all elements need closing tags! -->
    <hr>
    <!-- What?! Open and close those tags in order, silly! -->
    <p>Gaze with <em><strong>wonder</em></strong> upon my 
    <!-- Sorry, Charlie! Gotta quote those attributes! -->
    <a href=http://validator.w3.org/check?uri=referer>validity!</a></p>
  </body>
</html>

Well that sure sounds like a pain! Why on earth would anyone bother?

Good question! There are a few reasons why modern websites are beginning more and more to move toward XHTML:

  • It forces you to write correct markup, which means your pages have much more consistent results in browsers across the spectrum; even your oldest versions of Netscape!
  • Your pages will load faster when you use valid markup, because the browser doesn't have to stop to try and figure out what you meant
  • Tired of writing a specialized version of your site for text-only viewers, wireless viewers, and so on? Don't! With XHTML, you can write once, be viewed by all!
  • Particularly with XHTML Strict, XHTML helps force you to separate your "structure" (content) from your "presentation" (colors, fonts, margins, etc -- all the stuff that should be going into your CSS files). This leads to much cleaner designs, as well as increased accessibility.

XHTML 1.1, MIME Types And Dynamic Pages

The W3C XHTML 1.1 specification requires a MIME type of application/xhtml+xml.

If you are using static Web pages, the easiest way to meet that requirement is to use the .xhtml or .xht file extension for your pages; Dreamhost's default Apache config file will ensure your site sends the proper content type.

However, if you are using dynamic pages, such as PHP or CGI, Dreamhost's default Apache install will not send the application/xhtml+xml MIME type for your page. You need to override that setting. Your page will still validate through the W3C Validator, but it will display a warning indicating the server sent the wrong MIME type for the page.

Unfortunately, using the Apache AddType directive in an .htaccess file will not override your server's MIME type settings; nor will changing the content-type in a META tag.

For dynamic pages to send the proper MIME type, you must force an override of the server settings by sending modified header information. This is most easily done, in PHP, with the header() function, placed as the very first line of the page's code:

<?php
header("Content-Type: application/xhtml+xml; charset=utf-8");
?>

External links

See also