The basics you need to know about HTML5

[[206162]]

HTML5 is the fifth and current version of HTML, a markup language used to structure and present content on the World Wide Web. This article will help readers understand it.

HTML5 was developed through a collaboration between W3C and the Web Hypertext Application Technology Working Group. It is a higher version of HTML with many new elements that can make your pages more semantic and dynamic. It was developed to provide a better Web experience for everyone. HTML5 provides many features to make the Web more dynamic and interactive.

The new features of HTML5 are:

• New tags, such as <header> and <section>
• The <canvas> element for 2D drawing
• Local Storage
• New form controls such as calendar, date, and time
• New media features
• Location

HTML5 is not an official standard yet, so not all browsers support it or some of its features. One of the most important reasons behind the development of HTML5 is to prevent users from downloading and installing multiple plugins like Silverlight and Flash.

New Tags and Elements

• Semantic elements: Figure 1 shows some useful semantic elements.
• Form elements: The form elements in HTML5 are shown in Figure 2.
• Graphic elements: Graphic elements in HTML5 are shown in Figure 3.
• Media elements: The new media elements in HTML5 are shown in Figure 4.

Figure 1: Semantic elements

Figure 2: Form elements

Figure 3: Graphical elements

Figure 4: Media elements

Advanced Features of HTML5

Location

This is an HTML5 API that is used to obtain the geographic location of a website user, who must first allow the website to obtain his or her location. This is usually done via a button and/or browser pop-up. All latest versions of Chrome, Firefox, IE, Safari, and Opera can use HTML5 geolocation capabilities.

Some uses of geolocation are:

• Public Transport Website
• Taxi and other transportation websites
• Calculating Shipping Rates for E-Commerce Sites
• Travel agency website
• Real estate website
• Cinema websites for movies playing near you
• Online Games
• Home page provides local headlines and weather
• Job postings can automatically calculate commute times

How it works: Geolocation works by scanning common sources of location information, including the following:

• The Global Positioning System (GPS) is the most accurate
• Network signature - IP address, RFID, Wi-Fi and Bluetooth MAC address
• GSM/CDMA Cellular ID
• User Input

The API provides very convenient functions to detect geolocation support in the browser:

 if (navigator.geolocation) {
 // do stuff
 }

The getCurrentPosition API is the primary method for working with geolocation. It retrieves the current geolocation of the user's device. The location is described as a set of geographic coordinates along with a heading and speed. The location information is returned as a Location object.

The syntax is:

 getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation: defines the callback method for retrieving location information.
• ErrorHandler (optional): defines a callback method that is called when an error occurs while processing an asynchronous call.
• options (optional): Defines a set of options for retrieving location information.

There are two ways we can provide location information to users: geodetic and civil.

1. The geodetic way of describing location refers directly to latitude and longitude.
2. Civilian representations of location information are human-readable and easily understood.

As shown in Table 1 below, each attribute/parameter has both geodetic and civil representations.

Figure 5 contains the set of properties returned by a location object.

Figure 5: Location object properties

Network storage

In HTML, in order to store user data locally, we need to use JavaScript cookies. To avoid this, HTML5 has introduced Web Storage, which is used by websites to store user data locally.

Compared with cookies, the advantages of Web Storage are:

• More secure
• Faster
• Storing more data
• The stored data is not sent with every server request. It is only included when requested. This is a big advantage of HTML5 Web Storage over Cookies.

There are two types of Web Storage objects:

1. Local - Stores data without an expiration date.
2. Session - Stores data for one session only.

How it works: The localStorage and sessionStorage objects create a key=value pair. For example: key="Name", value="Palak".

These are stored as strings, but can be converted if necessary using JavaScript functions such as parseInt() and parseFloat().

Given below is the syntax for using Web Storage object:

• To store a value:
  • localStorage.setItem("key1", "value1");
  • localStorage["key1"] = "value1";
• Get a value:
  • alert(localStorage.getItem("key1"));
  • alert(localStorage["key1"]);
• Delete a value: -removeItem("key1");
• Delete all values:
  • localStorage.clear();

Application Cache (AppCache)

Using HTML5 AppCache, we can make our web applications work offline without an Internet connection. All browsers except IE can use AppCache (as of this time).

The advantages of application caching are:

• Web browsing can be done offline
• Faster page loading
• Less server load

A cache manifest is a simple text file that lists the resources that the browser should cache for offline access. The manifest attribute can be included in the HTML <head> tag of a document, like this:

 <html manifest= "test.appcache" >
 ...
 </html>

It should be on all pages you want to cache.

Cached application pages remain in place unless:

1. User clears them
2. The manifest was modified
3. Cache Updates

video

Before HTML5 was released, there was no unified standard to display videos on web pages. Most videos were displayed through different plug-ins such as Flash. But HTML5 specifies a standard way to display videos on web pages using the video element.

Currently, the video element supports three video formats, as shown in Table 2.

