Getting Started with HTML5
Responsive design is built on top of the new technologies brought along with HTML5 and CSS3. Let’s look at the
changes brought about by HTML5 so we can better understand the code we are writing.
HTML5 is the draft specification for the newest version of the HTML language specification, which is agreed
upon by the World Wide Web Consortium (W3C). The HTML5 specification is part of a larger set of technologies
that the W3C terms the “open web platform,” which in a nutshell means it allows us to build web sites and web
applications that work anywhere. When people refer to the term HTML5, they are normally talking about the “open
web platform.”
There are lots of benefits of using HTML5 with your projects, which I’ll discuss now.
Accessibility
HTML5 makes it a lot simpler to make your site accessible. The new HTML5 semantic tags allow screen readers to
more easily identify types of content, and this allows them to provide a better experience for the user. Additionally,
HTML5 has support for ARIA (accessible rich Internet application) data roles, which allow you to assign roles to
sections of content. This can be especially useful where you are updating the content of the page using JavaScript, as
you can define ARIA roles that watch parts of the page for changes and notifies the user.
Video and Audio Support
HTML5 has native support for both video and audio codes. One of the key benefits of HTML5 video and HTML5
audio is that they deliver strong mobile device support as they work in the browser without any plug-ins like Adobe
Flash. One area that is currently being discussed is whether HTML5 should support digital rights management (DRM)
for content, and it is likely that DRM in some form will be added to the specification with the purpose of preventing
piracy of digital media like movies and music.
Smarter Storage
Prior to HTML5, the main way to store data on the client side was to use cookies; the disadvantage of this is that they
are sent to the server along with the HTTP request, even if they are not used by the server. HTML5 introduced DOM
(document object model) Storage, which includes localStorage (which is persistent) and sessionStorage (which is only
available for the duration of the session). The benefits of DOM Storage are the data remain client-side only, so they do
not affect the size of the HTTP request and it allows you to store a lot more data; currently DOM Storage allows you to
store 5MB of data per domain.
New Interactions
HTML5’s new JavaScript APIs enable you to add new and improved interactions. An example of this is new APIs such
as drag and drop, geolocation, and history. The aim of these new interactions is to enable you to build richer and
easier to use interfaces.
Canvas
HTML5 introduces the canvas element, which is the new HTML5 tag that can be used for drawing. It allows you to
build rich Internet applications similarly to how Adobe Flash had been used in the past.
Mobile
HTML5 introduces a lot of improvements for mobile, new APIs such as geolocation allow the site to determine
the location of the user and offer location-specific data. HTML5 features a viewport tag, which allows you to
define viewport widths and zoom settings. There are also device-specific tags that enable developers to interact
with browser-specific features, an example of which is, when using a meta tag, the developer can tell iOS that if
bookmarked on the home page, it should be opened as a full screen web application.
Comments
Post a Comment