HTML 5

Top 50 HTML 5 Interview Questions And Answers

Question 1: What is HTML5?

Answer

HTML5 is the latest version of HTML and XHTML with new features like Drawing, Animation, Video and Audio etc. It is used to solve some common structural problems encountered with HTML 4.1. It gives more flexibility to both the web developers, the web designers and enables more exciting and interactive websites in addition to more powerful and efficient applications. The HTML 5 <! doctype html> is recognized by all modern browsers.

HTML5 brings a whole new dimension to the web world. It can embed video on the web-pages without using any special software like Flash. HTML5 is developed in such a way that the developers are not required to waste their time and efforts in creating an error free web page. Firefox, Chrome, Opera, Safari and Internet Explorer all support <! doctype html>.

Why do we use HTML5?

The main benefit of HTML5 is that it supports Drawing, Animation, Video and Audio.

The web developers can decrease the complexity and the time to create applications with animations, play music (audio and video), high quality drawings and other rich content using HTML 5 because it can embed video on the web-pages without using any special software like Flash.

HTML5 is far easier for the web designers and the web developers as it tells them how a web page is structured.

use HTML5

For more details, visit following link:

Question 2: What are HTML5 Graphics?

Answer

In HTML5, there are the following two types of graphics:

  • Scalable Vector Graphics (SVG)

SVG provides a big benefit; basically people are now using high-resolution devices (iPads and Monitors) so it becomes impressive as designs, logos and charts can scale accordingly. The HTML tag <svg> is a container for SVG graphics. SVG is used for drawing paths, circle, boxes, text and graphic images.

  • Canvas
A canvas is a rectangular area on HTML page for drawing graphics on the fly via JavaScript. The default size of the canvas is 300 px × 150 px (width × height). The HTML tag <canvas> is a container for Canvas graphics.

Where to use Canvas and SVG

Canvas is procedural whereas SVG is declarative. Some reasons to consider SVG instead of canvas are:
  • SVG is scalable, provides the facility of auto scaling icon, logo and chart.
  • SVG is not supported by the languages whereas canvas elements are manipulated using client-side JavaScript.
  • DOM handling. It's easy to attach event handlers and manipulate elements like you would for another HTML block. To move an item, you simply change its coordinates but this is not true for a Canvas.

For more details, visit following link:

Question 3: What is DataList Tag in HTML?

Answer

A <datalist> tag can be used to create a simple auto-complete feature for a webpage.<datalist> is a newly defined HTML tag that comes with the HTML 5 specification. By using this <datalist> tag, we can define a list of data and then we can bind it with an <input> tag.

A <datalist> tag specifies a list of predefined options for an <input> element. After binding it, the user will see a drop down list in which all the predefined options will be there for the input. When the user types a character or a string, the user will automatically get the data which depends on the input string or a character.

The main feature of this <datalist> tag is to auto-complete the <input> element.

Example

Suppose we have a TextBox for the country.

  1. <input type="text" list="countries" name="country" />   
Complete Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <body>  
  5.     Please Select Country: <input type="text" list="countries" name="country" />  
  6.     <datalist id="countries">   
  7.         <option value="India">India</option>   
  8.         <option value="United States"></option>   
  9.         <option value="United Kingdom"></option>   
  10.         <option value="China"></option>   
  11.         <option value="Nepal"></option>   
  12.         <option value="Afghanistan"></option>   
  13.         <option value="Iceland"></option>   
  14.         <option value="Indonesia"></option>   
  15.         <option value="Iraq"></option>   
  16.         <option value="Ireland"></option>   
  17.         <option value="Israel"></option>   
  18.         <option value="Italy"></option>   
  19.         <option value="Swaziland"></option>   
  20.     </datalist>  
  21. </body>  
  22.   
  23. </html>  
For more details, visit following link: 

Question 4: Describe Form Input Types in HTML5?

Answer

HTML5 is the new standard for HTML that has 13 new input types for forms. Using these new input types, we can create more interactive and easy-to-use web forms. It also provides better data validation, input control, color picker controls and many others.

The new input types are:

  • Time
  • Date
  • Datetime
  • Datetime-local
  • Week
  • Month
  • Email
  • Color
  • Number
  • Range
  • Search
  • Telephone
  • URL

Input Type Range

An input type range is used for input fields that should contain a value from a range of numbers which is done by declaring a minimum and a maximum value. You can also set restrictions on which numbers are required to be accepted.

  1. <input type="range" name="age" min="18" max="35" />  
Type Range

Input Type URL

A type URL is used for the input fields that should contain a URL address. The value of the URL field is automatically validated when the form is submitted.
  1. <input type="url" name="mainpage" />  
Type url
Input Type email

The email type is used for the input fields that should contain an Email address and automatically validates it when submitted.
  1. <input type="email" name="emailid" />  
Type email

Input Type Tel

Input Type Tel defines a field to enter a telephone number and automatically validates when the form is submitted.
  1. <input type="tel" name="usrtel" />  
For more details, visit following link: 

Question 5: What is the use of Drag and Drop in HTML5?

Answer

Drag and drop is a very common feature and convenient to users. Simply, you need to grab an object and put it at the place you want. This feature is commonly used by many of the online examination websites wherein you have the options to pick up the correct answer, drag it to the answers place holder and drop it.

The Drag and Drop API comes with seven new events to track a drag and drop. The events are dragstart, drag, dragend, dragenter, dragleave, dragover and drop that are triggered during the various stages of the drag and drop operation. These events are listed below:

events

For more details, visit following link:

Question 6: What is HTML 5 Web Storage?

Answer

HTML5 Web Storage, also known as DOM Storage is a way to preserve state on either the client or server which makes it much easier to work against the stateless nature of HTTP.

Advantages of HTML5 Web Storage:

  1. It can store 5 to 10 MB data. That is far more than what cookies have.
  2. Web storage data is never transferred with HTTP request, so it increases the performance of the application.

Web Storage Strengths and Weaknesses

Strengths

  • Apps can work both online and offline.
  • API is easy to learn and use.
  • Has the ability to hook in to the browser events such as offline, online and storage change.
  • Has less overhead than cookies; no extra header data is sent with the browser requests.
  • Provides more space than what cookies offer so increasingly complex information can be kept.

Weaknesses

  • Data is stored as a simple string; manipulation is needed to store objects of different types such as Booleans, Objects, Ints and Floats.
  • It has a default 5MB limit; more storage can be allowed by the user, if required.
  • It can be disabled by the user or systems administrator.
  • Storage can be slow with the complex sets of data.

HTML5 Web Storage Methods

  • setItem(key,value): Adds a key/value pair to the sessionStorage object.
  • getItem(key): Retrieves the value for a given key.
  • clear(): Removes all key/value pairs for the sessionStorage object.
  • removeItem(key): Removes a key/value pair from the sessionStorage object.
  • key(n): Retrieves the value for a key.

Getting a Value

There are two methods to retrieve a key/value pair as well:

  1. sessionStorage.getItem('someKey');   
  2. //returns 'someValue'  
  3. sessionStorage.someKey;   
  4. //returns 'someValue'  
For more details, visit following link: 

Question 7: What are the types of Web Storage in HTML5?

Answer

There are two types of Web Storage,

  1. Session Storage
  2. Local Storage

