HTML – from the stone age to the 21st century

HyperText Markup Language (HTML) is a quite old and relatively simple language. It consists of a set of elements (tags) that are used to structure content and to instruct web browsers to render documents.

Originally HTML was heavily used for styling. Famous examples of tags that function as cues for styling are:

• <font>
• <big>
• <center>
• <marquee> (In the dawn of the web, a website was not a website without a marquee)

Though the <font> tag still can be found on 6.5 million websites, it is not recommended to use HTML for look & feel. Cascading Style Sheets (CSS) is the language to style HTML elements. CSS has been around since the end of the 1990s.

The most important task of HTML is describing the semantic structure of documents.

* * *

The Beginning

Tim Berners-Lee and Robert Cailliau worked in the 1980s for the European Organization for Nuclear Research (CERN). They developed a pre-www hypertext system. The goal of this system was to facilitate sharing and updating information among researchers. Internet itself was already developed by the US Army in the 1960s.

It’s been a genius idea to combine these two technologies: internet and hypertext.

I just had to take the hypertext idea and connect it to the TCP and DNS ideas and — ta-da! — the World Wide Web. (Tim Berners-Lee)

In the 1980s Berners-Lee and Cailliau developed the first web browser, the HTTP-protocol and the first web server (on a NeXTcube). In 1991 the first website was launched: http://info.cern.ch/hypertext/WWW/TheProject.html

World’s first web server (Wikipedia)

One could argue that the invention of WWW is comparable to the invention of book printing. With half of the world’s population now on the web, it has an enormous impact on our lives – both positive and negative.

1991: Tim Berners-Lee published the first unofficial version of HTML

1993: HTML 1.0 published

This initial phase in the history of HTML can be characterized as the basal sharing of information via web browsers. At that time HTML consisted of 18 tags. For comparison, it has 140+ tags now. There were not many web developers.

Famous tags of this first version of HTML (v1.2) are:

• heading <h1>, <h2>, … to organize content by adding headings and subheadings to the top of sections of the page
• paragraph <p> to identify paragraphs of text
• anchor <a> to link to other web content
• list <ul>, <ol> to organize items into a list
• image <img> to embed images into a web page

* * *

The 1990s

1995: HTML 2.0 published

This version contained some additional features.

1997: HTML 3.2 published

This version contained a lot of improvements. HTML3 contained new features like:

• table (resizable)
• form
• applet (small Java programs that give a more dynamic experience to the until then static web content)
• text flow around image
• image background
• sub(super)script

The driving force behind this big improvement was Dave Raggett. In his view, web pages should look more like (glossy) magazine papers instead of (dull) textbook pages. Raggett has played an important role in the development of web technologies.

Besides HTML, he worked on: i.e. HTTP, XHTML, VRML and Web of Things. In the years 1993–1998 he was working on the Arena web browser. This was a private project. Hard to understand nowadays is that in this period in time, large computer corporations did not believe in WWW.

Arena web browser (Wikipedia)

Though HTML3 and the Arena web browser were very innovative, they did not become successful in terms of usage. Arena was a private project. The improvements of HTML3 were too extensive to be implemented quickly by browser vendors. This observation led to a more modular approach to the development of HTML in later years.

* * *

The 2000s

1999: HTML 4.01 published

HTML 4.01 has been very successful and the most used version in the 2000s. In 2000 XHTML was published. XHTML is HTML with stricter rules. In HTML 4.01 important new elements were introduced:

• <table> to organize data into rows and columns (already in HTML3?)
• <style> to add CSS and define the styling of HTML elements
• <script> to add JavaScript and make the (static) web pages more interactive

By introducing CSS a separation could be made between defining the semantic structure of a document and the way these elements are presented to the user and visualized.

The introduction of JavaScript, the programming language of the web, gave almost endless possibilities to improve user experience.

* * *

The 2010s

2008: draft HTML5 by Web Hypertext Application Technology Working Group (WHATWG)

2014: official standard by World Wide Web Consortium (W3C)

HTML5 is an extension of the very popular HTML version 4.01. HTML5 slogan is: let’s make things better! Three aspects can be distinguished:

