Beyond HTML: why HTML is just not enough

There are countless ways to create websites: from Notepad to complex Content Management Systems. The barrier of entry is very low and HTML seems deceptively easy. So why bother with anything else?

Problems with straight HTML

The main issue with HTML is that it does only what it is supposed to: describing how text content is organized and laid out. There are kinds of information mixed toghether (content, structure and style). It doesn't have any higher level constructs.

For example, if you are having the same navigation menu repeated in every page, you have to duplicate the code (and text) everywhere. This is hard work to create in the first place, and a nightmare to change or maintain.

No inclusion, repetition and selection

You have no way of specifying inclusion, repetition, selection - familiar constructs in other computer languages. Of course, this is for keeping HTML simple - a very important advantage in the beginning, but a hindrance when you advance and start working with bigger and more complex web sites.

Multiple ways to do the same thing

As HTML evolved through its versions and revisions, many ways were available to express the same thing. Each way was more appropriate under certain circumstance, but how to make the choice and how to enforce it over a large web site?

No smart links

Another glaring problem was the localized nature of HTML. When referring to another website, page or section, including hints like keywords, descriptions and briefs greatly improves usability. HTML has no support for such "smart pointers", imposing duplication.

One content, multiple formats

Sometimes a single body of text needs to be available in various forms and formats. For example a product manual may be needed in the product's attached help, on the company's website and in a printed manual.

Hard to: respect standards, improve usability and optimise for search engines

Respecting standards, website usability and Search Engine Optimisations require lots of small, fine tweaks, lots of little texts obeying lots of little rules. Without a way to impose those rules, and a way to change them from a single place (as opposed to every place they are used) - it's a nightmare.

Solutions

Over time, a number of solutions were implemented. Their scope overlaps and they often borrow each other's techniques, so a strict categorization is impossible. Here's a rather informal one though.

Cascading Style Sheets

A partial solution was an addition to the HTML itself: CSS - the Cascading Style Sheets. Originally CSS was created to fix another problem - that the original HTML had the bad habit of mixing style and content in a single file.

CSS allows you to externalize the style information, to include it and through smart priority rules to select and reuse it. That is of limited help though, as it cannot be used to separate the structure and content.

Application Servers

Application Servers are also solving a different problem, that of dynamic websites - websites which personalize their content for each different visitor. Using them for a non-dynamic website is possible, but the performance penalty they impose is unnecessary.

Templating systems and frameworks

The most flexible and generic solution to the presented issues are templates. These are languages build separately from HTML, with their own syntax and rules, which when executed produce HTML. Examples of such languages are PHP and XSLT.

From their level of coupling with HTML, templating systems can be thought as:

• Embedded - the templates are embedded inside HTML pages; examples are Server Side Includes or PHP
• Separated - the content is kept separated from the templates, which are then applied in order to generate HTML; examples are database-driven websites and XSL templates

From the time at which the templates are applied and HTML is generated, templating systems can be divided in three:

• Static - applied statically to generate the website before uploading it
• Dynamic (server side) - applied to obtain each HTML page as it is requested
• Dynamic (client side) - the content and templates are downloaded separately and applied on the client side to obtain the HTML; it's called Ajax and is a mixture or JavaScript, XML and XSL

Note: The two classifications are orthogonal and not cast in stone. Embedded templates tend to be server side applied (because of their speed) and separate templates tend to be statically applied for the same reason. However, exceptions exist as dynamic templates can be used statically and vice versa.

The classification boundaries can be very blury as well. PHP can be applied both statically and dinamically, embedded or separated. When applied dinamically, separated from the HTML, and the content is in a database, we are in the application server realm...

Read on: Benefits of the XML and XSL technologies.

First Posted: August 30th, 2005 - Tuesday.
Last Updated: September 29th, 2005 - Thursday.