As its name implies, it stores data of current session only which means the data stored in session storage clears when the browser is closed. To access session storage in JavaScript, the following methods are available.

  1. To store data in session storage, setItem () function is used.
    1. sessionStorage.setItem (‘key’,’value’);  
    Example:
    1. sessionStorage.setItem (‘username’,’ABC’);  
    We can only store strings in Session Storage. To save the objects in session, first convert the object into JSON string and then store this string in Session Sorage as in the following,
    1. sessionStorage.setItem (‘object’, JSON.stringify(object));  
  2. To retrieve the data from Session Storage getItem() function is used.
    1. sessionStorage.getItem(‘key’);  
    Example:
    1. var username= sessionStorage.getItem(‘username’);  
    If JSON string is stored in Session Storage then you can convert it into object as below.
    1. var object=JSON.parse(sessionStorage.getItem(‘object’));  
  3. To delete a particular key from Session Storage, removeItem function is used.
    1. sessionStorage.removeItem(‘key’);  
    Example:
    1. sessionStorage.removeItem(‘username’);  
  4. To delete all the keys from Session Storage, clear function is used as shown below
    1. sessionStorage.clear();  
    To get all KEY/VALUE pairs from Session Storage, you can loop through Session Storage like the following.
    1. for (var i = 0; i < sessionStorage.length; i++)   
    2. {   
    3.    var key = sessionStorage.key(i);   
    4.    var value = sessionStorage.getItem(key);   
    5. }  

Local Storage

Local Storage is a second type of HTML Web Storage. Like Session Storage, it also stores data in KEY / VALUE pair of strings. The following points helps to compare Session Storage and Local Storage.

  1. Session Storage stores the data for only current session of the browser, when the browser closes data in, Session Storage clears. On the other hand, the data stored in Local Storage is not deleted automatically when the current browser window is closed. Data in Local Storage clears only when it is manually deleted.

  2. The data in Session Storage is accessible only in current window of the browser but the data in the Local Storage can be shared between multiple windows of the browser.

    Session Storage
                                        Figure:     Session Storage

    Local Storage
                                           Figure:     Local Storage

The following functions are used to access Local Storage in JavaScript:

  1. To store data in Local Storage, setItem() function is used.
    1. localStorage.setItem (‘key’,’value’);   
    Example:
    1. localStorage.setItem (‘username’,’ABC’);  

We can only store strings in Local Storage. To save objects in Local Storage, first convert the object into JSON string and then store this string in Local Storage as shown below:

  1. localStorage.setItem (‘object’, JSON.stringify(object));   
To retrieve the data from Local Storage, getItem() function is used.
  1. localStorage.getItem(‘key’);  
Example:
  1. var username= localStorage.getItem(‘username’);   
For more details, visit following link: 

Question 8: What is Audio Tag in HTML 5?

Answer

This new element allows you to deliver audio files directly through the browser, without the need for any plug-ins. The Audio tag is a new tag introduced in HTML5. You can use it to play audio sound like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are compatible for the browsers. A WAV file is a common sound format that is supported by most browser versions.

Syntax

<audio src="URL" controls> </audio>

Syntax for more than one audio format

<audio controls="controls" >
<source src="URL1" type="audio/mp3" />
<source src="URL2" type="audio/wma" />
<source src="URL3" type="audio/x-wav" />
</audio>

New Element Specific Attributes
autobuffer This Boolean attribute indicates whether or not the browser should begin buffering audio right away.
autoplay This is Boolean attribute indicate whether or not the file should start playing audio as soon as it can.
loop This Boolean attribute indicates whether or not apply repetition on playing audio.
src This attribute is used to specify the URL (location of the audio file) of the audio to show.
controls This Boolean attribute specify whether or not the browser should display audio controls (such as play/pause, volume and seek).

HTML5 Event Attributess
onabort onblur oncanplay oncanplaythrough
onchange onclick oncontextmenu ondblclick
ondrag ondragend ondragenter ondragleave
ondragover ondragstart ondrop ondurationchange
onemptied onended onerror onfocus
onformchange onforminput oninput oninvalid
onkeydown onkeypress onkeyup onload
onloadeddata onloadedmetadata onloadstart onmousedown
onmousemove onmouseout onmouseover onmouseup
onmousewheel onpause onplay onplaying
onprogress onratechange onreadystatechange onscroll
onseeked onseeking onselect onshow
onstalled onsubmit onsuspend ontimeupdate
onvolumechange onwaiting   

For more details, visit following link:

Question 9: What is a Video Tag in HTML 5?

Answer

One of the exciting features of HTML5 is <video>tag.Video Tag was introduced in HTML5. Video tag is used to add video or media files in the HTML document. It is not present in HTML 4.01. Before this, it was not possible to show a video/movie on the Web Page.For example, you can embed music video or a movie on your web page for the visitor to listen and watch it.

HTML5 video tag accepts the attribute that specifies how the video should be played. You can write content in <video> tag. as <video> tag always occur in pair. Any content between opening and closing tag is "fallback content". This content is displayed only by those browsers that does not support video tag. Now, most of the video files are shown by plug-in.

Syntax

Syntax of <video>tag in HTML5:

<video src="URL"></video>

OR

<video>
<source src="URL">
<source src="URL">
</video>

Attributes of the <video> tag

Attribute Value Description
autoplay autoplay Video will start playing automatically.
autobuffer autobuffer Video will start buffering automatically.
loop loop Video automatically start over again when done.
controls controls In order to show the controls.
poster URL of the image URL(address) of the image.
src URL Address of the video.
width pixel Defining the width of the video.
height pixel Defining the height of the video.

For more details, visit following link:

Question 10: What are the media elements in HTML 5?

Answer

The following are the 5 most popular media elements.

Audio

  • Audio element is used to define or create a music element in your simple HTML page.
  • It supports all the browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari.
  • This tag defines music or any other audio stream formats.

Video

The Video element creates a video element in your HTML page. It supports all the browsers like Internet Explorer 9.0 and above, Chrome, Opera, Firefox and Safari. This tag defines music or any other video stream formats.

Track

This element is useful in both the previous elements  i.e AUDIO and VIDEO. This element helps to define tracks or we can say simple sectors for the <audio> and <video> elements.

Source

Like the track element, the Source element must be used in <audio> and <video> elements to do the control property and structure of the tracks.

Embed

It is also called a container because as the name suggests, it is used for defining the containers for the external applications or we can say plug-ins for the Applications.

For more details, visit following link:

Question 11: What is the use of Canvas element in HTML5?

Answer

The canvas element is used to draw graphics by making use of JavaScript. It is defined with the <canvas> tag. We write the following code.

This tag is nothing but a container for graphics. We need to use a script to provide the structure or shapes of the graphics.

  • We can have multiple Canvas elements in one HTML page.
  • The real power of the Canvas element is the scripting for which use JavaScript.
  • For the complete functionality of the HTML5 Canvas tag, we require an API which is made by writing JavaScript code that provides access to Canvas element functionality.

HTML5 Canvas | Methods

There are several methods for various functionalities like drawing shapes, adding images, graphics and so on in a Canvas element.

HTML5 Canvas

What are the features of HTML5 Canvas? 

  • Flexibility
  • Interactivity
  • Multimedia Options
  • Animation
  • Platform Support
  • Free and Accessible Dev Tools
  • Code Once, Run Everywhere

For more details, visit following link:

Question 12: What is the use of Fieldset tag in HTML5?

Answer

The <fieldset> tag groups related form elements. It is like a box. In other words, it draws a box around related elements.

It must start with a <legend>tag because the <legend> tag defines the title of the field set.

By using the <fieldset>tag and the <legend> tag, you can make your form much easier to understand for the users.

Syntax

The syntax of the <fieldset> tag in HTML5 is:

<fieldset>Controls</fieldset>

Browser Support

The <Fieldset> tag is supported by all major browsers.

