The 1 Minute Primer for HTML 5

HTML 5 is getting a lot of press these days and I get a constant stream of questions from many non-techies, as well as developers, asking me to explain HTML5 in layman’s terms. So here it is.

HTML 5 is really a combination of three things: HTML, CSS and JavaScript. When all three of these technologies work together in a web browser then you have an HTML5 application. Period.

Why should we care about HTML 5? HMTL 5 brings many long awaited enhancements that make it easier for web developers to build more complex applications. More importantly, HTML 5 is being adopted by the major browser vendors: Google, Microsoft, Mozilla and Apple and this adoption is making it possible for developers to take advantage of the latest web technology that are built into web browsers.

How is HTML 5 “built into a web browser”? Web browsers have to interpret a web page first, and then display the content for you. Browsers contain logic that let’s them parse a pages’ code, and that code provides instructions for the browser to do certain things. Behind the scenes, in fact, the page you are looking at is built using code. It’s the browser that interprets the code and displays it in a way that makes sense to you. If you haven’t ever seen web page code then you can usually select View > Source on your browsers tool bar. Cool, right?!

HTML 5. HTML 5 is the latest version of the Hypertext Markup Language (HTML) specification which has been around in various forms since approximately 1991. HTML is a tag based language that defines the meaning and placement of elements of a web page. For example, a <button> tag defines a clickable button on a web page.

Cascading Style Sheets (CSS). Cascading Style Sheets, or more specifically CSS version 3 (a.k.a CSS3), provide the ability to apply styling to HTML elements. An example of styling would be to change the color of an HTML <button> from grey to green, as well as defining where on a web page it will be visible such as the top left corner.

JavaScript. JavaScript, which is really the meat behind HTML 5, is a type of programming language that lets developers implement actions within a web page. An example of an “action” would be when a web page visitor clicks a button that loads a picture. So, HTML defines the <button>, CSS styles the button, and JavaScript handles the action behind the scenes by retrieving the picture and then telling the browser how to display it for the end user.

This all sounds great, are there any downsides? Yes. First, HTML 5 is a standards-based specification that is still a work in progress. The specification and all its’ associated parts won’t be finalized for some time, possibly years. The good news is that browser vendors are keen to adopt this standard as much as possible. Second, implementation across different browsers isn’t 100% consistent. The good news is that there are tools and online resources to help developers work around many of these problems. Last, older versions of browsers (e.g. Internet Explorer 7 or 8, older versions of Safari, etc) don’t support HTML 5. There are strong campaigns under way to educate people to upgrade for security, performance and viewing experience.

So, there you have it. That’s a cursory pass at HTML 5 and I hope this post helps. I’ve added a few links at the bottom if you want to learn more about it.

Learn More:

 HTML5Rocks.com – includes information on features, tutorials and great slide decks.

w3Schools.com –  includes live “Try it” samples that let you explore the functionality.

W3C HTML 5 Specification –the World Wide Web Consortium is the group that writes the standards. If you are a techie, this is “the” specification that the browser vendors base their functionality on.

Top Five Resources for HTML5 Developers

Whether you are just learning about HTML5 or you’re cranking out code and don’t want to be slowed down, this is my 2012 short list of definitive HTML5, CSS3 and JavaScript resources that you need right now, at your fingertips, as you’re developing apps. I suggest bookmarking all of these web sites. If you use other sites that rock, please leave a comment with links below!

  1. Canisuse.com – This is an awesome comprehensive site where you simply type what feature you are looking for in the search box and the page will show a table outlining which browsers support that feature.
  2. HTML5Rocks.com – From interactive presentations and tutorials to code playgrounds, this site is a great place to learn more about HTML5.
  3. W3Schools.com – Excellent resource for beginners and experts. This site has embedded “Try it yourself” samples that you can modify on the fly. This site also includes a handy HTML5 tag reference
  4. CSS3.info – Previews, module status, articles…this site is a great resource for all things CSS3.
  5. W3C HTML4 vs HTML5 Comparison – this is the constantly updated, definitive source of what’s different between the two specifications.

And while not in my top five, I also have to give an honorable mention to Html5please.us and findmebyip.com. I’ve found that these sites are not as complete as caniuse in terms of the total number of features listed. But, I like them as a double check for browser support.

Holy Grail Resources:

W3C – W3C HTML 5 Specification – The World Wide Web Consortium is the group that writes the standards for HTML.

WHATWG.orgHTML Living Standard This is the technology working group that makes initial recommendations to the W3C.

[Updated broken links: Dec 6, 2016]

HTML 5 and Web Maps Seminar

@derekswingley and I are presenting several one hour Live Training Seminars on HTML5 and ArcGIS for developers on Thursday, February 23, 2012. ArcGIS is the flagship mapping and geo-spatial product line for the company I work for: Esri. Now, even if you aren’t currently using anything geo I still encourage you to listen in for an hour and hear what we have to say about HTML5 from a web app development perspective.

We’ve aimed the content at both new developers and experience developers that haven’t had a chance to play with HTML5 yet. Our goal is to help you understand what HTML5 really is and give some concrete uses cases and tips on how to effectively use it. So, sign on up, hopefully gain some new insight and ask some questions!

Click here to find out more details.