Easy Web Site Design

Web browsers are much more forgiving than conventional programming environments (in which a single missing comma can cause a program to fail). Browsers will do their best to display any garbage that is thrown at them, and over the years Web designers have taken advantage of their generosity by creating plenty of garbage in the form of lazy and sloppy code.

Browser wars

During the late 90's Internet Explorer and Netscape Navigator were locked in battle to be the dominant Web browser. Each browser implemented things slightly differently than its rival, sometimes even introducing proprietary tags in an attempt to gain an edge. This led to the "optimized for IE/Netscape" phenomena (and totally confounded the Web's very purpose of openness).

Standards to the rescue

In recent years the W3C has been active in promoting the benefits of properly formed HTML code, including the provision of online validation checks and little logos to say you're pages conform to some standard.

The latest and recommended W3C HTML standard is XHTML (extensible Hypertext Markup Language).

Benefits of using XHTML

By designing to the current standard you can be as sure as possible that your pages will display consistently across the maximum number of browsers both present and future.

XHTML is actually an implementation of HTML as an XML language. This means XHTML documents may be manipulated by the various XML tools and technologies. For example a single source document may be delivered to different platforms - browser, print, the increasing range of mobile devices… all by means of some XML transformation.
XHTML is extensible. Purpose specific tags may be included to give greater meaning than the generic (X)HTML tag set.
XHTML encourages/enforces (depending on version & DTD) the separation of content from presentation. Among other benefits this increases the accessibility of XHTML documents.

Writing XHTML

The good news is XHTML (version 1) isn't very different from the HTML described so far. Here are the key points in producing XHTML.

XHTML documents start with a DOCTYPE tag in which the DTD (XHTML version and flavor) is declared: eg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

There are 3 flavors of XHTML1.

The above example is for XHTML Transitional. This is probably the most commonly used, and certainly the easiest to comply with if converting an existing site. It permits the use of certain deprecated presentational elements.

XHTML Strict forbids the use of any deprecated markup.

XHTML Frameset is for use with frameset pages, ie those containing other frames. NB frames carry negative usability implications and should be used only where absolutely justified.

The html start tag contains namespace and language declarations: eg

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Content type is also declared by way of a meta tag: eg

<meta http-equiv="content-type" content="text/html; 
      charset=iso-8859-1" />

Within the document:

All tag and attribute names must be in lower case.
All start tags must have a corresponding closing tag. Empty tags must end with a slash, eg
Attribute values must be quoted, eg <img src="test.jpg />
All attributes must have a value. Attributes which previously took no value repeat their name as vale, eg checked="checked" for a form checkbox.
Tags must be properly nested - ie tags must be closed in the reverse order to which they are opened, eg hello

Dreamweaver and XHTML

If you're using Dreamweaver MX or later you can select XHTML compliance when you open a new document. Dreamweaver will then ensure that whatever you do is XHTML compliant, or at least warn you if you do something taht isn't in code view. Dreamweaver can also validate pages and highlight errors where your page deviates from the standard.

What next?

The latest XHTML version, XHTML 1.1, removes support for deprecated elements and is based on modularisation, ie elements re split into different modules such as the list module, forms module, table module...

The W3C is currently working on XHTML 2, which will be radically different than its predecessors.

Further information

XHTML Tutorial from W3Schools

W3C Markup Validation Service

XHTML 1.0 The Extensible HyperText Markup Language from the W3C

XHTML 1.1 - Module-based XHTML from the W3C

XHTML 2 from the W3C

USENET newsgroups:
alt.html
comp.infosystems.www.authoring.site-design
comp.infosystems.www.authoring.html
alt.macromedia.dreamweaver
macromedia.dreamweaver

Easy Web Site Design HTML tutorial : Web Standards - XHTML


Home Definitions & history Why is it important? Introduction to HTML Basic HTML Code HTML Tables HTML Lists HTML Forms Standards: XHTML Web graphics Presentation - CSS Enhancing the Web Usability Accessibility Going live Online payments The Future: XML Internet Glossary On the Web Suggested reading More books on Web Site Design	Background Browser tolerance Web browsers are much more forgiving than conventional programming environments (in which a single missing comma can cause a program to fail). Browsers will do their best to display any garbage that is thrown at them, and over the years Web designers have taken advantage of their generosity by creating plenty of garbage in the form of lazy and sloppy code. Browser wars During the late 90's Internet Explorer and Netscape Navigator were locked in battle to be the dominant Web browser. Each browser implemented things slightly differently than its rival, sometimes even introducing proprietary tags in an attempt to gain an edge. This led to the "optimized for IE/Netscape" phenomena (and totally confounded the Web's very purpose of openness). Standards to the rescue In recent years the W3C has been active in promoting the benefits of properly formed HTML code, including the provision of online validation checks and little logos to say you're pages conform to some standard. The latest and recommended W3C HTML standard is XHTML (extensible Hypertext Markup Language). Benefits of using XHTML By designing to the current standard you can be as sure as possible that your pages will display consistently across the maximum number of browsers both present and future. XHTML is actually an implementation of HTML as an XML language. This means XHTML documents may be manipulated by the various XML tools and technologies. For example a single source document may be delivered to different platforms - browser, print, the increasing range of mobile devices… all by means of some XML transformation. XHTML is extensible. Purpose specific tags may be included to give greater meaning than the generic (X)HTML tag set. XHTML encourages/enforces (depending on version & DTD) the separation of content from presentation. Among other benefits this increases the accessibility of XHTML documents. Writing XHTML The good news is XHTML (version 1) isn't very different from the HTML described so far. Here are the key points in producing XHTML. XHTML documents start with a DOCTYPE tag in which the DTD (XHTML version and flavor) is declared: eg <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> There are 3 flavors of XHTML1. The above example is for XHTML Transitional. This is probably the most commonly used, and certainly the easiest to comply with if converting an existing site. It permits the use of certain deprecated presentational elements. XHTML Strict forbids the use of any deprecated markup. XHTML Frameset is for use with frameset pages, ie those containing other frames. NB frames carry negative usability implications and should be used only where absolutely justified. The html start tag contains namespace and language declarations: eg <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> Content type is also declared by way of a meta tag: eg <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Within the document: All tag and attribute names must be in lower case. All start tags must have a corresponding closing tag. Empty tags must end with a slash, eg <br /> Attribute values must be quoted, eg <img src="test.jpg /> All attributes must have a value. Attributes which previously took no value repeat their name as vale, eg checked="checked" for a form checkbox. Tags must be properly nested - ie tags must be closed in the reverse order to which they are opened, eg <strong><em>hello</em></strong> Dreamweaver and XHTML If you're using Dreamweaver MX or later you can select XHTML compliance when you open a new document. Dreamweaver will then ensure that whatever you do is XHTML compliant, or at least warn you if you do something taht isn't in code view. Dreamweaver can also validate pages and highlight errors where your page deviates from the standard. What next? The latest XHTML version, XHTML 1.1, removes support for deprecated elements and is based on modularisation, ie elements re split into different modules such as the list module, forms module, table module... The W3C is currently working on XHTML 2, which will be radically different than its predecessors. Further information XHTML Tutorial from W3Schools W3C Markup Validation Service XHTML 1.0 The Extensible HyperText Markup Language from the W3C XHTML 1.1 - Module-based XHTML from the W3C XHTML 2 from the W3C USENET newsgroups: alt.html comp.infosystems.www.authoring.site-design comp.infosystems.www.authoring.html alt.macromedia.dreamweaver macromedia.dreamweaver back to top
© web.twinisles.com Questions? Comments? Contact info@twinisles.com