Attributes of <fieldset> tag

HTML5 has added some new attributes; they are:

Attribute Value Description
disabled disabled Specify fieldset will be displayed or not
name text Specify name of field set
form name of form Define it is related to the form

Example: In this example, we create a fieldset in a form. We used the <legend> tag to define the caption for the <fieldset> element.

Code:

  1. <html>  
  2.   
  3. <body>  
  4.     <form>  
  5.         <fieldset>  
  6.             <legend>Personal Information</legend>  
  7.             First Name: <input type="text" />  
  8.             <br/><br/> Last Name: <input type="text" />  
  9.             <br/><br/> p_Address: <input type="text" />  
  10.         </fieldset>  
  11.     </form>  
  12. </body>  
  13.   
  14. </html>  
For more details, visit following link: 

Question 13: What are the HTML tags which deprecate in HTML5?

Answer

One of the main points on which HTML5 wins over XHTML2.0 is “backward compatibility”. XHTML2.0 sought to enforce well-written code by using very harsh error handling. If a page returns error based on syntax, the user agent will stop parsing the code.

An HTML5 specification states that certain HTML tags should not be used but it is only a guideline to the HTML authors. The implementations, however, must support these tags to be backward compatible.

The tags that are deprecated are the following:

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <s>
  • <strike>
  • <tt>
  • <u>
  • <frame>
  • <frameset>
  • <noframe>
  • <acronym>
  • <applet>
  • <isindex>
  • <dir>

Several tag attributes are also removed. Few of the most notable ones are:

Element Attribute removed
a,link rev, charset
img longdesc, name
html version
th abbr
td scope
all block level elements align
body background
img hspace, vspace
table, tr, th, td bgcolor
table border, cell padding, cell spacing
td, th height, width
table valign

For more details, visit following link:

Question 14: What are the new APIs provided by the HTML 5 standard?

Answer

HTML5 APIs

After HTML's evolution, later on in 1998 parts of the API for HTML developed by the browser vendors and release named DOM Level 1 followed by DOM Level 2 Core, DOM Level 2 HTML and finally DOM Level 3.

Note: One thing you need to ensure is that HTML is not only used to write code as tags and angle brackets. The HTML5 specification also defines how JavaScript is interacting with those angle brackets using the Document Object Model (DOM). There is a DOM API for each corresponding tag.

Web browsers, or you can say HTML user agents, parse your written markup into a DOM tree that represents the specific document in memory and each DOM tree contains several kinds of nodes, in particular a DOCTYPE node, elements etc.

Let's use an example of HTML markup snippet and understand the DOM concept.

HTML markup snippet

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Your Page Title</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>Text</h1>  
  10.     <p>Text</p>  
  11.     <!-- Comment -->  
  12. </body>  
  13.   
  14. </html>  
DOM tree of HTML markup snippet

DOM tree

In HTML5 you can use many APIs. Some of them are: 
  • Web Workers API
  • Server-sent Events API
  • WebSocket API
  • Cross-document Messaging API
  • Drawing
  • Audio/Video
  • Drag and drop
  • Autofocus
  • Editable
  • Client-side storage
  • Geolocation

For more details, visit following link:

Question 15: What is Application Cache in HTML5?

Answer

Yet HTML5 has many new special elements and attributes but one of the best feature of HTML5 is "Application Cache", that enables us to make a offline session of a web application. It allows to fetch few or all the content of a website such as HTML files, Images, JavaScript, CSS ...etc. This features speeds up the site performance. This is achieved with the help of a file, defined as follows:

  1. <! doctype html>  
  2. <html manifest="example.appcache">  
  3.    ....  
  4.    ....  
  5.    .....  
  6. </html>  
For more details, visit following link: 

Question 16: What is a meter tag? What is the difference between progress tag and a meter tag?

Answer

The meter tag is used to represent a scalar measurement within a known range. The value can be fractional.

Examples

Disk uses, the relevance of a query result, the fraction of a voting population to have selected a specific candidate.

Difference between progress tag and meter tag

A progress tag represents the completion progress of a task whereas the meter tag is used to represent gauges. We can think that a progress tag represents a dynamic data whereas a meter tag represents a static data.

Note:

  1. According to the W3C, the meter tag should not be used to indicate progress as to indicate the progress, we have the progress tag.

  2. The meter tag also does not represent a scalar value of an arbitrary range; for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.

Syntax

The Meter tag is an inline element, the same as a header, progress and so on.

<meter></meter>

Attributes

The meter tag has 6 more attributes as shown in the following table:

Attribute Value Description
Min Floating Point Number Specifies the lower bound, Default value is 0.0
Max Floating Point Number Specifies the upper bound, Default value is 1.0
Low Floating Point Number This represents the upper bound of the low end
High Floating Point Number This represents the lower bound of the high end
Value Floating Point Number Specifies the current value
Optimum Floating Point Number Specifies that what measurements value is the best value

For more details, visit following link

Question 17: What is the use of Scalable Vector Graphics (SVG) in HTML5?

Answer

Scalable Vector Graphics (SVG) are the part of the vector-based family of graphics. There are various forms of Raster-based graphics available that stores the color definition for each pixel in an array of data. Some of the most common Raster-based formats used on the web today are JPEG (Joint Photographic Experts Group), GIF (Graphics Interchanged Format) and PNG (Portable Network Graphics). SVG is a language for to describe 2D vector graphics in XML.

Basics of SVG

Creation of an SVG image is a very different process. To create any other Raster images like JPEG, PNG or GIF, we use image editing software like Photoshop and so on but SVG images are XML based file so they can be created in any other text editor. There is a tool also available (inkspace). By using this tool, you can draw and create SVG images very conveniently.

Basic Shapes Created by SVG

You can use SVG XML tag to create shapes.

Element Description
line Creates Simple line
circle Creates Circle
rect Creates Rectangle
ellipse Creates Ellipse
polygon Creates Polygon
polyline Creates Multiline Shape
path Creates Arbitrary Path
text Allows to Creates Text

For more details, visit following link

Question 18: Why do we need HTML 5 Server-Sent Events?

Answer

Server-Sent Events (SSE) is a recent HTML5 specification in combination with the EventSource API designed for streaming updates. Prior to that, you might be familiar with the bidirectional communication channel, known as WebSockets, used very much and tons of server implementations are available on the internet. However, the second server-push technology of HTML5 yet stays in the shadows.

To enable efficient server-to-client streaming of event data as it is basically text-based. For example: real-time notifications or updates, like Facebook, Twitter, stock exchange updates and and so on are generated on the server. Basically, we have the following two types of components that SSE introduces:

  • EventSource Interface
  • Event Stream

The EventSource Interface allows the client to receive push notifications from the server as DOM events and the "Event Stream" data format is used to deliver the individual updates.

SSE flow chart

In the following figure, you will see how SSE works after the client/server is connected.

SSE

For more details, visit following link:

Question 19: What is the use of cite tag in HTML5?

Answer

The <cite> tag indicates a citation. It represents the title of a work (e.g. a book, paper, essay, poem, score, song, script, film, TV show, game, painting, sculpture , play , exhibition , etc.). The <cite> tag is an inline tag that indicates "defining a citation". The text within the <cite> tag is shown in Italics. The cite tag must have a start and end tag.

In this tag the "title" attribute defines the title of the Text within the <cite></cite> tags.

In HTML5 , the <cite> tag defines the cited title of a work whereas HTML 4.01 implied that the <cite> tag can be used to indicate the name of a person.

Declaring Syntax

<cite title="value">Some Text Here</cite>

Browser support

