Webmaster tips » HTML

Oct 18, 2010
Anadi Taylor

New Elements in HTML 5

Average rating:
  • 5 out of 5 Stars
Rate this article

Web pages and their design are laid out using HTML. HTML stands for Hyper Text Mark-up Language. HTML is comprised of 'tags' or elements that tell your browser what the different areas of your webpage are. You can use these elements to define paragraph areas, images and their dimensions and also font sizes, colors and styles etc. There are many HTML elements and a lot of these have varying attributes like width, height, name, etc. This article will not focus on specific HTML elements; our aim is to give you a brief overview of HTML before moving on to how it has developed into HTML 5.

HTML came to life at the end of 1990. The original HTML, developed by Sir Tim Berners-Lee, comprised of about 20 elements which were strongly influenced by SGML, Standard Generalized Mark-up Language (The only exception to this was the hyperlink tag that allows links to be placed in web pages).

As the internet became more widespread, users demanded more functionality. This meant a huge development in browser technology and also in HTML. In fact, HTML was developed to version 4.01 before evolving into XHTML which incorporates HTML 4.01 and XML (Extensible Mark-up Language).

With HTML 5 a lot more emphasis has been put on the use of 'Cascading style sheets'. This means HTML programmers can no longer depend on using 'tags' like <font> to style text with color, size, and font type. This now has to be done using 'Cascading style sheets' or CSS. The use of CSS means, for example, the text style on a website can be updated or changed with one small change in the CSS rather than having to update or change every <font> tag on every page. In fact, the <font> and <center> tags have been completely dropped.

A lot more importance has been placed on the use of 'JavaScript' and other client side programming languages that run in the visitor's browser. This style of creating website pages is now highly encouraged. This is known as DOM scripting or 'Document Object Model' scripting. The DOM or 'Document Object Model' is a representation of how your browser structures the page you are looking at. In the browser everything is seen as an object that can be manipulated in some way by a client side scripting language such as JavaScript. A simple example of this is to have a background image with a ball moving over the top of it. In the DOM these are known as layers.

HTML 5 also introduces various new elements such as <nav>, used to define navigation areas and <footer>, used to define an area at the bottom of a page that will be used as a footer. This article will focus more on the multimedia elements <audio> and <video>.

The HTML 5 <audio> and <video> elements are a fantastic way of standardizing audio and video over the internet. This has been a long time coming. With so many operating systems being used to browse the internet it can be hard to decide what format to use. If we encode a video as a Windows Media File (WMV) it will not play on a Mac unless that user downloads a certain player or plug-in. The same can be said for encoding a video as a QuickTime file. It will play on a Mac but not on a Windows operating system unless a player is downloaded. And now we have so many variations of Linux operating systems being used, choosing an audio or video format that will play on all visitors' computers is a next to impossible task.

The <audio> and <video> elements in HTML 5 will make choosing multimedia formats a lot easier. We will probably use the OGG format for audio as it is completely open source and patent-free. This format is very similar to MP3, AAC, and VQF. We will probably use the H.264 format for video. This format has already been adopted by Adobe and so can be used in Flash based players. An example of this is YouTube.com. They can now offer HD video online because they have used the H.264 standard. What is interesting about this is that visitors using Windows, Mac, Unix and Linux can view YouTube.com videos without having to download a new player. All that is needed is the Flash plug-in, which is on most internet browsing computers. With the HTML 5 <video> tag we will no longer have to depend on Adobe Flash Media player to play H.264 video as a cross platform solution.

So, how will HTML 5 effect video streaming over the internet? It will make video streaming over the internet much easier as the <video> element takes away the need to know high level scripting languages such as JavaScript and Action Script 3, it will not be platform dependent and website publishers will be able to relax knowing their video content will be viewable to all their visitors.

Print! Print this article   Bookmark:

About The Author
For online Flash Video Streaming Solutions please visit http://www.iMediaLibrary.com - Our solution allows you to manage your video content, publish it to the web, add and track banner ad's, synchronize images with your video, and charge visitors to see your content on a Pay Per View basis.
Rate This Article
How would you rate the quality of this content? Currently rated: 5 out of 5 stars. 1 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other HTML Articles
Rating: 3.3 stars
3 Principles of HTML Code Optimization by George Peirson (May 5, 2008)
Just like spring cleaning a house, the html code of your web pages should get periodic cleaning as well. Over time, as changes and updates are made to a web page, the code can become littered with unnecessary clutter, slowing down page load times and hurting the efficiency of your web page...
Rating: 3.5 stars
The Myth of W3C Compliance? by Sasch Mayer (Jul 30, 2007)
The past few years have seen a huge increase in the number of search engine optimisers preaching about the vital importance of W3C Compliance as part of any effective web promotion effort. But is compliant code really the 'Magic SEO Potion' so many promoters make it out to be?...
Rating: 2 stars
XHTML (eXtended Hypertext Markup Language): An Overview by Phillip Kimpo Jr. (Jul 24, 2006)
Many Web pages today are poorly written. Syntactically incorrect HTML code may work in most browsers even if it does not follow HTML rules. Browsers employ heuristics to deal with these flawed Web pages; however, Web-enabled wireless devices (such as PDAs) cannot accommodate these hefty Web browsers...
Rating: 3.8 stars
Interactive Forms with HTML and Javascript by Brian Zimmer (Jul 2, 2006)
Forms are easy enough to create when they are simple, like search boxes. But what if you need them to be complex? How about changing the forms based on input by the viewer? This is where interactive forms using Javascript and HTML can help...
Rating: 3.2 stars
Writing Semantic HTML by Jesse Skinner (May 2, 2006)
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything. Why would you want to do this? Depending on the tag, the content in the tag can be interpreted in a certain way...