HTML5

From New Media Business Blog

Jump to: navigation, search
HTML 5
HTML 5 is the newest version of Hyper Text Markup Language (HTML) which is currently under development. Development of this version started in 2004, and although it is partially available in many popular web browsers, full completion and adoption is not expected until 2022.(1) This new web standard will change how web content is created, displayed and accessed with new functions and features that will replace the need for several third party browser plug-ins such as Adobe Flash and Microsoft Silverlight.   Apple and Google are currently the biggest developers of the HTML 5 specification.






Contents

Hyper Text Markup Language (HTML)

HTML is the language for web browsers to display content. The language uses tags to format text, create hyperlinks to other places, and insert graphic images. A simple explanation of how it works is web browsers interprets HTML into displayable content for users in the form of a web page. Other factors involved with a user’s web experience include tools and languages such as JavaScript, CSS, and Adobe Flash.

Rough Timeline for HTML

   * HTML was first developed by Tim Berners-Lee in 1989 and was completed in 1991 as HTML Tags (1.0)
   * HTML 2.0 was published in 1995 by the Internet Engineering Task Force (IETF)
   * HTML 3.0 was also published in 1995 but was not official until it was published by the World Wide Consortium (W3C) in early 
1997 as HTML 3.2 * HTML 4.0 was published later in the year of 1997 and has been the predominant standard for HTML for the past 13 years. o Note (only major versions have been listed as there were iterative sub-versions as well)

HTML 5 Media Attention

When our group presented HTML 5 for BUS466 during week 5 of the 2010 summer semester, there was recent buzz regarding topics in popular technology media. HTML 5’s biggest actors, Apple and Google, were making a splash.

Apple’s CEO, Steven Jobs, had written a long public letter on his personal and company stance against the use of Adobe Flash on Apple devices such as the iPhone and iPad while promoting HTML 5. Additionally, Apple released the controversial Safari-only HTML 5 showcase at about the same time as the release of the iPad.

Google’s Ian Hickson has had a large role in the development of HTML 5 as the head developer of the new specification. Google recently hosted their Google I/O conference, an annual web-developer focused conference, where they had several key note speakers discussing HTML 5. (Conference videos are available here: http://code.google.com/events/io/2010/.) Additionally, Google also has a website, Chrome Experiments, which showcases various HTML 5 and JavaScript experimental developments that have been completed or are in progress. http://www.chromeexperiments.com/

HTML 5 Markup

HTML 5’s doctype (document type) has been revised to allow for a simpler, standard based web page. In switching to the updated doctype, any of the current browsers are able to recognize the doctype and convert the existing content into a more compliant mode even without the use of other HTML 5 tags. (2)

HTML 4.0 Strict, Transitional, and Frameset:

   * <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   * <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
   * <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

New doctype to HTML 5

   * <!DOCTYPE html>

Notable New Elements

HTML 5 has introduced several new elements to improve the element structure of web pages. The proposed and drafted elements are a work still in progress and may be revised to improve the functionality of page structuring. Below you will find a table of the element name, an example of the code, description and a demonstration link:

HTML Tag (and element name) Example Code Description Demo Link
<article> (article tag) <article> <h4>Headline</h4> <p>Text<p> </article> The article tag encloses a separate section such as part of a blog, forum post, article, or comment. http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_article
<audio> (audio tag) <audio src="/music/siren.wav"> </audio> The audio tag enables to use of native audio playback within a browser. http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio
<canvas> <canvas id="myCanvas" width="300" height="200"> The canvas element allows for a dynamic rendering of 2D elements. http://9elements.com/io/projects/html5/canvas/
<datalist> <datalist id="characters"> <option value="Homer Simpson"> <option value="Bart"> <option value="Fred Flinstone"> </datalist> When used for a list, the datalist enables the user a predefined list of options to select from. http://www.quackit.com/html_5/tags/html_datalist_tag.cfm
<embed></embed> <embed type="video/quicktime" src="/web_design/paris_vegas.mov" width="340" height="140" /> The embed tag allows a browser plug-in to be supported by the web browser. http://www.w3schools.com/html5/tag_embed.asp
<footer> and <header> <footer> © 2010 Microsoft </footer> The header can contain version history while the footer may contain copyright information and author information. Header

Footer

<section> <section> <h4>What We Do</h4> <p>We protect sharks.</p> </section> The section represents a standard section divider within a document. http://www.w3schools.com/html5/tag_section.asp
<video> <video src="movie.ogg" controls="controls"> your browser does not support the video tag </video> The video tag makes it possible to embed video clips in web pages much like how the image (<img></img>)) tag works for images. http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video

