Comic Director - Introduction to HTML5

HTML4 did many things to evolve web application development, and HTML5 continues that trend with some exciting new improvements.  Many people who use the term “HTML5” are often talking about the combined use of HTML, CSS3, and JavaScript to create interactive web pages and apps, like Comic Director, an app created for Intel that allows users to create, edit, and share comics.   

Figure 1: Comic Director

HTML5 is an important evolution in web technology. It helps to simplify coding for developers to create a consistent experience across computing devices.

So, how does HTML5 compare to HTML?

  • HTML5 has introduced many more intuitive tags like <nav> instead of <div> to simplify coding.
  • HTML5 apps take advantage of the amazing new features of CSS, such as text manipulation, shadows, and animations.
  • JavaScript APIs are now a fundamental part of the HTML5 specification, so that you can more easily create web applications that behave like native apps.

HTML5 is here to stay, modernizing web application development, enabling rich user experiences similar to native applications, and allowing you to create applications that work cross-platform.

Descriptive Language

The new elements and attributes in HTML5 are much more descriptive such as the <nav> tag, making it easier to sort through code.  Comparing code examples reveals how the <nav> tag has eliminated the need to use list tags to build navigation elements.

<div>
        <ul>
               <li>
                       <a>Home</a>
               </li>
               <li>
                       <a>About</a>
               </li>
               <li>
                       <a>Docs</a>
               </li>
               <li>
                       <a>API</a>
               </li>
               <li>
                       <a>Source</a>
               </li>
        </ul>
</div>

 

<nav>
        <a>Home</a>
        <a>About</a>
        <a>Docs</a>
        <a>API</a>
        <a>Source</a>
</nav>

 

Code that doesn’t use HTML5

Code use HTML5

Other tags that have been added or made clearer in HTML5 include:

<section>
<article>
<header>
<footer>
<time>
<mark>

These tags better describe the function of the tag, helping you improve the structure of your code.

Media

Incorporating things like audio, video, user inputs, and graphical elements are much easier with HTML5. Before HTML5, adding media was painful, since you had to rely on plugins such as Flash to play media. Thanks to HTML5, adding media is a breeze because the browser itself is handling everything instead of a plugin.

<embed></embed>
<video></video>
<audio></audio>
<source></source>
<track></track>
<canvas></canvas>

These tags allow you to easily add a customizable video player to an application or website.  Before, you had to either embed a non-streaming file that needed be downloaded entirely before playing, buy a third-party plugin which may or may not have worked in multiple browsers, or use a dedicated media server which was both complicated and costly.

/* Video */
<video controls autoplay preload loop allowFullScreen poster="videoframe.jpg">
        <source src="video.ogv">
        <source src="video.mp4">
        video not supported
</video>

Inputs

Elements where users can input information such as name or email are a huge part of the browser experience, and adding them to webpages and apps are much easier with HTML5 using the new input tag.  Not only does HTML5 expand the number of input types like sliders, dropdowns, and calendar inputs, but there are also tags that help improve the user experience by validating user input data in the browser before data is submitted to the server.

/* Form Input Types */
<input type="tel" />
<input type="file" />
<input type="search" />
<input type="url" />
<input type="email" />
<input type="datetime" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="number" />
<input type="range" />
<input type="color" />

APIs

While APIs have been used for web development purposes prior to HTML5, they are becoming much better documented this time around, and some great new ones have been added which are quickly becoming must-haves for web applications.

The HTML5 History API, for example, is a way to manipulate the browser history via script. HTML5 improves the application of this API by enabling a way to add entries to the browser history, and respond when those entries are removed from the stack by the user pressing the browser’s back button.

/* History API */
<script>
        window.history.back();
        window.history.forward();
        window.history.go(-1);
 
        window.history.pushState(
               {
                       key: value
               },
               'Title',
               'title.html'
        );
 
        window.onpopstate = function(e) {
               // event fires when pushState changes from forward or backward
        }
</script>

The Geolocation API, allows a web application or website to obtain a user’s geographical location associated with the hosting device. This lets you create really exciting applications that can provide users with information based on where they are, like restaurants within a 5-mile radius or an application that keeps track of how far the user has traveled.

/* Geolocation API */
<script>
 
        navigator.geolocation.getCurrentPosition(
               function(position) {
 
                       var latitude   = position.coords.latitude,
                               longitude      = position.coords.longitude,
                               altitude       = position.coords.altitude,
                               accuracy       = position.coords.accuracy,
                               heading        = position.coords.heading,
                               speed          = position.coords.speed,
                               timestamp      = position.timestamp;
 

HTML5 makes a world of difference. It enables you to:

  • Faster app development due to more descriptive language.
  • Improved CSS for more interesting and responsive user interfaces.
  • New APIs so you can easily add media content, and enable functionality similar to real native applications.

The following mobile apps make great use of the HTML5 specification, and are excellent examples of what is possible with HTML5, CSS, and JavaScript:

LinkedIn, Netflix, Wikipedia

Check out the Intel® HTML5 Playground’s code examples and the Intel® HTML5 Development Environment to get started.

Intel HTML5 Development Environment:

The Intel® XDK is an HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC platforms.

software.intel.com/html5tools

Intel HTML5 Playground:

The Intel HTML5 Playground provides you with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points.  Anything you that you create, can be shared using a permalink.

software.intel.com/appup/html5-playground

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.