A Look at HTML 5

A new logo has been revealed for HTML5, which means developers can now proudly wear the latest web standard on their sleeve (literally – you can buy the t-shirt).

But what does HTML5 really mean for you and your website?

Read on to learn about HTML’s history and how HTML5 is changing the future of web development.

---

A brief history

HTML, short for HyperText Markup Language, is the primary code that runs under a website’s hood. There are other web languages out there – CGI, PHP, Javascript, ASP – but HTML acts as a universal foundation for how a website looks and behaves.

Unlike technologies such as Adobe Flash, HTML is not owned by any company. It is managed by the World Wide Web Consortium (W3C) , an international standards organization. The W3C publishes a list of “recommendations,” and it is up to the individual web browser companies (think Microsoft, Apple, and Mozilla) to implement these guidelines.

HTML was made publically available in 1991 by physicist Tim Berners-Lee, standardized in 1995, and adopted by the W3C in 1997. HTML5 has been in development since 2008 and began gaining notoriety when Apple’s iPad was announced to use HTML5 over Flash for delivering rich media.

The browser wars

Back in the early days of the web, HTML was intended to be a fairly straightforward markup language. Working with HTML would be akin to how most people format a document in a word processor – some headings, body copy, and maybe an image or two. But, in the late 90’s, a few creative web designers (most notably, David Siegal) started pushing the boundaries of HTML, using it in unexpected ways. They inserted sliced images into tables to create elaborate layouts, mixed font and background colors… a whole new visual age of the web had begun.

And that’s where things got complicated.

The web browsers at the time (primarily Microsoft Internet Explorer and Netscape Navigator) had differing levels of support for the HTML specifications. For example, one browser displayed background images on table cells, while another could only show solid colors. The browsers disagreed on how font sizes were determined, or how whitespace was calculated. And every so often, one browser would develop its own pseudo-HTML code, bypassing the W3C’s recommendations entirely in a bid for market share.

It was a struggle for web designers to design a site that looked identical in all browsers. It was not uncommon for a designer to abandon a browser entirely and declare their website only viewable on one platform. As an analogy, imagine only being able to watch the local news on a TV set made by Sony.

A focus on standards

These days, it’s unwise to alienate users simply because their browser platform is more difficult to design for. Browser compatibility is still a major issue for web designers these days, but the battle has become easier as Microsoft and the other browser companies have stepped up their commitment to standards.

HTML5 is the W3C’s acknowledgment that HTML needed to be freshened up. The web has become less like reading a word-processor document and more like using the word-processor application itself. Interactivity and media on the web have become commonplace and require a richer code base.

While the designers of the past shoehorned old code to do new and exciting things, such workarounds were an impediment for consistent standards. So, HTML5 has been reworked to give designers new tools, such as “header”, “footer,” and “navigation” tags.

In addition to new layout options, HTML5 also allows for native support for functionality that previously had to be done via 3^rd party plug-ins or other coding languages. For example:

• The ability to draw vector shapes.
• Embedding of video and audio content.
• Validation of form fields, such as zipcodes and dates.
• Displaying text using downloadable fonts (no more having to stick mainly to Arial, Verdana, and Times New Roman).

What this means for your website

HTML5 was created to tighten up standards and create less dependency on 3^rd party plugins for common tasks. This frees up developers to innovate and create web designs that are compatible across a variety of platforms, including mobile devices.

Unfortunately, it will take some years for all the web browsers (including browsers used on tablets and smart phones) to fully support HTML5. But that doesn’t mean you can’t begin using some of HTML5’s new features:

iPad & other mobile devices

Currently, HTML5 looks to be the development language of choice for iPad-optimized websites. Safari, iPad’s native web browser, already has support for HTML5 embedded video, audio, and vector drawings. This opens the door for a variety of applications and rich media independent of Adobe Flash.

Other mobile devices, such as android phones, similarly have very controlled browsing environments, where HTML5 will be adopted sooner than later.

If your website or web-application is targeted to mobile devices, it’s a no-brainer to begin adopting HTML5. Online media juggernaut YouTube has already added HTML5 to its repertoire, as have many other high-profile websites.

Modern Browsers

If your website does not need to support browsers older than Internet Explorer 8 (released in 2009), there are a variety of HTML5 features you can make use of:

• Custom fonts
• Local file storage
• Drag and drop
• Vector drawings

While there may be some visual inconsistencies across platforms, HTML5 offers quick, plugin-free options for making your website stand out. In an effort to promote the practice, Google provides a growing library of webfonts, free of charge, for web designers.

Looking towards the future

Web developers who begin experimenting with HTML5 now will be best prepared when the various browsers begin supporting additional functionality such as form validation, geo-location, and advanced special effects (like 3D transformations).

With the growing popularity of tablets and mobile devices, there’s no reason not to begin dabbling in HTML5 for your own projects. In the following weeks, we’ll look at some of the exciting new HTML5 features that your website can begin using now.

Appleton Creative is an Orlando advertising agency that offers in-house branding, print, video, and web design services. If you are interested in learning more about HTML5 and other web technologies for your next online project, email us or call 407-246-0092.

Tags: web design, web, web development, HTML, HTML5, print, video, branding

---