Removed Elements

In transitioning from HTML 4 to HTML 5, certain elements have been removed that will not be supported in this version. The decision to remove these tags was made in large part due to the use of CSS (and its improvements) and the unneeded intended use of several other tags. The following is a list (not all inclusive) of deletions in the new version:

  • <center>: previously used to centre text; can be handled by CSS
  • <font>: previously used to define font size, colour, and type; can be handled by CSS
  • <frame> and <frameset>: previously used to outline in window; removed because of its negative impact of web page usability
  • <strike>: previously used to strike through text; can be handled by CSS
  • <u>: previously used to underline text; can be handled by CSS

Search Engine Optimization 1 Optimization in HTML 5

In using HTML 5, the elements of the updated version will help search engines dissect the page structure within a web page. In doing so, page segmentation will help divide a standard page into various parts (header, footer, relevant sections, etc.) and identify the separate sections to search entries; this will help to improve the understanding of the layout of each page. (4) By segmenting a page, search engines will be able to understand where the main content is located instead of searching the entirety of each page for a relevant match. With the increased adoption of HTML 5 elements such as <div> and <span> tags, there will be an increase in the quality, relevancy and accuracy of searches – all of which have a significant impact on matching relevant searches to quality web pages.

Key Features

Geolocation

Geolocation is being developed by W3C with the promise to become the standard for detecting user physical location through computer and mobile devices. It captures the geographical location of users by sending out sets of parameters that bounces through IP address, MAC address, Wi-Fi connections, GPS coordinates and RFID. Then based on these parameters it can find the a user’s location.

The Geolocation is accessible only if its Application Programming Interface (API) is supported by user’s web browsers (Mozilla Firefox 3.5+, Google Chrome, Safari, and Opera ), or web sites that have Google Gears. The API is also available on mobile devices such as iPhone, Android, and Blackberry. Furthermore, geolocation has a security protocol that prompts users for permission before use. This behaviour protects the users’ location from being broadcasted to those with other intents.

Canvas

The canvas element was originally developed by Apple for its Operating System Mac OS and later integrated into Safari. It provides the ability for users to interact and manipulate with 2D and 3D graphics on the web through the mix of graphics and string of codes. The element is implemented on a web page by first specifying the height and width attribute. The common uses for Canvas are to create graphs, videos, games, and other images.

Canvas has often been compared to Scalable Vector Graphics (SVG) which has a long history beginning in early 2000s. SVG remembers all the shapes and stores them as a object inside a scene graph. In turn, these scene graph are converted into bit map giving SVG the information to re-render the scene. Unlike SVG, Canvas does not have the scene graph feature and once a graphic is created it is immediately forgotten. Thus, Canvas requires recreating layers of graphics to achieve SVG results. This differences makes Canvas suitable in areas such as in a graphic intensive game that continually requires redrawn images, and unsuitable in areas that needs to re-render images such as a map viewer. (6)

Web Storage

Web Storage was created by W3C for the use of HTML 5 as Offline Storage but gained tremendous popularity that made it a specification outside of HTML 5 as well. The API stores web browsers data through local and session storage that differs in their duration. A local storage database stores data of each domain persistently even after the web browser is turned off or disconnected from the internet. Session storage stores the data of a page as a different window that separates itself from one another. This enables the function of “tab” on our web browsers that is difficult to accomplish with HTTP cookie.

The web storage also differs from the traditional cookie in the sense that data is stored exclusively on the client side of the machine, rather than on both server and client sided. Thus, a web site cannot write data directly onto your machine and your data is not transmitted with every HTTP request. (7)

Web Worker

The web worker feature is still relatively new as it started in April 2009, and is being edited by Ian Hickson of Google. This API runs scripts in the background of the computer that is separate from the web browsers. This in turn makes web workers extremely useful at crunching long scripts and updating the web page without being interrupted by users’ interactions. Furthermore, web workers are also users to retrieve server information and updates it into the client side database or web storage. We can also have multiple web workers on the same task when delegations of tasks are necessary and there are sufficient resources on the client’s machine.(8)