The <cite> tag is supported in all major browsers (e.g. Internet Explorer, Google Chrome, Mozilla Firefox. Safari, etc ).

For more details, visit following link

Question 20: What are the colors names in HTML 5?

Answer: You can see all 147 colors in the following list:

see all 147 colors
147 colors
HTML COLOR
color code
colors names
colors

For more details, visit following link:

Question 21: What are Waves in HTML?

Answer

A sine wave is a mathematical function that is repeats at a regular interval of time. The function is used in many fields including mathematics, physics, and engineering. We can also say that a sine wave is a smooth wave.

It has the following properties:

  1. The sine wave is blue whenever the value is positive.
  2. The sine wave is red whenever the value is red.
  3. The thickness of the line is directly proportional to the absolute value of the magnitude of the wave. For example, where the sine value reaches 0, the wave is absent.

On the X-axis, we will map the angle Theta. Theta will vary from 0 degree to 1040 degrees.

On the Y-axis, we will map the sin (Theta). For this, we will use the Math function Math.sin. The Math.sin function takes angles in radians. So the angle is first multiplied by PI / 180.

For more details, visit following link:

Question 22: What is Web SQL Database in HTML 5?

Answer

Web SQL is a very interesting feature, even though it isn't part of the HTML 5 specification but it is a separate specification and it can still help to develop Web Applications. Web SQL is used to manipulate a client-side database. Since I am saying that it is good to use, there is a disclaimer for its use; it is risky because it stores data at the client side, not on the server side. So always remember, don't store information sensitive to the server inside it.

Note: A Web SQL database only works in the latest versions of Safari, Google Chrome and Opera browsers.

Core Methods of Web SQL

The following are the 3 core methods of Web SQL that I will cover:

  • openDatabase
  • transaction
  • executeSql

Creating and Opening Databases

Using the openDatabase method, you can create an object for the database. If the database doesn't exist then it will be created and an object for that database will be created. You also don't need to worry about closing the connection with the database.

To create and open the database, you need to use the following syntax.