The following example shows the use of the video element:

 <!DOCTYPE HTML>
 <html>
 <body>
 <video src= " vdeo.ogg" width= "320" height= "240" controls= "controls" >
 This browser does not support the video element.
 </video>
 </body>
 </html>

The examples use an Ogg file and should work in Firefox, Opera, and Chrome. To make the video work in Safari and future versions of Chrome, we have to add an MPEG4 and WebM file.

The video element allows multiple source elements. The source elements can link to different video files. The browser will use the first recognized format, as shown below:

 <video width= "320" height= "240" controls= "controls" >
 <source src= "vdeo.ogg" type= "video/ogg" />
 <source src= " vdeo.mp4" type= "video/mp4" />
 <source src= " vdeo.webm" type= "video/webm" />
 This browser does not support the video element.
 </video>

Figure 6: Canvas output

Audio

For audio, the situation is similar to video. Before the release of HTML5, there was no unified standard for playing audio on a web page. Most audio was also played through different plug-ins such as Flash. But HTML5 specifies a standard way to play audio on a web page by using the audio element. The audio element is used to play sound files and audio streams.

Currently, the HTML5 audio element supports three audio formats, as shown in Table 3.

The audio element is used as follows:

 <!DOCTYPE HTML>
 <html>
 <body>
 <audio src= "song.ogg" controls= "controls" >
 This browser does not support the audio element.
 </video>
 </body>
 </html>

This example uses an Ogg file and should work in Firefox, Opera, and Chrome. To make the audio work in future versions of Safari and Chrome, we must add an MP3 and Wav file.

The audio element allows multiple source elements, which can link to different audio files. The browser will use the first recognized format, as shown below:

 <audio controls= "controls" >
 <source src= "song.ogg" type= "audio/ogg" />
 <source src= "song.mp3" type= "audio/mpeg" />
 This browser does not support the audio element.
 </audio>

Canvas

To create graphics on a web page, HTML5 uses the canvas API. We can draw anything with it, and it uses JavaScript. It improves website performance by avoiding downloading images from the network. Using canvas, we can draw shapes and lines, arcs and text, gradients and patterns. Moreover, canvas allows us to manipulate pixels in images and even in videos. You can add the canvas element to an HTML page as follows:

 <canvas id= "myCanvas" width= "200" height= "100" ></canvas>

The canvas element does not have the functionality to draw elements. We can achieve drawing by using JavaScript. All drawing should be done in JavaScript.

 <script type= "text/javascript" >
 var c=document.getElementById( "myCanvas" );
 var cxt = c.getContext( "2d" );
 cxt.fillStyle = "blue" ;
 cxt.storkeStyle = "red" ;
 cxt.fillRect(10,10,100,100);
 cxt.storkeRect(10,10,100,100);
 </script>

The output of the above script is shown in Figure 6.

You can draw many objects like arcs, circles, lines/vertical gradients etc.

HTML5 Tools

To operate effectively, all skilled or amateur web developers/designers should use HTML5 tools, which are very helpful when it comes to setting up workflows/websites or performing repetitive tasks. They improve the usability of web design.

Here are some essential tools to help create an awesome website.

• HTML5 Maker: Used to interact with website content with the help of HTML, JavaScript and CSS. Very easy to use. It also allows us to develop slideshows, sliders, HTML5 animations, etc.
• Liveweave: Used to test your code. It reduces the time spent saving your code and loading it on the screen. Just paste the code in the editor and you get the result. It is very easy to use and provides auto-completion for some codes, which makes development and testing faster and easier.
• Font dragr: Preview custom web fonts in your browser. It will load the font directly so you can see if it looks right. It also provides a drag-and-drop interface that allows you to drag glyphs, web open fonts, and vector graphics to test them right away.
• HTML5 Please: A place to find anything related to HTML5. If you want to know how to use any feature, you can search in HTML Please. It provides a list of useful resources for supported browsers and devices, syntax, and general advice on how to use elements.
• Modernizr: This is an open source tool for providing the best experience to your visitor's browser. Using this tool, you can detect whether the visitor's browser supports HTML5 features and load the corresponding scripts.
• Adobe Edge Animate: This is a useful tool for HTML5 developers who have to deal with interactive HTML animations. It is used in the field of digital publishing, web, and advertising. This tool allows users to create flawless animations that can run across multiple devices.
• Video.js: This is a JavaScript based HTML5 video player. If you want to add videos to your website, you should use this tool. It makes the video look nice and part of the website.
• The W3 Validator: The W3 validator tool tests the validity of website markup in HTML, XHTML, SMIL, MathML, etc. To test the markup validity of any website, you have to select the document type as HTML5 and enter the URL of your web page. After doing this, your code will be checked and all errors and warnings will be provided.
• HTML5 Reset: This tool allows developers to rewrite the code of old websites in HTML5. You can use these tools to provide a good web experience for your website visitors.