• Create more dynamic and versatile features. This includes a movement up to present day, to replace scripting with markup.
• Ensuring similar user experience on different devices. Which was very much stimulated by the rise of mobile devices.
• More user-friendly and error-free.

A well-known example is a number input type <input type=”number”>:

HTML5 element

The number input is user-friendly. For instance, it is impossible to type a not numeric value. It behaves the same on different devices. And it is no longer needed to write JavaScript code to implement number input features yourself. It is a web component that encapsulates JavaScript and styling.

And HTML5 offers more.

Audio and video

• no plugins needed anymore
• playback features
• accessibility

In the minimalistic code snippet below, the <video> and <canvas> elements are used to connect to the camera of the device and draw a snapshot image:

<video id="my-video" autoplay></video>

<button onclick="getCurrentFrame()">Take Snapshot</button>

<canvas id="my-canvas" width="640" height="480"></canvas>

<script>
    const video = document.getElementById('my-video');
    const canvasContext = document.getElementById('my-canvas').getContext('2d');

    if (!navigator.getUserMedia) {
        console.log("getUserMedia not supported by your browser");
    }

    navigator.getUserMedia(
        {
            video: true,
            audio: false
        },
        (stream) => video.srcObject = stream,
        (error) => console.log(error)
    );

    function getCurrentFrame() {
        canvasContext.drawImage(video, 0, 0)
    }
</script>

Many new semantic tags

Examples:

• <header>
• <footer>
• <nav>
• <aside>

Semantic tags give meaning and structure to pages. This is important for:

• screen readers, crawlers and plugins
• search engines and search engine optimization (SEO)
• styling (CSS)

CSS should be based as much as possible on meaningful HTML elements instead of on the class and id attributes of <div> elements. The new semantic tags of HTML5 help to avoid divitis:

(web design, usually derogatory) The practice of authoring web-page code with many div elements in place of meaningful semantic HTML elements. (Wikipedia)

Performance improvements

Examples of performance improvements are:

• asynchronous loading of JavaScript: <script async>
• preloading of video: <video preload>

Offline support

Offline support features are AppCache, service workers and local storage.

During the 2010s there has been discussion between WHATWG and W3C about the versioning of HTML. W3C wanted a milestone approach. The WHATWG wanted a living document approach.

Advantage of the latter is that browser vendors can adapt more easily to iterative updates (see the challenges of the implementation of HTML3). Disadvantages are that it is harder to foster support and that it can be a challenge to find out which features have become available at a point in time.

Since 2019 WHATWG is the authority of the HTML and DOM standard. The HTML specification is a living document. See https://whatwg.org/

* * *

HTML6

The site html6test.com measures how well your browser supports HTML6. This suggests that there exists a set of features that is regarded to be HTML6.

Which version?

However, given the fact that HTML is developing through iterative updates, it is problematic to talk about a version 6. The new features are partly a continuation of an existing path that has been taken. Building on native components and extension of semantic tags. And they are partly new ideas, like express tags and namespaces.

Let’s have a look at these new features.

More semantic tags

Still more semantic tags are added to the HTML specification. Again, these tags have no behavior and their sole purpose is to give meaning to a document. These tags can be used as hooks for CSS and external software (parsers). Some examples:

Menu

<menu type="toolbar">
  <li><button>Apples</button></li>
  <li><button>Pears</button></li>
  <li><button>Oranges</button></li>
</menu>

Definition list

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open-source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <dt>Chrome</dt>
  <dd>Another web browser</dd>
</dl>

Figure

<figure>
  <figcaption>Johan Cruijff</figcaption>
  <blockquote>
    Als ik zou willen dat je het begreep, zou ik het beter hebben uitgelegd.
  </blockquote>
</figure>

<figure>
  <img src="favicon.ico">
  <figcaption>Star</figcaption>
</figure>

<figure>
  <pre>
      ___________________________
    < I'm an expert in my field. >
      ___________________________
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
</figure>

Code

<p>The <code>push()</code> method adds one or more elements to
  the end of an array and returns the new length of the array.</p>

Definition

<p>A <dfn id="def-validator">validator</dfn> is a program that
  checks for syntax errors in code or documents.</p>

Time

