HTML 5 explained by Jeff Thomason, CE
SkyFitsJeff(SM) = Art + Technology

HTML 5 explained
by Jeff Thomason

Originally published June 14-16, 2010 on in three parts

If you’ve been following the news, you’re probably aware of the arguments between Apple and Adobe about Flash vs. HTML 5. And you may have been asking yourself, “What is HTML 5?”

The Basics

When Apple or another company talks about HTML 5, they’re actually talking about a collection of technologies — HTML, CSS, and Javascript — that use to be called DHTML then AJAX that the World Wide Web is built on. They are open sourced and can be written using a simple writing application like notepad. They are used together to create modern websites.

HTML stands for Hypertext Markup Language. It consists of a set of tags that create paragraphs, headings, links, lists, images, forms, etc. Think of it as the structure or the skeleton of the website.

CSS stands for Cascading Style Sheets. It is a set of rules that determine what a website looks like such as fonts, colors, spacing, alignment, borders, etc. Think of it as the paint and decorations of a site.

Javascript is a scripting language that allows dynamic content, meaning it allows a website to change on the fly such as changing images when you rollover them, showing date and time, validate whether forms are correctly filled in, storing items in a shopping cart, or displaying your name. Think of it as the electricity and motors of a site.

There are other technologies that make a website work, but these are the basics.

What does this mean for Southeast Idaho?

Because HTML 4.1 has been around for so long, it is fully supported by almost every browser that has been released in the last 10 years. Most people in Southeast Idaho have purchased a computer since then, so they can visit and use most sites. It also means that anyone can create their own website with nothing more than Notepad or a similar text editor. Fancy software exists that makes it easier, but it isn’t required.

Tomorrow I’ll cover the differences of HTML 5, as well as the advantages and disadvantages of HTML 5 vs. Flash.

How is HTML 5 different than HTML 4?

HTML 5 adds several new tags and attributes that allow a website to display video, drag elements around with the mouse, require certain fields in forms to be filled in, and much more that currently require many lines of code. Several new rules have been added to CSS to allow more animation.

HTML 5 makes it possible to create actual applications such as a paint program or a game as a website without another program running on top. This will allow websites to become even more complex and more functional and replace several desktop applications with online versions. Visit the Apple website for demos.

What are the advantages/disadvantages of HTML 5 vs. Flash?

HTML 5 is open source, which means anyone with a writing program (such as Notepad) can create a website with it. Flash is proprietary, which means you have to buy a $1000+ program from Adobe.

HTML 5 is new and unfinished, meaning it has limited browser support. Flash has been around for over a decade and runs on most desktops and laptops. Most Internet video is coded in Flash, and would have to be recoded to work in HTML 5, which would be a huge expense.

HTML 5 can run on mobile browsers on smart phones. Flash cannot and probably never will.

What does this mean for Southeast Idaho?

If websites do make the move to HTML 5, you will have to download a new browser. Browsers are free to download, so it won’t be a problem to do so. Right now Safari offers the best support, though other browsers have been building in partial support for years, so your current browser will probably support some level of HTML 5.

HTML 5 will also make it easier for residents of Southeast Idaho to create more dynamic and more functional sites without learning lots of difficult code.

Tomorrow I’ll cover some of the specific new tags that HTML 5 adds and the advantages/disadvantages of each.

The first part of this series discussed the basics of HTML and web programming. The second compared HTML 5 to other technologies. Today, we’ll examine some of the cool new tags added. Each has a demo, but you will need the latest version of Safari to use all of the functionality, although other browsers will support some of it.

What are some of the new tags in HTML 5?

Canvas – The canvas tag offers a drawing surface anywhere on the webpage that supports images, vectors, arcs, fills, strokes, radial fills, gradients, alpha blending and more. It is currently supported in the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera, but not Internet Explorer. To see what is possible with this new element, visit

Audio & Video – These tags make it possible to add audio and video with a single line of code. It also makes it simple to autobuffer, autoplay, show controls, and more. The main problem is support. Each browser that supports the video tag does so with a different video codec because of licensing. H264 is an excellent codex with wide support (many computers have hardware built in to decode it) but it requires a licensing fee which is an obstacle for “open source”. To view demos (and see if your browser supports these tags), visit the Apple site at or .

There are over a dozen other new tags and attributes, but these three are the most visually exciting. To see more demos, visit .

What does this mean for Southeast Idaho?

This means you will be able to do much more on the web and need fewer programs on your computer. It also means you can make your personal blogs and websites much more exciting. And if you are currently using Firefox, Safari, Chrome, or Opera, you probably won’t even have to update your browser (sorry Internet Explorer).