Cool New HTML 5 Features and Advantages

HTML 5 was finally adopted and accepted as a standard by W3C in 2012. The new web programming language offers several tags that developers can take advantage of to produce high quality pages. HTML 5’s biggest advantages are the media-rich tags for animation, video and audio content. While older versions of HTML allowed developers to embed media, external applications were needed using the “object” tag to support the media. HTML 5 replaces this coding and allows programmers to more easily add media to web pages. HTML 5 was finally adopted and accepted as a standard by W3C in 2012. The new web programming language offers several tags that developers can take advantage of to produce high quality pages. HTML 5’s biggest advantages are the media-rich tags for animation, video and audio content. While older versions of HTML allowed developers to embed media, external applications were needed using the “object” tag to support the media. HTML 5 replaces this coding and allows programmers to more easily add media to web pages. The "video” Tag The adoption of the video tag has been slower than other tags, because a standard for video must be created. This means that developers must agree on the standard video formats the tag will support. To support video formats, the browser must have the right codec installed, which is an application that translates the video format to the viewer’s desktop operating system requirements. The video tag is inserted using the following code: The “src” property tells the browser where to find the movie, and the “poster” attribute displays a default image. The “controls” property displays browser controls for the viewer to fast-forward, rewind or pause the video. The web developer can also use JavaScript to customize video controls. The “audio” Tag The audio tag is mostly used to play sound in the browser, but W3C specifications also allow for speech-to-text input. For instance, Google implements the audio tag for its speech-to-text search text box on the search engine home page. Webmasters must use the Web Speech API to implement the functionality, but Google Chrome fully supports the new tag for both input and audio output. The audio tag is placed in HTML using the following syntax: Notice the “controls” property is used for audio and video. Again, these controls are rendered by the user’s browser, and they allow the user to fast-forward, pause and rewind the audio. The “src” points to the location of the audio file, and the “type” property tells the browser which audio codec to use. The “canvas” Tag The canvas tag is probably the coolest and most exciting new feature in HTML 5. The canvas tag lets the developer display animation, high-resolution images, 3-D shapes and interactive graphics. The canvas tag is widely known as the Adobe Flash replacement. Adobe Flash has been the choice for interactive animation, but it’s difficult to manage. Users must install an extra software component, and some malware writers focused on tricking users into installing malware based on Flash notifications. The user also needed to install updates to keep the version of Flash up-to-date. The canvas tag is more complicated than the previous two tags, but it replaces complicated Flash programming. The canvas tag uses raster-based graphics to display images. Raster-based graphics are images made up of a tiny grid of dots. When looking at these dots from a distance, they look like an evenly colored image. Looking closely at the image, you see different colored dots called pixels. High-resolution images have more dots per square inch. The canvas tag syntax looks like the following: The “id” property is used to control the canvas drawing and interface with the user. The width and height properties are the canvas dimensions set up in the browser. To draw on the canvas, you use JavaScript. The following example draws a rectangle on the screen using a white pen: var rectangleimage = document.getElementById(rectangleimage); var canvas = rectangleimage.getContext(’2d’); canvas.fillStyle = ‘white’; canvas.fillRect(20, 20, 65, 65); While these aren’t all of the new HTML 5 features, these are the coolest ones available and most widely used in new web development. These features make it easier to deliver video, audio and animation to the browser without much programming hassle. For media-rich content, developers can more easily use these tags to keep site code up-to-date and for faster website deployment.