Reasons for Change

Driving Factors

The key driving force behind HTML 5.0 is the ability to work independently minimizing the requirement of plug-ins for web browsers. This sort of easy access notion is supported by major corporations like Apple and Google. Apple has been pushing HTML 5 with its development of Apple devices like iPad and iPhones, where neither devices support Adobe Flash. Steve Jobs, claims HTML 5 is superior than Flash in terms of speed, performance, security and developer freedom. Jobs went as far as addressing all the details in a letter to the public why Flash would not be available on the iPhone and iPad OS platforms.

Google, on the other hand, introduced HTML 5 in Google I/O 2009. Googlers explained the key features and their functionality behind every new function. Demonstrations are shown as well to illustrate the real usage of each function. The key to mainstream HTML 5, which Google pointed out, is adoption of the new standard by developers. If developers are on board with Google and create killer apps, HTML 5 will be more widely used by end users.

HTML 5 vs. Flash

HTML 5 is a comprehensive web experience compared to Flash which is more narrow in focus with video and interactive functions. Many of HTML 5’s new elements like the <video> tag are quite intuitive and makes it easier for the end-users without the requirement of additional plug-ins like Flash. Steve Jobs’ letter explained some of Flash's flaws. Jobs criticized Adobe business model and monopoly over Flash. Adobe can control features of Flash software and pricing and thus giving developers less freedom. HTML 5 does not require expensive development software, as developers would only need a notepad. Jobs also mentioned security issues and performance issues with the use of Flash.

When comparing HTML 5 and Flash on a Windows platform, Flash is noticeably faster and less CPU processing intensive. However, on Apple’s Mac OS, the opposite is true where Flash is noticeably slower. The reason behind such paradox is hardware acceleration. Hardware acceleration is the process of using GPU and RAM to reduce the CPU load on a particular application.

On a Mac OS, hardware acceleration is not possible as the GPU on a Mac uses OpenCL rather than regular graphic card drivers. This limits the computer performance. Hindering the CPU memory usage and making the computer run much slower in comparison to a Windows PC. Therefore, this is one of the reasons why Apple is against Adobe, as Flash is not optimized on Mac computers.

On a mobile device, HTML 5 seems ideal for users because of the limited space and speed. HTML 5 can eliminate previously required plug-ins and app downloads; instead, the users can use the web browser as the home for all applications. There are already countless applications on the web, such as Google Docs. If developers continue to push forward with more creative applications, HTML 5 will take off and become the mainstream option for all mobile platforms. However, on a PC platform with hardware acceleration, it is still debatable which side will come up on top.

HTML 5 Barriers and Difficulties

Although there are many benefits of moving towards HTML 5, there are still currently several issues with the new standard. The issues are timeliness, cross-browser interoperability, and end-user perception.

