Web Standards
HTML Standards
The HTML standards DTDs:
| Standard | DTD | What's Hot What's Not |
|---|---|---|
| HTML 4 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | Adds <label>, <span> and the attributes class, id and style |
| HTML 4 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | Deletes <a target>, <center>, <font> and <u> and align attribute |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> | XML syntax, otherwise identical to HTML 4 transitional |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | Deletes attribute name (in anchors, forms and inputs- which NN4 needs), border on <img>. |
| XHTML Mobile Profile | <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> | Not w3c, but a superset of XHTML Basic for mobile phones (a.k.a. WAP 2.0). Includes inline-style and style blocks, fieldset, b, i and big/small. NB MIME should be application/vnd.wap.xhtml+xml but should accept “application/xhtml+xml”. |
| HTML 5 | <!DOCTYPE html> | Doesn't validate, but triggers standards mode in all browsers. Used by Google to save bytes. |
The difference between transitional and strict DTDs is that all the deprecated (obsolete) elements and attributes are removed. Usually you can replace them with stylesheets, but the result may look bland in old browsers. For practical purposes, the transitional DTD with some deprecated elements (to center blocks, for instance) is fine and often works better with older browsers.
The major problem is block centering which should be {margin-left:auto; margin-right:auto;} but in IE use text-align in an wrapper (like inline centering).
XHTML 1.0
XHTML 1.0 is identical to HTML 4, but structured as XML. See the XHTML 1.0 Appendix C for details of compatibility with HTML 4.0 browsers.
- All elements and attributes are lower case.
- All elements are closed (<IMG> is <img />, <BR> is <br />)
- All elements must be nested properly (well formed).
- All attribute values are in quotes (<IMG SRC=a.gif> is <img src="a.gif" />).
Advantages:
- If you're transformed or manipulating the page as XML at some point, you might as well output as XHTML 1.0.
- Newer mobile phones (DoCoMo, Nokia, Ericsson and Openwave) use XHTML Mobile Profile. This is a superset of XHTML Basic (the w3c cut-down version of 1.1). Essentially, they accept slightly cut-down XHTML (no popups/ frames). Fortunately WML (WAP) and cHTML are dying rapidly.
- Future accessibility technologies for disabled people might use xhtml.
- If you're a programmer, separating content from presentation, and cleaner code, are good but only you as author will ever notice it.
Disadvantages
- Browsers mess up your page if you have an XHTML DTD and it doesn't validate properly (even if it does, it doesn't make anything better for the user). No browsers are true xml parsers, so xhtml gets treated as tag soup just like html 4 with a few more rigid presentation rules. If pages are served as application/xml, IE and other browsers try to download the file (application/html is allowed for XHTML 1.0, not 1.1).
- It takes a clever designer and a clever css-guru to make an interesting design (an average joe with Front Page can create a nice site much faster). No users will ever realise you have beautifully clean code.
- One of the great advantages of DHTML is adding proprietary attributes to store additional flags/ metadata on tables and form fields (e.g. data-types, sort orders, original values). The w3c dom allows you to manipulate them with x.getAttribute and x.setAttribute. You can't do it in a page with a DTD.
Name to Id
The name attribute (<a name="x">, <input name="y">) is deprecated in favour of the id attribute. The w3c DOM uses document.getElementById (equivalent to document.all in IE) which depends on the id attribute. But older browsers use the name attribute (especially when submitting forms, where HTTP post or get uses the name and value from input fields). The w3c DOM, which can be used cross-browser, is the major incentive to use the id attribute. In practice, use both id and name, setting them to identical values.
Nested anchors
Note that anchors cannot contain other anchors (ie a <a name="top"><a href="bottom">Bottom</a></a>- use <a name="top" href="bottom">Bottom</a> instead)
Script blocks
Script blocks should be in <![CDATA[ ...script... ]]> rather than <!-- comment blocks -->. In practice IE5 and other browsers die with a script error on the CDATA, while standard comments work fine. Better still, use external scripts and stylesheets.
XHTML 1.1
For XHTML 1.1, the lang and <a name> attributes are gone (use xml:lang and id instead). Unlike XHTML 1.0, it must be served as text/xml instead of text/html- only Mozilla supports this (others including IE try to download an XML document).
Top