modern web standards
W3C for the win!

 

What are HTML, XML, XHTML, CSS…?!?!?!

As an internet user you’ve most likely stumbled over notions like HTML, XHTML, CSS and many others. But what do they actually mean? To properly understand those terms one has to take the history of the world wide web (please distinguish the terms “internet” and “WWW” which are often used synonymously) into account, which began in 1989 on the computer of a physicist at CERN (whohoo!). The WWW is essentially based on three cornerstones: Information is exchanged via the HTTP protocol and websites are retrieved in HTML format, where each page has a unique URL. Therefore, HTML is essentially the common language for each website you find and access in the big vastness of the WWW. In turn, the HTML language is based on the SGML-language, which itself evolved from the IBM GML language, dating back to ancient times of the digital age. We’re talking about the 70s and 80s here, therefore the underlying basis of the first version of the HTML standard is really really old…

XML + HTML = XHTML

XML meta-language + HTML keywords = XHTML

The first version of HTML (which actually had no version number attached to it) dates back to 1992. Before that, each web developer (somewhat of the order of 10^2 in total) used its own variant of the SGML-derived language. Over the years HTML evolved to its latest version HTML 4.01, which was finalized at the end of 1999. However, it is still based on the roots of SGML and GML, such that the language structure became rather complex due to numerous extensions, changes, etc. that accumulated over the years. This is where XML comes into play, which is the acronym for “extended markup language”. In fact, XML is not a full language but rather a meta-language, which is then used to define an actual language—you may think of XML being the grammar which together with a dictionary makes up a full language.

This is exactly what was done in XHTML: Using the XML meta-language a web language standard was defined, which closely resembles good old HTML but has all the benefits of a unified syntax as specified by XML. The first revision of XHTML 1.0 was defined in 1998, and XHTML 1.1 is the most recent version of this official web standard. Whereas XHTML 1.0 carries over almost the entire HTML 4.01 baggage to the new XML syntax to ease up the transition to the XHTML standard, XHTML 1.1 finally does the clear cut and forbids quite a number of depreciated commands. Therefore, despite their close name, the big “clean cut” is NOT between HTML 4 and XHTML 1.0 (in fact, most pages can be transformed by a few small syntax changes) but rather found between the XHTML 1.0 and XHTML 1.1 standards.

A second benefit of the XHTML language is its modular design. For example, you can easily extend your XHTML web site by adding the MathGL module, which is used for a nice presentation of mathematical formulas. XHTML without the modules just provides the basic functions and you can go further from there. Just like in coding standalone applications, such a design based on a small extendable core is pretty sound.

W3C

W3C consortium logo

Now, CSS—which is the abbreviation for Cascading Style Sheets—is an entirely different matter. Back in the days of the older versions of HTML all the design information (which truly was not much back in those days considering the rather limited multimedia and data transmission potential of the early 90s) like coloring, font size etc. went entirely into the HTML file itself. With the ever increasing technical capabilities of modern computers and the uprisal of graphical websites, this naturally led to HTML pages becoming extremely convoluted with ever-repeating blocks of design specification code. Essentially, the actual data and the design information become completely mixed up and cumbersome to maintain in the long run.

All this changed with the introduction of the CSS approach, which allows to effectively seperate the actual data from the design information: Now one can define a seperate CSS file containing all the necessary design information and link it to the actual HTML file. To give a relevant example: The old page was entirely based on static invisible tables containing numerous layers of completely redundant code. The new page—which looks pretty much the same—is just the actual data, very little inline CSS code and one not-so-big CSS file, to which all pages link. A much more clean concept, to say the least, and much easier to maintain if in the future I decide to change a few things…

Naturally, the development does not stop at this point. Audio and video information and real-time content handling are the obvious challenges for the next successful web standard to master. Two actual branches were pursued by the W3C web standard consortium for quite a while: XHTML 2.0 and HTML 5. I have to admit, that I’m not an expert in those things, but to my perception, both approaches are more or less essentially the same. This is most likely why the W3C stopped the XHTML 2.0 development in mid-2009 in order to focus their efforts entirely on HTML 5. Despite its name, HTML 5 is much closer to XHTML 1.1 as it is to the old HTML 4 standard—it is based on the XML meta-language and has a modular design. Essentially, it gets rid of much more depreciated elements than XHTML 1.1 does, to finally enforce the seperation between data and design instead of just offering it as a “convenient option”. One should note that the HTML 5 standard is not yet signed off, it is still in the “working draft” phase. Of course, the CSS standard for the “design language” is progressing as well. After the rather unsuccessful CSS 1 first variant, CSS 2 satisfied almost everyone’s wishes and its current version is CSS 2.1 with a few minor improvements. Currently in development is CSS 3, which will bring such goodies like automatic multi-column layouts, dynamic backgrounds and much more…

