HTML5 Overview

Santiago Valle

Nov 09, 2011

HTML5 is close to be the new web standard. One advantage of HTML5 is that it doesn't need third-party plug-ins like flash to play a video, also it reduces development costs and easily recover from errors.

Some of the new features are audio, video, canvas, client-side data storage. It also introduces a wide range of form types, controls, validation, APIs, multimedia, structure, and semantics elements.

ADVANTAGES OF HTML5

Audio and Video Playback without any Plug-ins

With HTML5, you can stream audio and video with no need for a third-party plug-in such as Flash. You can create player controls that are fully programmable with JavaScript.

Code Maintenance

In HTML5 we have new structural elements instead of traditional div tags to create page template, the final result will be cleaner and more organized code.

Local Data Storage

HTML5 allows local data storage from the client side. The data can be accessed to support the web application and it can even be accessed when the client is disconnected for a short period of time.

There are; methodologies for storing data: session storage, local storage and database storage.

Reduces Development Costs

HTML5 introduces new elements and features that allow developers to improve interoperability, handling elements in a precise way saving time and costs.

Great for Mobile Devices

HTML5 could be the solution to faster applications that will be accessible universally across all mobile phones.

New Forms

New form types and elements will help you certify that the information entered online is completely accurate. There won’t be any need to run additional scripts for checking validation. This speeds up the loading time and the user experience will be enhanced.

HTML5 VIDEO BROWSER COMPATIBILITY

Most modern versions of web browsers support HTML5 video features. However, at the moment the main issue is the lack of agreement especially with video codecs and different type of formats.

The following table explains which formats are supported:

Source: 808.dk

You can also check which video formats are supported in different browsers.

Fallback if video is not supported

There are many things that you can do if your browser doesn’t support your current video format, here are some fallback options:

Place a Text or Html

<video src="video.mp4" poster="video.jpg" controls>
You browser does not support video feature
</video>
<video src="video.mp4" poster="video.jpg" controls>
<!— html code here-->
<img src="img/video_not_supported.png"/>
</video>

Provide Multiple Sources

You can have different types of video formats so if the browser doesn’t recognize the first source it will skip to the next one until it finds a source it can play.

<video poster="video.jpg" controls>
    <source src='video.webm' type='video/webm'>
    <source src='video.ogv' type='video/ogg'>
    <source src='video.mp4' type='video/mp4'>
    <p>This is fallback content</p>
</video>

Flash Fallback for Older Browsers

We can also embed a flash player inside de <video> element to bring support to older browsers.

<video controls poster="video.jpg" width="800" height="400">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <object type="application/x-shockwave-flash" data="flash_player.swf" width="800" height="400">
        <param name="allowfullscreen" value="true">
        <param name="allowscriptaccess" value="always">
        <param name="flashvars" value="file=video.mp4">
    </object>
</video>

Checking if your browser supports video element

If you need to check which HTML5 features are available to your browser including <video > element you can test it on this site.

STRUCTURE

HTML5 introduces a list of new elements to build a page structure. Old structures will be replaced with new elements, such as headers, footers, sections, articles, etc. The idea is to get rid of unnecessary div elements.

As you can see old div layout will be replaced with new tags, the final result will be a more organized and cleaner code.

The new markup will look like the following:

<body>
    <header>...</header>
    <nav>...</nav>
    <article>
      <section>
        ...
      </section>
    </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

HTML5 NEW ELEMENTS

The header tag represents the header of a section.

<header>
  <h1>HTML5</h1>
  <p class="byline">Author</p>
</header>
<header>
  <h1>Blog1</h1>
  <h2>Text.</h2>
</header>

The footer tag represents the footer section of the page.

The nav tag represents a section for navigation links.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

The aside tag is mostly used for sidebars.

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2011/09/">September 2011</a></li>
    <li><a href="/2011/08/">August 2011</a></li>
    <li><a href="/2011/07/">July 2011</a></li>
  </ul>
</aside>

The section tag is used to describe a section of a document or application.

<section>
  <h1>Tittle 1</h1>
  <p>paragraph content
     ...</p>
</section>

The article tag is used for content like news or blog articles.

<article id="comments">
  <header>
    <h4><a href="#comments" rel="bookmark">Comment</a>
        by <a href="http://oshyn.com/">Author Name</a></h4>
    <p><time datetime="20011-08-29T13:00Z">August 111th, 2011 at 13:00</time>
  </header>
  <p>Article content</p>
</article>

Some deprecated elements from HTML 4.01 have been dropped, including purely presentational elements such as <center>, whose effects are achieved using Cascading Style Sheets. There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior.

The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has, however, been designed to be backward compatible with common parsing of older versions of HTML. It comes with a new introductory line that looks like an SGML document type declaration, which enables standards-compliant rendering in all browsers that use “DOCTYPE sniffing”.