<p>The concert starts at <time datetime=“2018-07-07T20:00:00">20:00</time>.</p>

This element represents a timestamp in machine-readable format.

It is important to have a large set of tags to give meaning to data. In this context it is interesting to look at so-called microformats and express tags.

Microformats are a way to add markup to documents. This makes it possible for software (parsers) to extract the information and to index, search or otherwise process it. Like semantic tags, microformats add meta information to documents. See https://microformats.org/

Remarks can be found on the web about a new upcoming HTML feature: so-called express tags. The idea is that an author can create his/her own tags. This would reduce the use of <div>’s and therefore add semantic structure. Examples of such DIY-tags could be:

• <logo> instead of <div id=”logo”>
• <toolbar> instead of <div id=”toolbar”>
• <container> instead of <div id=”container”>

This supposes namespaces like in XML:

• <html:title>
• html:a>
• <html:body>
• etc.

More native components

In the context of making things better, which started with HTML5 in the 2010s, more new rich components have been created. These HTML elements have drawn in (into the shadow DOM) the JavaScript and CSS code that developers would otherwise have to write themselves.

Let’s have a look at some examples. These code snippets are as minimalistic as possible. It’s amazing to see the functionality these elements offer out of the box!

Details

<details id="foo">
  <summary>Presenting with IntelliJ IDEA</summary>
  To enable mouse zoom, you need to turn it on explicitly.
  Go to Preferences > Editor > General and select Change font size with
  Command+Mouse Wheel (on Mac)
</details>

<button onclick="toggleDetails()">Toggle</button>

<script>
  function toggleDetails() {
    const el = document.getElementById('foo');
    el.open = !el.open;
  }
</script>

Datalist (autocomplete)

<input list="browsers">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Datalist connected to a date and time picker

<input type="date" list="dates">

<datalist id="dates">
  <option value="2023-06-01">
  <option value="2023-06-02">
  <option value="2023-06-03">
</datalist>

<input type="time" list="hours">

<datalist id="hours">
  <option value="12:00">
  <option value="13:00">
  <option value="14:00">
  <option value="15:00">
</datalist>

Datalist connected to a range slider

<input type="range" list="percentages" min="0" max="100">

<datalist id="percentages">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Datalist connected to a color picker

<input type="color" list="redColors">

<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

Dialog

<dialog id="foo">
  <p>Is this an HTML-powered dialog box?</p>
  <form method="dialog">
    <input type="submit" value="Yes">
    <input type="submit" value="No">
  </form>
</dialog>

<button onclick="openDialog()">Open dialog</button>

<button onclick="showDialogValue()">Show value</button>

<script>
  openDialog = () => document.getElementById('foo').open = true;

  showDialogValue = () => window.alert(`Dialog value: ${document.getElementById('foo').returnValue}`)
</script>

Meter

<meter
  id="fuel"
  min="0" max="100"
  low="33" high="66" optimum="80"
  value="100"
>
</meter>

<script>
  const el = document.getElementById('fuel');
  const intervalId = setInterval(() => {
    el.value -= 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Progress bar

<progress id="foo" value="0" max="100"></progress>

<script>
  const el = document.getElementById('foo');
  const intervalId = setInterval(() => {
    el.value += 1;
    if (el.value === 100) {
      clearInterval(intervalId);
    }
  }, 100);
</script>

Rumors

Besides this continued work on semantic tags and native components, there are much more improvements. For example: the <picture> tag with its fine-grained control over the rendering of images, the <output> tag and the new attribute ‘hidden’.

Furthermore, some blogs on the internet describe new features whose statuses are unclear to me:

• Pluggable languages. For example <script type=”text/python”>. Why should one use Python instead of JavaScript?
• Guaranteed libraries. Libraries that are provided by the web browsers.
• Hardened authentication.
• Camera incorporation. There is no native <camera> component yet in HTML. Interesting article here about using <input> element without JavaScript.

* * *

Summary

Modern life very much depends on web access. HTML is one of the corner stones of the web. It is an old language, but very important and very lively. It is used by millions of authors and is constantly evolving and improving. As such, HTML is a testament to the adaptability and progress of web technology, with an irreplaceable role in our interconnected world.