var dbObj = OpenDatabase('[Database_Name]', '[Version_Number]', '[Text_Description]', '[size]', '[Creation_Callback]’)

For more details, visit following link

Question 23: What is HTML5 Contenteditable Attribute?

Answer

One of the new features in HTML 5 is the contenteditable attribute. In HTML 5, any element can be editable. By using some JavaScript event handler, you can transform your web page into a fast rich text-box. This feature is mainly applied in Content Management Systems. By using this, you can edit content directly from the browser.

The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true and false. The empty string and the true keyword equates to the true state. The false keyword implies the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

States of content editable attribute

According to WHATWG.org, there are the following 3 states of the contenteditable attribute:

State Description How to write?
true Indicates that element is editable contenteditable=" " / contenteditable="true"
false Indicates that element is not editable contenteditable="false"
inherit ndicates that the element will be editable if and only if, its immediate parent element is editable contenteditable="inherit"


For more details, visit following link

Question 24: What is Vibration API in HTML5?

Answer

Vibration is a simple, a nice way of alert when you get a new message or a phone call. It is especially useful when you are in a noisy environment or the place where you feel the ringing would be a distraction to others.

It is interesting to know that HTML5 is now providing us to play with the vibration on the devices but the HTML5 Vibrate API supports only the recent version of Firefox & Chrome.

To check the vibration, API support in browsers as shown below,

  1. navigator.vibrate = navigator.vibrate || navigator.mozVibrate ||  
  2. navigator.webkitVibrate || navigator.msVibrate;  
  3. if (navigator.vibrate) {  
  4.    // supports vibration API.  
  5. }  
Vibration Syntax

Vibration basic syntax is,

navigator.vibrate(long | [long]);

The vibrate function accepts milliseconds or array of milliseconds.

Example
  1. // vibrate for 1000 ms  
  2. navigator.vibrate(1000);  
  3. // same like above but in array of ms  
  4. navigator.vibrate([1000]);  
In the above examples, we are setting the device to vibrate 1000 milliseconds.

For more details, visit following link: 

Question 25: What is the Battery Status API in HTML5?

Answer

When a users downloads an application for their devices, they are more conscious of the battery usage of the application. So as a mobile application developer, you should consider the battery usage of your Application.

If you are developing a Web Application for a mobile device then your choice is to use HTML5’s Battery Status API, if you are concerned about the user’s device battery status/charging levels. Yes, HTML5 provides an API for a device's battery.
W3.org says: “The Battery Status API specification defines a means for the web developers to programatically to determine the battery status of the hosting device”.
Check for Battery Status API

You can check whether the battery status API is supported by the browser or not as shown below.

  1. var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;  
  2.   
  3. if (battery) {  
  4.    // Battery Status API is supported  
  5. }  
The battery status API is currently supported by the latest version of Chrome and Firefox.

Properties

There are four basic properties available in the battery status API. 
  1. Charging: Charging is a type of Boolean and a read only that indicates whether the device is charging the battery. The default value is true.

  2. ChargingTime: ChargingTime is type is double and a read only that gives you the remaining time in seconds to charge the device battery fully. The default value is 0.

  3. DischargingTime: DischargingTime is the type of double and read only that represents the remaining time for a complete discharge of the device battery. The default value is calculated based on the other property values.

  4. Level: Level is a type of double and read only that represents the battery level in the scale of 0 - 1.0. The default value is 1.0.

For more details, visit following link:

Question 26: What is the use of Geolocation API of HTML5?

Answer

The Geolocation API of HTML5 helps to identify the user’s location. It can be used to provide location-specific information. For privacy reasons, the user is asked for permission to report location information. The HTML 5 Geolocation API provides the geographical location of the user. There are many techniques used to identify the location of the user. A desktop browser generally uses WiFi or IP based positioning techniques whereas a mobile browser uses cell triangulation, GPS and A-GPS (Assistive GPS) to triangulate between mobile phone towers and public masts to determine the location and WiFi based positioning techniques and so on.

The Geolocation API will use any of these techniques to identify the user’s location. The Geolocation API protects the user’s privacy by mandating that the user permission should be sought and obtained before sending the location information of the user to any website. Hence, the user will be prompted with a popover or dialog requesting for the user’s permission to share the location information. The user can accept or deny the request.

Geolocation

Geolocation Object

The Geolocation API is published through the navigator.geolocation object. If this object is present then the geolocation service works.

var geolocation=navigator.geolocation;

The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.

For more details, visit following link:

Question 27: What is Flexbox in HTML 5?

Answer

Flexbox is not a single property but a set of properties on the parent element and their children. Basically the parent is a container. It is probably a div called a flex container and the children are the elements called flex items.

Flexbox

The preceding picture shows the Flexible Box Module. Let us discuss the attributes of the flexible box.

  • Main axis: The main axis is the default flow direction for the flex items.

  • Main-start and Main-end: The main-start and main-end are the starting point and ending point for the flex items to flow in the flex container.

  • Cross axis: The cross axis is perpendicular to the main axis.

  • Cross-start and Cross-end: The flex items are placed from the start at the cross-start point and ends at cross-end point.

  • Main size: The flex items width or height in the main dimension is the main size of the flexbox.

  • Cross size: The flex items width or height in the cross dimension is the cross size of the flexbox.

For more details, visit following link:

Question 28: What are the special symbols in HTML 5?

Answer

Special symbols, characters and any other related stuff play very important role in web development or any other kind of design and development work, since we require several special symbols or characters in all these activities directly or indirectly. Thus HTML5 provides several special symbols in its new features. These special symbols are presented in the form of several predefined set of codes.

These special symbols provide these functionalities during web or any other type of design and development work or procedure.

  • Extra features
  • Description of the content
  • Explains mathematical terms
  • Reduce the content
  • Provides proper explanation

Special Symbols

Some of these symbols are as follows:

html Special

Special Symbols

Symbols

For more details, visit following link:

Question 29: What are Web Workers APIs in HTML 5?

Answer

Web Workers APIs provide a way in JavaScript to run something in the background that can do tasks without interfering with the user interface. As per the W3C standard "It is a JavaScript script executed from an HTML page that runs in the background, independently of other user-interface scripts that may also have been executed from the same HTML page. Web workers are able to utilize multi-core CPUs more effectively."

Types of Web Workers

  • Dedicated workers
  • Shared workers

Dedicated workers

  • A dedicated worker is accessible from the parent script that created it
  • Wide browser support: All
  • It is simply tied to its main connection

Shared workers

  • A shared worker can be accessed from any script of the same origin.
  • Limited browser support: Chrome 4.0+, Safari 5.0+ and Opera 10.6+.
  • It can work with multiple connections.

Basically Web Workers work in the following three steps:

  • First it should be executed on separate threads.
  • It should be hosted in separate files from the main page.
  • Finally a Worker object needs to be instantiated to call them.

For more details, visit following link:

Question 30: Describe Progress Bar in HTML 5?

Answer

Sometimes a task is running within a program that might take a while to complete. A user-friendly program provides some information to the user that the task is happening. It also tells how long the task might take and how much the task has been done or completed. One of the best way to show all of these activities is with the Progress Bar control.

Example

When you install a software or upload a file onto a website or when you download a file, you have seen a progress bar showing how the installation is progressing i.e download or upload has been done or how much is remaining.
In a simple way, the progress bar indicates the progress of a specific task.

In HTML 5, there is the element "progress" that displays the progress of a task.

Syntax

<progress></progress>

Attribute

It has 2 more attributes as shown in the following table:

Attribute Value Description
max Floating Point Number Specifies how much work the task requires in total,
(Default value is 1.0)
value Floating Point Number Specifies how much of the task has been completed
(This value will be in between 0.0<=value<=max)

For more details, visit following link:

Question 31: What is Font-Awesome in HTML 5?

Answer

These is a simple text that can easily be manipulated like normal texts using the fonts. When you stretch or enlarge an image (PNG) icon, it becomes blurred, it looks bad in a simple language. If you enlarge any font from the package of Fontawesome then it would never become blurred or pixalated. Moreover, no width and no height is required as used in images as attributes as only by increasing the font-size, it manipulates the icon. The best thing is this package can be downloaded from the Nuget Package or the Package Manager console too. The following image will show how to install the package from the PM Console.

Font-Awesome

For more details, visit following link:

Question 32: What are the Kinds of Mouse Pointers For HTML Controls?

Answer

Various Kinds of Mouse Pointers in HTML

  • Alias: It is used for a shortcut or to an alias somewhere.
    1. <a href="#" style="cursor:alias;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    Alias

    After running the page, check the mouse pointer.

    shortcut

  • All: Scroll: It is used to indicate to scroll in any direction.
    1. <a href="#" style="cursor: all-scroll;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    All

    After running the page, check the mouse pointer.

    See output

  • Cell: It is used to select a cell or a set of cells.
    1. <a href="#" style="cursor: cell;">My HyperLink</a>  
    Visual Studio Tool Tip for this Mouse pointer.

    Cell

    After running the page, check the mouse pointer.

    see result

  • Col: Resize: It is used to resize the columns horizontally.
    1. <a href="#" style="cursor: col-resize;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    Col

    After running the page, check the mouse pointer.

    result

  • Copy: It indicates that some text has been copied.
    1. <a href="#" style="cursor: copy;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    Copy

    After running the page, check the mouse pointer.

    My HyperLink

  • Crosshair: With a "+" sign.
    1. <a href="#" style="cursor: crosshair;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer

    Crosshair

    After running the page, check the mouse pointer.

    sign

  • Help: It is used to indicate the help.
    1. <a href="#" style="cursor help;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    HyperLink

    After running the page, check the mouse pointer.

    check

  • Move: It is used to indicate that something is moving.
    1. <a href="#" style="cursor: move;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    Mouse pointer

    After running the page, check the mouse pointer.

    pointer

  • Pointer: It is used to indicate a pointer.
    1. <a href="#" style="cursor: pointer;">My HyperLink</a>   
    Visual Studio Tool Tip for this Mouse pointer.

    Tool Tip

    After running the page, check the mouse pointer.

    running the page

For more details, visit following link:

Question 33: What are Frames in HTML?

Answer

Frames allow multiple HTML documents to be present as independent windows within a main browser. They allow you to present two or more documents at once.

Example

  1. <HTML>  
  2.   
  3. <HEAD>  
  4.     <TITLE>FRAME EXAMPLE</TITLE>  
  5. </HEAD>  
  6. <frameset cols="25%,*,25%">  
  7.     <frame src="FRAME1.html">  
  8.         <frame src="FRAME2.html">  
  9.             <frame src="FRAME3.html">  
  10. </frameset>  
  11.   
  12. </HTML>  
A <Frames document> can be declared using the <FRAMESET> element. A regular HTML Frameset document has a start element and an end element. This element can contain one or more elements. The SRC attribute of the frameset element points to the document that you want to display in a frame.The ROWS AND COLS attributes of frameset elements defines the layout of the frame.
  1. <HTML>  
  2.   
  3. <HEAD>  
  4.     <TITLE>FRAM EXAMPLE</TITLE>  
  5. </HEAD>  
  6. <FRAMESET cols="20%, 80%">  
  7.     <FRAMESET rows="100, 200">  
  8.         <FRAME src="contents_of_frame1.html">  
  9.             <FRAME src="contents_of_frame2.gif">  
  10.     </FRAMESET>  
  11. </FRAMESET>  
Type of Frame-

There are two types of frames based on their layout.

  1. Vertical Frames
  2. Horizontal Frames

For more details, visit following link: 

Question 34: Describe MathML in HTML5?

Answer

The Mathematical Markup Language (MathML) is a markup language to show mathematical and scientific content on the Web. HTML5 allows us to use MathML elements inside a document using <math>...</math> tags. A mathematical expression must be inserted into the element <math> with a specified namespace as in the following:

<math xmlns="http://www.w3.org/1998/Math/MathML"> </math>

In HTML5 we can simply write <math></math>. The basic elements of the <math> tag are as follows:

tags

For more details, visit following link:

Question 35: What are the HTML lists?

Answer

In HTML, there are the following types of lists:

  • Unordered Lists (<ul>) - The list items are marked with the bullets.
  • Ordered Lists (<ol>) - The list items are marked with the numbers or letters.
  • Definition Lists(<dl>)- This arranges your items in the same way as they are arranged in a dictionary.

All lists must contain one or more list elements.

Unordered HTML Lists

An unordered list is a collection of related items that have no special order or sequence. An unordered list starts with the <ul> element. Each list item starts with the <li> element.

The list items will be marked with bullets (black circles):

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML Unordered List</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <ul>  
  10.         <li>JavaScript</li>  
  11.         <li>ASP.NET</li>  
  12.         <li>CSS</li>  
  13.         <li>HTML</li>  
  14.     </ul>  
  15. </body>  
  16.   
  17. </html>  
Ordered HTML Lists

If you are required to put your items in a numbered list instead of bullet, then HTML ordered list will be used. This list is created using<ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element starting with the <li> tag.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML Ordered List</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <ol>  
  10.         <li>Beetroot</li>  
  11.         <li>Ginger</li>  
  12.         <li>Potato</li>  
  13.         <li>Radish</li>  
  14.     </ol>  
  15. </body>  
  16.   
  17. </html>  
HTML Definition Lists

HTML supports a list style which is called definition lists where entries are listed like in a dictionary. The definition list is the ideal way to present a glossary, list of terms or other name/value list.

Definition List makes use of the following three tags: 
  • <dl> - Defines the start of the list
  • <dt> - A term
  • <dd> - Term definition
  • </dl> - Defines the end of the list

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML Definition Lists</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <dl>  
  10.         <dt><b>ASP.NET</b></dt>  
  11.         <dd>ASP.NET is easy to Learn</dd>  
  12.         <dt><b>FTP</b></dt>  
  13.         <dd>This stands for File Transfer Protocol</dd>  
  14.     </dl>  
  15. </body>  
  16.   
  17. </html>  
For more details, visit following link: 

Question 36: What is Microdata in HTML 5?

Answer

Microdata is used to nest metadata within an existing content on the web pages. This mechanism allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model. Microdata allows us to define our own customized elements and start embedding custom properties in our web pages. It’s purpose is not to make a new widget appear on our web page but to help automated programs like Google understand and better handle the content of our web pages.

A Microdata consists of a group of name-value pairs. The group of name-value pairs is called items, each name-value property is called as a property and properties are represented by regular elements.

Microdata defines five Global HTML attributes that can be applied to any HTML5 tag. Microdata introduces the following five global attributes that can be available for any element to use and give context for machines about our data.

Attribute Description
Itemscope Creates the Item and indicates that descendants of this element contain information about it. The itemscope attribute is a Boolean attribute that tells that there is Microdata on this page.
Itemtype A valid URL of a vocabulary that describes the item and its properties context.
Itemprop This attribute defines a property for the item.Indicates that its containing tag holds the value of the specified item property.
Itemid Define a unique identifier of the item.
Itemref Provides a list of element ids with additional properties elsewhere in the document. This attribute gives a list of additional elements to find the name-value pairs of the item.

Example:

  1. <html>    
  2.     
  3.     <head>    
  4.         <title>Introduction to Microdata</title>    
  5.     </head>    
  6.     
  7.     <body>    
  8.         <div id="myTab">    
  9.             </div>    
  10.             <h1>Microdata</h1>    
  11.             <div itemscopeitemtype="http://schema.org/Person">    
  12.                 <p>My name is    
  13.                     <spanitemprop="name">Pankaj Choudhary</span>.</p>    
  14.             </div>    
  15.             <div itemscopeitemtype="http://schema.org/Person">    
  16.                 <p>This is an example of    
  17.                 <span itemprop="name">Microdata</span>.</p>    
  18.             </div>    
  19.     </body>    
  20.     
  21. </html>    
Output:

run

For more details, visit following link: 

Question 37: What is the difference between HTML5 vs HTML4.01?

Answer

  1. HTML4.01 vs. HTML5

    In HTML4.01, we specify a Doctype element like this:

    <! Doctypehtml ”-//W3C//DTD HTML4.01 Transitional//EN”>

    In HTML5, we declare this element as:

    <!Doctype html>

  2. HTML4.01 vs. HTML5

    In HTML4.01, we generally need to mention a complete referenced tag line for enabling functionality of JavaScript or External CSS.

    For example: For enabling JavaScript functionality we do:

    <script type=”text/javascript” src=”abc.js”>
    </script>

    For HTML5, we only specify a source, not the type, as in:

    <script src=”abc.js”>
    </script>

HTML5 | Tags

HTML5 makes our work easier and more precise using as it uses several new tags. These tags directly work without any link or reference.

For example: For including a structuring element and a navigation or any other section in our HTML page, we need to create divisions or the margins for that so that these can work properly in HTML4. Like:

  1. <html>  
  2.     <head>  
  3.         <title></title>  
  4.     </head>  
  5.     <body>  
  6.         <div class="header">  
  7.             <div class="nav">  
  8.                 <ol class="nav-list">  
  9.                     <li>  
  10.                         <a href="cshub.somee.com" title="Cshub" alt="Cshub">IT Encyclopedia </a>  
  11.                     </li>  
  12.                     <li>  
  13.                         <a href="picmaniac.brinkster.net" title=" Picmaniac" alt=" Picmaniac">Pic Maniac  
  14.                         </a>  
  15.                     </li>  
  16.                     <li>  
  17.                         <a href="jaiswalabhishek.blogspot.in" title="Google Says" alt=" Google Says">Google  
  18.                         Says </a>  
  19.                     </li>  
  20.                 </ol>  
  21.             </div>  
  22.         </div>  
  23.     </body>  
  24. </html>  
Using HTML5, we can do that as:
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <header>  
  9.         <nav>  
  10.             <ol id="nav-list">  
  11.                 <li> <a href="cshub.somee.com" title="Cshub" alt="Cshub"> IT Encyclopedia </a></li>  
  12.                 <li><a href="picmaniac.brinkster.net" title=" Picmaniac" alt=" Picmaniac"> Pic Maniac </a></li>  
  13.                 <li> <a href="jaiswalabhishek.blogspot.in" title="Google Says" alt=" Google Says"> Google Says</a></li>  
  14.             </ol>  
  15.         </nav>  
  16.     </header>  
  17. </body>  
  18.   
  19. </html>  
For more details, visit following link: 

Question 38: Discuss keyboard shortcut in HTML 5?

Answer

For Displaying the Keyboard text, we can also create the keyboard shortcut to perform various operations such as clicking a link or a button. We can use the accesskey attribute when defining the element to provide the keyboard shortcut to that element or control. Let's create a Web Page, named "accesskey.html" and understand ‘How to create a keyboard shortcut.

First We will Write a Code for ‘accesskey.html:

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Key Board Shortcut</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>  
  10. Use the Shortcut keys to access the Content  
  11. </h1>  
  12.     <p>  
  13.         Press the <kbd>Alt + W</kbd> keys to navigate the following link :  
  14.     </p>  
  15.     <a href="XYZ.html" accesskey="w" target="">Open XYZ.html file. </a>  
  16.     <p>  
  17.         Press the <kbd>ALT + Z </kbd>keys to focus on the following text field  
  18.     </p>  
  19.     Enter Your Name :  
  20.     <input type="text" name="name" accesskey="z">  
  21.     <p>  
  22.         Press the <kbd>ALT+S</kbd> keys to click the button to submit the form:</p>  
  23.     <input type="submit" accesskey="s" onclick="alert('Form submitted successfully.')">  
  24. </body>  
  25.   
  26. </html>  
Here we have used a hyperlink, a text field and a button on the web page and assigned a keyboard shortcut using the accesskey attribute. The output of the above code is given below :



Now When we press ALT + * Key: 
  • ALT + W : The focus goes on the hyperlink and we areredirected to the page specified by the hyperlink (XYZ.html)
  • ALT+Z : When we press ALT+Z key then get a focus on the Enter your Name text field.
  • ALT+S: This focuses on Submit button and give an alert box :

For more details, visit following link:

Question 39:What are HTML5 Semantic Elements?

Answer

HTML5 introduced a new set of Semantic Elements. It help developers to define the structure of a page in an easy way.

Semantic means 'meaning' and Semantic Element means elements with a meaning. A Semantic Element helps the developer and the browser to understand its meaning. There are two types of Semantic Elements:

  • Semantic: These elements clearly define their content like <form>, <img>, <table> and so on.
  • Non-semantic: These elements have no definition, they don't define anything about their content like <span> and <div>.

Traditional HTML Layouts

Developers have been using <div> elements to manage entire structure of a HTML page that includes elements like a header, an article, a footer or a sidebar and you need to use an ID or class attributes to assign the role of the div elements. Let's design a traditional HTML layout before heading to HTML5 Semantic Elements.

HTML Layouts

New HTML5 Semantic Elements

HTML5 provides some new Semantic Elements that are semantically meaningful to describe a webpage layout. It's easy to understand and organize our code. It helps search engines to organize content more efficiently as well. The following is a list of the new HTML5 elements:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

For more details, visit following link:

Question 40: What is the difference between Article Vs Section tags in HTML5?

Answer

He <article> element is a special type of <section>. <article>has more specific meaning as compared to <section> that is, it is independent, self-contained block of related content.

We can use<section>, but we mostly use <article> to give more specific meaning to the content.

<section> is only a block of a related content and <div> is only a block of content. We need to mention here that the pubdate attribute does not apply in <section>.


The pubdate attribute is used as one time attribute in <article>.If it is present, it indicates that the <time> element is the date, the <article> was published. It can be written in several ways, the most popular being:

pubdate
pubdate="pubdate"

To decide, which of three elements is appropriate, choose the first suitable option:

  1. Would the content make sense on its own in a feed reader? If so use <article>
  2. Is the content related? if so use <section>
  3. Finally, if there's no semantic relationship use <div>

Here is an example of <section> containing <article>:

  1. <h1>Articles on: Fruit</h1>  
  2. <article>  
  3.     <h2>Apple</h2>  
  4.     <p>The apple is the pomaceous fruit of the apple tree...</p>  
  5. </article>  
  6. <article>  
  7.     <h2>Orange</h2>  
  8.     <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>  
  9. </article>  
  10. <article>  
  11.     <h2>Banana</h2>  
  12.     <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>  
  13. </article>  
  14. </section>  
For more details, visit following link: 

Question 41: What are the advantages and limitations of HTML5 Web Worker

Answer

Advantages

We know the web browsers increased a lot over the past few years and it is primarily because of lot of work done is being done on its engines, ex- V8 (Google), Chakra (Microsoft). The JavaScript so far runs in a single thread. The problem with single threaded architecture is that it blocks the code and UI becomes unresponsive in case of running a complex script. There are various ways to solve this problem:

  • Offload work to server but to make apps faster, fat client is preferred.
  • Use asynchronous calls but many complex ecysystem of async calls & promises can lead to callback hell.
  • Leverage multi threading. Interesting!

Web Workers solve this issue by providing capability of multi threading in JavaScript.

Features available to WW

Due to the multi-threaded behavior, a WW only has an access to the following subset of JavaScript features:

  • The navigator object
  • The location object
  • XMLHttpRequest
  • setTimeOut/clearTimeOut/setInterval/clearInterval
  • importScripts
  • spawning other WW

Limitations of WW

It has some limitations apart from it's multithreading advantage, i.e., it can't access:

  • DOM elements
  • window object
  • document object
  • parent object

For more details, visit following link:

Question 42: How can we use Details Tag in HTML5?

Answer

The <details> tag is a new tag in HTML 5. The <details> tag specifies additional information or controls about the documents that the user can view or hide on demand. The contents of the details tag is hidden by default. The header is visible and can be shown when the user clicks on the header portion of <details> tag. The contents of the details tag are made visible by adding an open attribute to the <details> tag. The tag can also be used along with the summary tag to make your own header so that the user can expand or collapse the details of the document when required. This tag is only supported by Chrome.

Syntax

<details open="open">
<summary></summary>
<p></p>
</details>

Element-Specific Attribute

Attributes Values Description
open open This Boolean attribute specifies whether the details of the data should be shown to the user or not.

For more details, visit following link-:

Question 43: What is figure tag in HTML 5?

Answer

Figure tag is useful to markup a photo in the document. It is used to specify the self-contained block, images etc.
Its content is belong to main document. But if we want to remove it, we can remove it independently as it does not effect the rest of the document.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
<p>Are you going to the Mindcracker MVP Summit 2012 at Noida or interested in learning the daily progress of the summit? Check out daily updates here and let the saga begin.</p>

<figure>
<imgsrc="1.jpg" alt="C# Corner" width="100" height="100" />
</figure>

</body>
</html>

For more details, visit following link: 

Question 44: What are the formatting elements in HTML 5?

Answer

Following is a list of formatting elements:

  • Emphasized text
  • Marked text
  • Small text
  • Deleted text
  • Inserted text
  • Subscripts
  • Superscripts

Emphasized text– The syntax of Emphasized text element is <em> which defines emphasized text.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <p>Hi. This is Raj Kumar Beniwal Here (This is normal text) </p>  
  10.     <p><em> Hi. This is Raj Kumar Beniwal Here (This is normal text) </em> </p>  
  11. </body>  
  12.   
  13. </html>  
Marked text– The syntax of marked text element is <mark> which defines marked or highlighted text.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h2>Hi. This is <mark>Raj Kumar</mark> Beniwal Here. </h2>  
  10. </body>  
  11.   
  12. </html>  
Small text– The syntax of small text element is <small> which defines small text.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>Hi. This is <small>Raj Kumar</small> Beniwal Here. </h1>  
  10. </body>  
  11.   
  12. </html>  
Deleted text– The syntax of deleted text is <del> which defines deleted or removed text.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>Hi. This is <del>Raj Kumar</del> Beniwal Here. </h1>  
  10. </body>  
  11.   
  12. </html>  
Inserted text– The syntax of inserted text element is <ins> which defines inserted or added text.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>Hi. This is Raj <ins>Kumar</ins> Beniwal here. </h1>  
  10. </body>  
Subscripts text– The syntax of subscripts text element is <sub> which defines subscripted text.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>Hi. This is <sub>Raj Kumar</sub> Beniwal here. </h1>  
  10. </body>  
  11.   
  12. </html>  
Superscripts text– The syntax of superscript text element is (sup> which defines superscripted text.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>HTML formatting element sample</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h1>Hi. This is <sup>Raj Kumar</sup> Beniwal here. </h1>  
  10. </body>  
  11.   
  12. </html>  
For more details, visit following link: 

Question 45: Why to use IndexedDB instead of Web SQL in HTML 5?

Answer

This IndexedDB has been introduced with HTML5. This allows a user to store large amount of data in the browser. It has been proved that IndexedDB is more powerful and efficient than other storage mechanisms like Local Storage and Session Storage. IndexedDB is an API which helps the developers to do some database operations in the client side like creating a database, opening the transaction, creating tables, inserting values to the tables, deleting the values, and reading the data. If you need any other way to save some data in the client side, you can use storage mechanisms introduced in HTML5.

W3C has announced that use of Web SQL is obsolete and deprecated, hence it is not recommended to use Web SQL in your Applications. Most of the modern web browsers like Mozilla do not support the use of Web SQL and this is also a great limitation of Web SQL.

Now we have an alternative to Web SQL. IndexedDB is more efficient and faster than Web SQL. The following are some of the main advantages of IndexedDB.

  • It stores the data as Key-Pair values
  • It is asynchronous
  • It is non-relational
  • Can access the data from the same domain

For more details, visit following link:

Question 46: How you can Use Modernizr in HTML 5?

Answer

Modernizr is an open source JavaScript library that helps to detect features of HTML5 and CSS3.

You can download the Modernizr library from this link.

The good thing about the Modernizr JS is that we can download this depending on the requirements. In other words, if an application needs to check for only few features of HTML5 and CSS3 then select those features and download the file. That JavaScript file will contain only the source code for the selected features.

How to use Modernizr JS.

On every page, you need to add the following tag:

JavaScript
Add the Modernize.js like we add any JavaScript file as shown below:
Modernize.js
In the following source code, if the HTML5 Canvas tag is supported then the following picture will draw on the Canvas object else the same kind of picture will be shown using the image tag.

object

For more details, visit following link-

Question 47: What is the difference between Canvas and SVG elements?

Answer

SVG is a part of the Vector based family of graphics. It is completely different from Raster based graphics. The most common Raster-based formats used on the web today are JPEG, GIF and PNG. SVG is a W3C recommendation. SVG graphics do NOT lose any quality if they are zoomed or resized.

The <canvas> element:

  • Helps the browser to draw shapes and images without any plugin.
  • Used to draw graphics.
  • Has several methods to draw paths, boxes, circles, characters and add images.

Comparison Of SVG and Canvas

SVG Canvas
Object Model-based (SVG elements are similar to HTML elements) Pixel-based (the canvas is essentially an image element with a drawing API)
Multiple graphical elements that become part of the Document Object Model (DOM) Single HTML element similar to <img> in behavior
Visual presentation created with markup and modified by CSS or programmatically through script Visual presentation created and modified programmatically through script
Event model/user interaction is object-based at the level of primitive graphic elements, suchg as lines, rectangles and paths Event model/user interaction is coarse, at the canvas element only; interactions must be manually programmed from mouse coordinates
SVG markup and object model directly support accessibility The API does not support accessibility; markup-based techniques must be used in addition to canvas

Some other Differences between Canvas and SVG elements

Canvas SVG
Canvas draws 2D graphics, on the fly (with a JavaScript). SVG defines the graphics in XML format.
Resolution dependent. Resolution independent.
Canvas is rendered pixel by pixel. In SVG, each drawn shape is remembered as an object.


For more details, visit following link:

Question 48: What is the use of Language attribute in HTML 5?

Answer

The Language attribute-

  • The document language can be declared in the <html> tag.
  • The language is declared in the language attribute.
  • Declaring a language is important for accessibility applications (screen readers) and search engines.

Example

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3.   
  4. <body>  
  5.     <h1>My First Heading</h1>  
  6.     <p>My first paragraph.</p>  
  7. </body>  
  8.   
  9. </html>  
The first two letters specify the language (en). If there is a dialect, use two more letters (US).

For more details, visit following link: 

Question 49: What is the use of WebSocket API?

Answer

WebSockets provide a rich protocol to perform bi-directional communication and we can create a full-duplex communication channel that can be operated through a single socket over the Web and for that reason its more attractive for the things like games, messaging apps and for real-time updates in both directions.

WebSocket is basically used to reduce the overhead of HTTP, since it has its own protocol defined by IETF and an API for the server communication. By using them, the client notifies the WebSocket server with the recipients ID of an event and the server immediately notifies all the active clients and the last clients processes the event when the given recipient ID matches the client ID.

Key Features of WebSocket

  • WebSocket is a rich protocol to perform bi-directional communication.

  • It’s a full-duplex communication channel that can operate through a single socket over the Web. Your request reuses the same connection from the client to the server and the server to the client.

  • It makes a single request and the single request greatly reduces the latency over polling.

  • Communication becomes more efficient since bandwidth, CPU power and latency is saved.

  • You can build other standard protocols on top of its protocol.

  • WebSocket is a feature that makes HTML5 more advanced.

  • WebSocket is about simplicity.

WebSocket

For more details, visit following link:

Question 50: What are HTML 5 Symbol Entities?

Answer

There is a wide category of HTML symbols for various purposes and applications like:

  • Mathematical operators
  • Arrows
  • Technical symbols
  • Shapes
  • Special Symbols and so on

HTML5 Symbols

Functionalities | HTML5 Symbols

Several special symbols are not present on a normal keyboard. We can use special symbols along with several combinations of attributes and the entities available in HTML5. There are generally 3 ways or procedures through which we can access or use all the functionalities provided by HTML5.

Methods | HTML5 Symbols

To add these symbols to an HTML page, these methods are:

HTML5

For more details, visit following link:

Question 51: What is Template tag in HTML 5?

Answer

W3C has introduced a new "template" tag that provides a mechanism to define HTML markup fragments as prototypes. In practice, a template can be used to insert fragments of HTML code into your page, for example:

  1. <template id="rowTemplate">  
  2. <tr>  
  3. <td class="record"></td>  
  4. <td></td>  
  5. <td></td>  
  6. </tr>  
  7. </template>  
Features

The following are the features of the template tag: 
  • The template code can be defined nearly anywhere; the head, body or even a frameset.
  • Templates will not be displayed
  • Templates are not considered to be a part of the document. In other words, using document.getElementById(“mytablerow”) will not return child nodes.
  • Templates are inactive until used. In other words, enclosed images will not download, media will not play, scripts will not run and so on.

Using templates

To use a template, it must be cloned and inserted into the DOM. For example, assuming the following HTML:

  1. <table id="testTable">  
  2.     <thead>  
  3.         <tr>  
  4.             <td>  
  5.                 ID  
  6.             </td>  
  7.             <td>  
  8.                 name  
  9.             </td>  
  10.             <td>  
  11.                 twitter  
  12.             </td>  
  13.         </tr>  
  14.     </thead>  
  15.     <tbody>  
  16.         <!-- rows to be appended here -->  
  17.     </tbody>  
  18. </table>  
  19. <!-- row template -->  
  20. <template id="rowTemplate">  
  21. <tr>  
  22. <td class="record"></td>  
  23. <td></td>  
  24. <td></td>  
  25. </tr>  
  26. </template>  
Use the following to clone the new row and append it to the table in JavaScript:
  1. // get tbody and row template  
  2. var t = document.querySelector("#testTabletbody"),  
  3. row = document.getElementById("rowTemplate");  
  4. // modify row data  
  5. var td = row.getElementsByTagName("td");  
  6. td[0].textContent = "1";  
  7. td[1].textContent = "Sunny";  
  8. td[2].textContent = "@sunny_delhi";  
  9. // clone row and insert into table  
  10. t.appendChild(row.content.cloneNode(true));  
For more details, visit the following link: 

Question 52: What is the difference between XHTML and HTML?

Answer

XHTML

XHTML stands for ”eXtensible Hyper Markup Language”. It is an extended version of HTML 4.01. XHTML is HTML which is defined in XML format .Therefore, it is an XML application. XHTML is basically supported by almost all the available major browsers like Internet Explorer, Opera, Safari, and Chrome.

There are many web pages available on the internet that contain “bad HTML” means those don't follow the actual principle of HTML but still execute very well.

For example,

  1. <html>  
  2.   
  3. <head>  
  4.     <title>  
  5.         This is a bad HTML page  
  6.     </title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <h1>Bad HTML   
  11. <p> This is a web page that contain bad HTML.   
  12. </body>  
  13. </html>  
HTML 
  • HTML is proposed by Tin-Berners-Lee in 1987.
  • HTML is developed by W3C and WHATWG.
  • HTML files are saved with .html and .htm extension.
  • HTML is an SGML (Standard Generalized Markup Language) application.

Example

  1. <html>  
  2.   
  3. <head>  
  4.     <title>This is an XHTML page </title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <p> This is my first XHTML page  
  9. </body>  
  10.   
  11. </html>  
For more details, visit the following link: 
You can enhance your knowledge more, by reading the following articles.
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs