Like HowStuffWorks on Facebook!

How HTML5 Works


Media Elements and the Flash Rivalry

One of the most talked-about features of HTML5 is its new approach to embedding media on a Web page. We'll take a look at some amazing applications of this HTML5 feature later in this article. HTML5 accomplishes this embedding without requiring an external browser plugin. The following are the media elements available in HTML5:

  • audio -- embeds audio in the page and includes attributes for specifying how to play it; supported file formats will vary between Web browsers
  • video -- embeds video in the page and includes attributes for specifying how to play it; supported file formats will vary between Web browsers
  • source -- used with audio or video elements to identify a source; multiple sources could be specified for a single item
  • embed -- embeds and specifies the media type for content that might lack support within other media elements
  • canvas -- sets aside part of the page, or the computer screen, where JavaScript can draw images; coming up, we'll find out more about how this important new feature works
  • svg -- embed vector graphics encoded with SVG markup language, allowing them to be scaled dynamically to the area of the page in which they're loaded without losing any graphic quality

As HTML5 developed, market experts questioned whether it would replace Flash, which is currently controlled by Adobe. Flash is a media player that you can add as a plugin to your Web browser. Because Flash has all the features necessary for a site to embed different types of media, sites like YouTube have depended on it for years. There are even some Web applications that rely entirely on Flash to power their interactive interfaces. Flash adoption was so widespread in 2007 that, upon the release of the much anticipated Apple iPhone, many consumers were upset to hear that its operating system, Apple iOS, didn't support Flash.

When Google, arguably the biggest brand on the Internet, dove head-first into developing its apps with HTML5, Flash supporters took notice. Before HTML5, the only threat to Flash's dominance was Web application developers willing to build and maintain custom HTML/JavaScript alternatives. With HTML5, such cumbersome customizations are no longer necessary when creating an interactive media experience to rival Flash technology.

So, who will win: Flash or HTML5? The short answer is, "Neither." Each technology has its own features, advantages and drawbacks. In addition, Adobe and Google have worked on Flash to HTML5 conversion tools. At the time of this writing, it seems that though HTML5 is gaining status, Flash is likely to retain its own popularity for a while, too.

Flash over to the next page where we'll break down the canvas element and how to use it in your HTML5 Web pages.


More to Explore