OK, now we have a bunch of web standards, what to do with them? On the homepage of the W3C consortium—the guys which invest their time into working out the web standards—you can validate any page you see on the internet, i.e. you let a program check whether or not it consists of proper code.

ie6 no more

The dark side of the web standards

From my above description, you may get the impression that everything is fine and happy in WWW land. Unfortunately, this could not be farther from the actual truth from the perspective of a web designer. Since the W3C web standards like HTML, XHTML and CSS are only recommendations and not “enforced laws” for the browser developers, no one is required to actually follow those guidelines. While to any sensible person it should be clear that a proper interpretation of standard conformal web code should be the foremost goal of any browser developer, apparently the guys from Redmond—i.e. Microsoft—seemed to have a rather different interpretation on this issue for quite some time.

In clearer words: The Microsoft Internet Explorer is by far the WORST browser you can use for your internet experience, unless it is the most recent version 8.0 which has finally cought up with the rest of the pack in terms of standard compliance—at least in a few aspects (it still does not properly communicate the XHTML MIME data type, but at least it is doing what it should be doing). While I’ve been a Opera user since version 5.0 (i.e. back since 2001), the majority of users takes what the operating systems brings along, which in most cases means Internet Explorer. Microsoft is quite responsible for holding back the standard compliance of the WWW, and numerous workarounds for the different shortcomings of the older versions of the IE have been developed using JavaScript, CSS hacks etc. While all of this may sound like Microsoft bashing, it is not the case, when you look at the facts.

I do not care if my page is properly displayed on any specific browser!

Other browsers have their own shortcomings and standard incompatibilities, but those are usually minor compared to what the older variants of the Internet Explorer do. And if you put into account that the IE 6 reached more than 95 % market penetration at one point, this is rather embarrassing for the Microsoft team. However, web designers are finally starting to ignore the IE 6 and older versions, which may finally bring the web on track. Furthermore, the Firefox browser really seems to have grown a lead in the last few months…

Having said that, I’d point out that the entire website now fully validates as valid XHTML 1.1 and CSS 2.1, and also passes the experimental HTML 5 working draft test. You can check this yourself using the respective W3C validation buttons at the foot of every page. So if something does not work (i.e. some screwed layout of the page), I can only recommend switching to either the Firefox, Opera or Google Chrome browser. Taking the “good old used-forever program” approach to your web browser is really the wrong attitute to the ever-evolving internet…

Page evolution from the technical perspective:

Over the final summer weeks of ’09 I finally managed to find the time (a bit here, a bit there) to recode the entire web site. This step significantly simplified the code base for the dynamic content working in the background, which allows for much easier maintenance and extension in the future. The second big upgrade is the step up from the “HTML 4.01 Transitional” to the “XHTML 1.1” web standard. From the programmers point of view this should make page much more accessible from different machines.

During May ’10 I added a couple of refinements to the website layout, mostly minor things, but a lot of little bits and pieces really add up. Most importantly, I now make use of the upcoming CSS version 3 properties border-radius and box-shadow, which allows to deviate from the traditional box-like shape of objects and add some smooth gradients—at least from the visual point of view. The CSS3 standardization process is now in its final stages and virtually all important web browsers (Firefox, Opera, Chrome)—with the somewhat “obvious” exception of the allmighty Internet Explorer up to version 8, of course—already support at least the border-radius property.

Shortly after New Years Eve in early 2011 I relocated my website from the old 1&1 servers to my new provider HostEurope - and the level of support, performance and accessibility has greatly improved. Furthermore, as of March 9th, 2011 the website is now also IPv6 ready.

In autum 2011 I once again switched over the webstandard to make use of the semantic information that can be encoded using the up-and-coming HTML5 standard—and in order to keep up with W3C standard to drop support for old Internet Explorer versions, even including v8 which was the last one supported on Windows XP. This was kind of a radical step, but since the older versions up to and including IE8 would once again have required nasty hacks to get them to cooperate, I simply kicked them out. After all, each user has the choice of at least three entirely free web browsers (Opera, Firefox, Google Chrome, and many others). Since this step also guaranteed me that a halfway up-to-date browser is running on the users side, I finally could enter a widespread use of custom fonts that are easily usable with CSS3. That’s a small step for this webpage, but a great leap for web development…

Copyright information: “W3C logo” image by World Wide Web Consortium