HTML5 – Let’s Get Acquainted!

[Note: this article focuses on HTML5; if you are viewing this in an older browser that does not recognize HTML5, some samples and demonstrations may not work for you.]

HTML5 logo

According to famous and beloved web code standards site “w3cschools.com”, HTML5 is the new standard for HTML.

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

bowser icons: Internet Explorer, Firefox, Opera, Chrome, Safari

The new rules for HTML5 as cited on w3schools.com:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

– Information borrowed from w3schools.com

HTML5 – What Does It Bring?

Isn’t HTML4 good enough? Sure, HTML4 will get the job done, but it has some handicaps compared to markup written using HTML5 standards. Actions that previously had to be coded with more complex JavaScript or required more CSS classes are now made simpler by replacing commonly-used events and style demands with new elements and attributes. HTML5 introduces an array of exciting new features that present more opportunities for interactive and responsive web design. Finally, we can produce markup that is inherently semantic, further separating the appearance layer (CSS) from the presentation layer (HTML). This is no longer the exception for good web site structure, but the rule!

New Simplified Doctype

HTML5 introduces a new and much more simple doctype declaration:

‹!doctype html›

New Structural Elements

HTML5 allows for more semantic markup. Rather than using DIV tags for every element on a page to define the layout and relying on classes for the semantics, HTML5 introduces some new elements that are meant specifically for certain kinds of content. These elements will aid in creating better semantic markup, as well as improved SEO (search engine optimization).

‹header›
    ‹h1›New header element‹/h1›
    ‹nav›
        ‹ul›
            ‹li›Semantic Nav Item 1‹/li›
            ‹li›Semantic Nav Item 2‹/li›
            ‹li›Semantic Nav Item 3‹/li›
        ‹/ul›
    ‹/nav›
‹/header›

‹section›
    ‹p›A paragraph within a section element.‹/p›
‹/section›

‹footer›New footer element‹/footer›

– Find the full array of additional elements here: w3schools.com – HTML5 New Elements

New Form & Input Attributes

In the recent past, some controls on form inputs required JavaScript in order to achieve certain effects such as required field alerts, placeholder text within a field that would disappear once you began entering text, or setting a field to be disabled. Now, HTML5 allows us to easily add these attributes while also allowing us the ability to affect their appearance through CSS.

New Input Attributes Demo

There exists an array of additional attributes to control the input of fields to increase the rate of accuracy when users fill out your forms, and HTML5 makes it so much easier to implement these.

– Find the full array of additional input attributes here: w3schools.com – HTML5 New Form Attributes

Server-Sent Events

One Way Messaging that helps with things like Twitter updates and news feeds. Server-sent events don’t wait for a request for an event, they serve them up automatically whenever they are ready.

Mozilla Developer Network – Using server-sent events

Web Storage

For a long time, developers have been storing data locally, on the web site visitor’s hard drive, using cookies. But cookies have some limitations and security concerns. Also, users may opt to deny cookies to improve performance or heighten security. HTML5 brings us Web Storage – also called DOM Storage – a faster and more secure means of storing data. Instead of storing data with every server request, we can now store data only when it is asked for. This allows for larger amounts of data to be stored without impacting performance.

sixrevisions.com – Introduction to HTML5 Web Storage

HTML5ROCKS Tutorials – Faster Web Apps

Web Application Cache

Caches web applications so they still function even when not connected to the internet. An additional benefit: cached apps load and run faster!

DEV.OPERA – Running your web applications offline with HTML5 AppCache

msdn – Caching in the Distributed Environment

Web Workers

This one is a real gem to the user. Typically, when a script is executing on a web page, you can’t do anything else during this process. Web Workers allow the user to continue performing actions on the web page while the script is running in the background. The result is a more responsive and faster experience for the user. Not being forced to wait for scripts to finish means less punching of monitor screens. No more of those un-amusing “unresponsive script” announcements.

HTML5ROCKS – The Basics of Web Workers

HTML5 – Show Me What It Does!

Let’s take a look at some nifty examples of things that HTML5 can do well.

Drag and Drop

One of the new abilities that is supported by browsers across the board, drag and drop is commonly used and easy to implement. (Not to be confused with “dragon drop”, which is something you don’t want to be standing under.)

As we all know, the web is rife with cats. Here you see we have a cat that needs to be moved. Bad kitty! Stop playing with that expensive device!

Click and drag the cat to the second box.

w3schools.com – example (with code) of a basic drag and drop

Geolocation

This one is certainly familiar by now to all of us who use SmartPhones! Numerous SmartPhone apps use geolocation to offer geographically relevant information based on your geographic location. Geolocation uses JavaScript to determine the latitude and longitude of your location. Currently supported by most mobile devices and browsers.

Mobiletuts+ – HTML5 Apps: Positioning with Geolocation

TutorialsPoint – HTML5 Geolocation

Video and Audio

HTML5 offers a standard way to place video and audio files into a web page with handy and elements. Supporting browsers have built in controls.

Images, Audio & Video – A Beginner’s Guide to HTML5 by Shay Howe

Canvas

Canvas is an HTML5 element that is used in conjunction with JavaScript to draw graphics, such as graphs, photo compositions, or animation.

The Cloth Experiment

Z-Type – a really fun typing game that uses Canvas. Improve your typing skills or die trying.

An example of Canvas being used with GoogleMaps API to create custom overlays.

A collection of interesting experiments with HTML5 Canvas

SVG

SVG stands for Scalable Vector Graphics and is used together with JavaScript. It allows for the use of vector-based graphics on the web. This offers us some amazing control over graphical display of data and ways to create affects that can be rendered on photo images and video. It appears to offer a lot of what Flash allowed us to do, but without the plugins and at a much smaller file size.

A fine example of how using vector graphics, data can be represented in graphically appealing ways!

A collection of interesting uses of SVG

Differences Between SVG and Canvas

Basically, Canvas is great for graphic intensive games. SVG is not well suited for game applications, but is excellent for large rendering areas such as maps.
Information borrowed from w3schools.com

HTML5 In General

Examples of HTML5 used to create amazing interactive experiences.

“20 Things I Learned About Browsers and The Web” – by Google

A beautifully rendered and enjoyably educational storybook about the Web and how it works.

HTML5 – How Can I Get It?

It’s easy to start using HTML5, and using it will make your coding life easier while it improves the quality of your markup, speeds up your pages, and heightens interactivity.

I’ve been inspired by and referenced the following sites frequently for my own work and in the creating of this document. Good clear resources are a boon to learning to produce good clean quality up-to-date code.

Excellent HTML5 resources:

w3schools.com

An excellent reference for all the HTML5 elements and their attributes and the rules governing them.

A Practical Guide to HTML & CSS by Shay Howe

A fantastic site beautifully done, easy to use as quick lessons to brush up on modern HTML and CSS or learn a few new things. Howe talks about HTML and CSS together for a more organic learning experience.

HTML5ROCKS.com

A well-done site for tutorials, information and resources for the mobile, gaming and business developer.

SitePoint.com

A great reference for code, ideas, learning and examples in HTML5, CSS and more.

StackOverflow.com

A terrific site for finding solutions to problems with HTML5, JavaScript, CSS and more. High quality community problem solving.

A Severely Summarized Summary

HTML5 is heavily focused on improved user experience, improved page speed and responsiveness, and more semantic markup.

^ Back to Top

The following two tabs change content below.

april.johnston

Graphic/Web Designer at WolfNet
Graphic/Web Designer

Latest posts by april.johnston (see all)

Comments are closed.