The main editor for HTML 5, Ian Hickson, has stated in a proposed timeline that HTML 5 will not be fully complete until 2022 (#). A date which is almost 12 years away. Such a slow implementation will certainly hinder how this new standard will be adopted by developers and browsers. Despite the long completion date of HTML 5, many functions are currently available on various browsers; however, many of the aforementioned functions are still in early draft which are highly subject to change. This leads to various versions of HTML 5 functions and issues with cross-browser interoperability.

An example of cross-browser interoperability is Apple’s HTML 5 showcase where Safari is required to view all the demos and other browsers, even those which are HTML 5 enabled are not able to view the demos. One of the eventual goals for HTML 5 is to have one standard across all browsers, instead of several versions of the same standard which are not quite compatible with each other. This creates challenges for today’s developers as they need to know which browser to support and end-users need to have an arsenal of web browser applications to view various kinds of HTML 5 content.

Finally, HTML 5 could be the greatest breakthrough in web development but it would mean very little if the end-users do not adopt it. The end-users include web developers who would be creating web content with HTML 5 and the web surfers who actually view the content. Adoption must occur for both types of users.

Criticisms of HTML 5

Apple recently released an HTML 5 showcase to demonstrate some HTML 5 examples. However, the showcase required the use of Apple's Safari browser. Without Safari the user unable to access the content even though several of the examples would have been compatible on alternative browsers such as Firefox. Therefore, this lead to some criticism on how HTML 5 is open.

Steve Job’s personal letter against Flash is subjective in Apple’s point of view. Many developers are against HTML 5 because it changes industry standards and requires end-users to adopt the new standards via browser updates. Currently over 30% of web surfers still utilize browsers that are not HTML 5 enabled.#. Additionally, existing Flash developers may need to switch from developing to Flash to HTML 5. Such transitions can be difficult and may hurt web development companies in the process.

Predicted Outcome

Acceptance Rate

The world is moving towards HTML 5....

All major browsers are planning to support HTML 5 in future updates. This includes, Internet Explore, Opera, Firefox, Safari and Google Chrome. However, currently, Safari, Firefox and Google Chrome supports HTML 5 extensively with almost all the features.

Internet Browsers Client Release Geolocation Canvas Web Storage Web Worker
Google Chrome V. 4.0.249.89(38071) PARTIAL YES YES YES
Mozilla Firefox V. 3.6.8 YES YES YES PARTIAL
Safari V. 4.0 (530.17) PARTIAL YES YES YES
Opera V. 10.10 PARTIAL YES YES PARTIAL
Internet Explorer V. 8.0.7600.16385 NO NO NO NO

Note: The above were tested under http://spoon.net/browsers/


Conclusion

In this Wiki entry for HTML 5, we have attempted to cover various aspects of HTML 5 from technical changes, end-user requirements, and implementation challenges. We are confident that HTML 5 will be the future of HTML as it currently being pushed by corporate interests for various reasons. Some of such reasons would include the creation of a richer and more intuitive markup language, reduced dependency on third party plug-ins, increased efficiency for mobile OS, and cross-browser interoperability.

The exact future of HTML 5 is unclear and there remains a long period of time before it is fully complete. Some parties have been pushing HTML 5 as a complete substitute for Adobe Flash, however, that HTML 5 has a long way to go before it can even catch up to Adobe Flash in terms of functionality and interactiveness and Adobe continues to refine its product and has community of loyal web developers and surfers. We believe HTML 5 will become a web standard which complements and supports existing standards, functions, and plug-ins while creating paths for new innovations in web development.

External Links

The following demonstrations are only available for browsers which are HTML 5 enabled such as newer versions of Chrome, Firefox, Safari, & Opera.

Demonstrations

Canvas:
Canvas example
Beautifully "animated" art created by HTML 5's Canvas Element





Geolocation:
Geolocation Demo
See if Google can find your location. A popup menu will be prompted when you click onto the link. Press the “Allow” button to start the feature.






Web Storage:
Web Storage Example
Plan your schedules for the next few weeks. Exit your browsers or turn off your internet connections and see whether your schedules are still there.




Web Worker:
worker demo
Warning: non-worker demo
The power of web worker - utilizing background resources instead of just browser resources. WARNING! Selecting and running the non-worker example may freeze your browser



Relevant Links

Interested in more? Explore the potential of HTML 5

Chrome Experiments: http://www.chromeexperiments.com/
Contributions of Applications, Games, Videos of Canvas function from various developers.

Apple Showcase: http://www.apple.com/html5/
Apple personal showcase of Video, Typography, VR, Transitions and more through HTML5

Youtube in HTML5: http://www.youtube.com/html5
Watch Youtube in HTML5 by first participating in the trial

Google I.O Demos: http://htmlfive.appspot.com/
See the demonstrations used by google for their 2009 I.O

amoebaOS: http://amoebaos.org/gallery/
The future of Operating System? Take a glimpse of amoebaOS and participate in the beta for creating a Web OS that uses HTML 5.

References

1. HTML 5 Completion Date
2. HTML 5 Doctype
3. HTML 5 Tags
4. HTML 5 SEO
5. Geolocation Specification
6. Canvas 2D API Specification 1.0
7. Web Storage Editor's Draft 27 July 2010
8. Web Workers Editor's Draft 29 July 2010
9. W3C Browser Statistics
10. Steve Jobs' "Thoughts on Flash"
11. Apple's HTML 5 Showcase
12. HTML Browser Support
13. Google I/O 2009
14. Google I/O 2010
15. HTML 5 vs Flash: Performance
16. W3C Browser Statistics
17. Ian Hickson Interview
18. Criticism of Apple’s HTML 5 Showcase

Personal tools