Web standards

Notis: 159
Datum: 2013-08-21

During my recreational hours this summer, I studied web standards. First I read (very carefully) the specifications for HTML+, HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.01, XHTML 1.0, XHTML 2.0, and HTML 5 .1. I also read (very carefully) about HTML Microdata, Using WAI-ARIA in HTML, and Polyglot Markup: HTML-Compatible XHTML Documents.

I also reread the Scalable Vector Graphics (SVG) 1.1 (Second Edition) specification.

Since I am also interested in general XML, I continued by reading Extensible Markup Language (XML) 1.0 (Fifth Edition) and Namespaces in XML 1.0 (Third Edition) carefully, along with XML Schema Part 0: Primer Second Edition. Then I read XML Path Language (XPath) Version 1.0, XSL Transformations (XSLT) Version 1.0, and Associating Style Sheets with XML documents 1.0 (Second Edition). Finally, I read XML Linking Language (XLink) Version 1.1, XPointer Framework, XPointer element() Scheme, XPointer xmlns() Scheme, XPointer xpointer() Scheme, and XML Base (Second Edition).

To try some of my new knowledge in practice, I wrote a primitive desktop calculator that woks in any modern browser (IE10, Chrome, Firefox, Safari, Opera, ...).

Generally, I love HTML5, CSS, SVG, and XML. Regarding HTML5, I am particularly fond of the new semantic elements (<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, and <figure>), the clarified semantics of old elements (such as <em>, <strong>, <i>, <b>, <cite>, and <dl>), the new <audio> and <video> elements, microdata, and the new form capabilities, just to mention a few of my personal favourites.

I am very fascinated by the power of XML, and – in particular – the power of XSL(T).

I have used my new knowledge to improve my own websites; now, almost all of my web pages are conforming XHTML 1.0 documents (and any exception is well-motivated and will vanish as soon as I upgrade to the HTML5 doctype). I have also redesigned the pages to be more semantic, and to separate content and style perfectly, where possible (and most often it is possible). In addition, I have added quite a lot of visual improvements using CSS, particularly using :before and :after, which will be visible in any modern browser, even including IE8+. When it comes to text-level semantics, I strictly follow the new HTML5 rules:

<em> is used for stress emphasis, and is usually rendered in italics. The use of <em> alters (or clarifies) the intended meaning of the sentence, usually by stressing some particular word in it (as opposed to some other word in it). It must not be used for anything other than this kind of emphasis.
<strong> is used to highlight an important part of a sentence, like the text ‘warning’, or a particularly important-to-notice word or passage in a warning text. The contents is usually rendered in boldface. The use of <strong> does not affect the meaning of the sentence (like <em> does). <strong> must not be used for any other reason than marking its contents as extra important.
<i> is used to contain a span of text in “an alternate voice or mood”, or otherwise “offset from the normal prose in a manner indicating a different quality of text” [quoted from the W3C spec]. Example applications include taxonomic designations and idiomatic phrases from languages different from the surrounding text’s main language. The default rendering is in italics. It is good practice to combine the element with a class attribute, unless (possibly) the current use of <i> is exceptional in the document. Of course, text in a different language should also be indicated using the lang attribute.
<b>, typically rendered in boldface, is used to highlight a span of text in order to draw the reader’s attention to it. For instance, one can use this element to highlight ‘keywords’ (in some sense and context) or to mark up a piece of text that could be considered a ‘heading’ or ‘lead’ of a paragraph. This element does not change the meaning of the text, nor does it indicate importance. One might use a class attribute to specify the particular semantics of an instance of this tag, which should only be used as a ‘last resort’ when no other, more specific, element is appropriate (like a heading, <em>, <strong>, or <dfn>).
<cite> is used to mark up a title of a book, article, magazine, newspaper, film, TV show, play, musical, sculpture, or some other named piece of art or work. The element is typically rendered in italics. As usual, if the contents of the element is in a different language, this should be specified using the lang attribute.
<dfn> is used to mark up the defining instance of a phrase in a document. The element is typically rendered in italics.
<mark> is used to highlight (e.g. using a yellow background colour) a part of a text quoted from a different source.
<var> (typical rendering: italics), <samp> (typical rendering: monospaced font), and <kbd> (typical rendering: monospaced font) are used for variables or placeholders, sample computer output, and user input (to a computer), respectively. The spec defines specific nesting semantics for the two last elements. In particular, a <kbd> element inside another <kbd> element represents a discrete key being part of the user input marked up by the outer element, like <kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Space</kbd></kbd>.
<abbr> is used to mark up abbreviations, including acronyms. The title attribute has special semantics for this element: it specifies the expanded form of the abbreviation. Again, it is important to specify the language correctly both for the attributes and for the text contents of the element. It is rather common, especially in non-English text, for abbreviations (that is, the text contents of the <abbr> element) to be pronounced using the text’s main language, while the expanded form of the abbreviation (that is, the title attribute of the <abbr> element) should be pronounced in English. Since the lang attribute specifies the language both of attributes and of the contents of the element, you need to use a <span> element with the appropriate lang attribute to enclose the text content of the <abbr> element, as in this example.

In addition, I try to use the description list (<dl>) every time I need to mark up any kind of name–value pairs (in a broad sense), including definition lists, metadata name–value pairs, and FAQs. However, for practical purposes, it would be good if the <di> tag from XHTML 2 was reinstalled (see my comment at html5doctor.com).

I would also like to replace <div id="header"> with <header>, and similarly for the other new semantic div-like elements. I believe this will fail in Internet Explorer 5.0 (even with the JavaScript trick), a browser that today is perfectly able to render my sites in a primitive but readable fashion. Hence, by using the new HTML5 semantic elements, I will raise the Internet Explorer minimum support level from 5.0 to 5.5, which I guess is acceptable, since Internet Explorer 5.5 can also be installed on Windows 95, an operating system I want to support. I would also like to replace the current navbar by a completely semantic one that perfectly separates content and style. I could do it like this, but this again would make the page harder to render for old IEs.

While improving my websites, I carefully monitor the rendering in old browsers. I have virtual machines running Windows 95, Windows XP, Windows Vista, and Windows 7, and the following versions of Internet Explorer:

Internet Explorer 3.0
Internet Explorer 4.0
Internet Explorer 5.0
Internet Explorer 5.5
Internet Explorer 6.0
Internet Explorer 7
Internet Explorer 8
Internet Explorer 9
Internet Explorer 10

In a few days, I will publish a small article giving all the details of the rendering of my sites in old versions of Internet Explorer.