HTML Matures Again
In the 1980’s when people began thinking about making the Internet more accessible Apple Corporation launched a product called HyperCard in 1987 that popularized words like hyper-text and hyper-links. HyperCard was the first commercial product that combined a text editor with a database to create note cards that hyper-linked to other cards or files on the computer. Each hyper-word was underlined and linked through a hyper-link (a database entry) to a media file. If you clicked on the underlined word then the other media file would be opened. This product was a huge success and foreshadowed HTML which was introduced in 1991 by Berners-Lee in a document titled “HTML Tags”.
In the 1990’s HTML was simply a Hyper Text Markup Language. Meaning it combined the ideas that Apple popularized in HyperCard with another popular idea, a printer scripting language called PostScript (which Adobe uses so successfully in their PDF products). As you know, PostScript was created in 1982 as an advanced text publishing language for printers. Book publishers needing professional fonts and graphics used PostScript to ensure a consistent high quality printout on any printer or software supporting PostScript. HTML was the next logical evolution of these ideas as it applied to the Internet. Internet pages could now be formatted in a pretty way and hyper-linked to other web pages or media stored on the Internet. This helped popularize the Internet in 1995 making it accessible to the general public.
The original HTML was like the original HyperCard program, a simple easy to use scripting language. It was not professional like PostScript. This reality had plagued HTML for many years. In 2000 CSS, Cascading Style Sheets, was introduced addressing many of the shortfalls in HTML text formatting and layout. CSS permits professional page layout control much like PostScript did for printers. JavaScript together with DHTM permits true programmable elements integrated with the HTML document tags, unlike Java which is less connected to the HTML document. Recently, HTML5 has further advanced HTML scripting by providing more powerful programming elements using the new tag <canvas>, media support with the new tags <video> and <audio>, and layout tags that complement the generalized <div> tag. These new layout tags contextualized divisions so that they can be understood by the browser. We will look into this in some detail in this article. I won’t be going over all of HTML5 but only the more important additions.
Tags like video and audio existed in various forms within IE, Microsoft’s Internet Explorer, but they were not adopted by other browser companies and remained proprietary to IE. HTML5 brings these ideas into standardization.
Contextualized Divisions
The HTML <div> tag is great. It is a generalized tag. Developers are free to use it in any way they see fit. It gives the developer the ability to isolate sections of a document and define it as being different in format and style, but the shortfall is that it has no meaning to the browser. This can be partly overcome by adding an id attribute, <div id=“footer”>. In this case the developer now knows why this <div> tag is present.
It defines the “footer” section of the web page (in this example). The developer can even write CSS and JavaScript code that targets that id attribute, but the browser is still ignorant of its meaning. We cannot pass responsibilities to the browser since it cannot read human languages and therefore cannot figure out the meaning of id=“footer”.
Google “Pave the cow paths” and you will see the W3C, World Wide Web Consortium, rational for HTML5. If you look at a hill with cows grazing, you will discover that they have worn down the ground in some area, creating paths. Humans do this as well. Go to any campus or park and you will see paved areas and worn down areas that have turned into paths. W3C data-mined the Internet to see which <div> tag id attributes were most commonly used. Like the cow paths they found the following id attributes as most common and turned them into HTML5 tags to contextualize divisions: <header>, <footer>, <hgroup>, <article>, <aside>, <figure>, <figcaption>, <mark>, <nav>, <section>, and <time>.
To help us understand these contextualized divisions look at figure 1. This figure represents a web page divided into sections as defined by HTML5.
Standard web pages look like Figure 1. They commonly have a header and a footer. They have menus, represented here by <nav></nav>. A primary writing area, represented by the <section></section> tags, divided into one or more topics, using the <article></article> tags. There is often a secondary writing area represented here by <aside></aside>. Multiple articles can also be placed within the aside. Business, personal web sites and educational sites all have this common layout. There are exceptions to this format but HTML5’s layout tags do not address them.
Table 1 summarizes the layout division tags. Of course all other HTML tags and CSS can be nested within these new HTML5 tags.
HTML5 is not as new as it used to be, but you still need to be careful with browser support. For example, you are probably safe with IE9 (Internet Explorer 9) and Google’s Chrome. Also make sure your editor supports HTML5 syntax.
The Canvas Tag
The <canvas> tag is simply a container that permits JavaScript, or any scripting language the ability to directly write and draw in the defined area. If the browser does not support this tag then any text written between the <canvas> </canvas> will be displayed on the browser page instead of the canvas area. Using the width and height attributes the developer can specify the size of the canvas. You should understand that the canvas tag should be viewed as an actual blank painter’s canvas that can be drawn on in any way you see fit.
Here is example code of drawing a square box in the canvas area:
<html>
<body>
<!-- Canvas defined as a 500x500 pixel box -->
<canvas id="myCanvas" height="500" width="500">
Your browser does not support the canvas tag
</canvas>
<script type="text/javascript">
// Use JavaScript to connect with the
// "myCanvas" ID and get a drawing context
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw blue square
ctx.fillStyle = '#6666FF';
ctx.fillRect(0, 0, 200, 200);
</script>
</body>
</html>
How does <canvas> compare with <svg>?
Canvas is direct and immediate pixel drawing via JavaScript programming. SVG is an XML scripting language that assumes browser support. The developer uses XML to define the shapes they want and the browser then renders the image. This means that the browser maintains an internal memory model of the shape. What’s good about this is that the developer can use a programming language to manipulate the shape as an object. What’s bad about this is that the browser must support SVG and must use up resources to maintain this model in memory.
Audio and Video Support
The new HTML5 tags <audio> and <video> provide codec based audio and video support. No need for Flash or Silverlight. Check out http://www.diveintohtml5.net/video.html for an in-depth explanation of vodecs. Since this is based on codec technology and different browsers support different ones HTML5 supports a graceful fall-back procedure. More than one codec can be specified, similar to CSS font downgrading, the tag will try out each codec one at a time in the order presented. Any text that appears between the <audio></audio> and <video></video> tags will be displayed on browsers that do not support these tags.
For example:
<!-- Notice the multiple <source> tags. The mp3 codec will be tried first. If that does not work then the ogg codec will be tried -->
<audio controls="controls">
<source src="boo.mp3" type="audio/mp3" />
<source src="boo.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
Here is an example of the <video> tag:
<!-- Similar to <audio>, you see the graceful fall-back from mp4 to ogg to webm -->
<video width="320" height="240" controls="controls">
<source src="jump.mp4" type="video/mp4" />
<source src="jump.ogg" type="video/ogg" />
<source src="jump.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Browser Support Issues
There are a few issues to keep in mind when writing HTML5:
- Old browsers don’t support it
- New browsers support only part of the HTML5 standard
- New browsers do not support the standards in the same way
Solution: Write JavaScript code to determine the supported capabilities of the browser accessing your site or use some of the free libraries on the Internet such as “Modernizr”
Want More HTML5?
To dive deeper into HTML5’s semantic elements, check out:
