The promise of HTML5 and CSS3

6 Oct 2014

As the new web standards of HTML5 and CSS3 continue to crystallize, new opportunities for professional self publication are now available to anyone. HTML5 provides a markup language that allows for meaningful structuring of documents as well as for easy embedding of all sorts of multimedia (photos, video, audio etc.). CSS3 provides the means to present the structured document in an appealing and effective way.

An example is this website, which is written completely in HTML5 and CSS3. The pages of this website do not include even a single line of Javascript (the main programming language of the web), at the moment. In the future, I intend to keep the main pages still javascript-free. Javascript is a programming language I have learned to appreciate, and is essential for web applications and any custom dynamic behavior or effect. However, not every person can be a programmer, or has the time to invest in becoming one. My purpose is to demonstrate, using this website, that much can be achieved with just plain HTML and CSS.

While not every person can become a programmer, every person who deals with knowledge and its dissemination (teachers, academics, researchers, writers etc.) has to acquire certain technical skills in order to produce and format documents. Doing that using web standards carries several advantages.

In addition to connecting your content with the reservoir of human knowledge that is the world wide web, one of the key features of web standards is separation of content and presentation. When you write your document in HTML, you concentrate solely on content and structure, not on how it will eventually be displayed. This is done later and separately, using CSS. It is therefore possible to change how a certain article or content is displayed without ever touching the HTML document itself. Additionally, because both HTML and CSS files are just plain text, your content is not locked in some format that only specific software tools can read, software that may no longer be available several years from now. As long as web browsers exist, you will be able to display and format your document with the help of CSS. And even many years from now, in some unforeseeable Sci-Fi-sh future when CSS will no longer be used, your content will continue to live within a plain text document undisturbed by irrelevant and ephemeral details of presentation.

Similarly, when undergraduate or graduate students are taught the intricacies of scientific and academic writing, why not teach them the required technical skills using HTML and CSS?! In that way, scientific and academic writing can promote at the same time the free and open standards of the web, and help ensure that they remain free and open. These standards are, after all, closer to the true spirit of science and scientific research than any of the common practices of scientific publishing today.

While it is true that only few years ago it was not really practical to write and format professional documents using only HTML and CSS (or at least it was very difficult, and required lots of extra Javascript programming and workarounds), the new standards of HTML5 and CSS3 have changed that completely. HTML5 provides many new semantic tags to help structure your content in more meaningful ways (e.g., article, section, figure, figcaption, header, footer and more, instead of the generic div), as well as easily embed multimedia in your document (as easy as locating the file on your system and adding a video, audio or embed tag in your document).

This greater variety of semantic tags also helps to better separate content from presentation, so once a HTML document is written, its presentation can be changed simply by changing the CSS commands used to display it. This is especially useful nowadays, when the same content is sometimes displayed on a computer screen, sometimes on a mobile device, sometimes on a lecture room white screen, and sometimes even printed on paper. By performing automatic device queries and conditionally choosing different CSS files or sets of styling commands, the same document can be properly displayed on all of these media.

CSS3 adds a staggering variety of new techniques and tricks to present and format your content. From eye-catching (but often abused) transitions, 2D and 3D transformations, and animations to more traditional multi-column layouts with automatic text justification and hyphenation. It is even possible to typeset math, by writing LaTeX within your content and linking your document with freely available Javascript software, without ever having to know even a single command in Javascript.

So do yourself a favor and start learning HTML5 and CSS3 today. A good place to start is the Mozilla Developer Network with excellent tutorials and references on both HTMLand CSS.