HTML5 is one of the most popular programming languages for Web developers. Therefore, if you are going for a Web developer or front-end developer interview, knowledge of HTML5 with JavaScript and CSS is a must. Here is a list of the top 50 interview questions and their answers that may help you pass the interview.
Question 1. What Is HTML5 and Why Do We Use HTML 5
Answer
HTML5 is the latest version of HTML and XHTML with new features like Drawing, Animation, Video, Audio, etc. It is used to solve some common structural problems encountered with HTML 4.1. It gives more flexibility to web developers and 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 a video on web pages without special software like Flash. Furthermore, HTML5 is developed in such a way that the developers are not required to waste their time and effort 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.
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 a video on the web pages without using any special software like Flash.
HTML5 is far easier for web designers and web developers as it tells them how a web page is structured.
For more details, visit Introduction to HTML5
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; 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, circles, boxes, text, and graphic images.
- Canvas
Canvas is a rectangular area on an 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 the canvas are:
- SVG is scalable and provides the facility of auto-scaling icons, logos, and charts.
- 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 Understanding HTML5 Graphics
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 with the HTML 5 specification. By using this <datalist> tag, we can define a list of, data, and then we can bind it with a <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 that depends on the input string or character.
The main feature of this <datalist> tag is to auto-complete the <input> element.
Example
Suppose we have a TextBox for the country.
<input type="text" list="countries" name="country" />
Complete Example
<!DOCTYPE html>
<html lang="en">
<body>
Please Select Country: <input type="text" list="countries" name="country" />
<datalist id="countries">
<option value="India">India</option>
<option value="United States"></option>
<option value="United Kingdom"></option>
<option value="China"></option>
<option value="Nepal"></option>
<option value="Afghanistan"></option>
<option value="Iceland"></option>
<option value="Indonesia"></option>
<option value="Iraq"></option>
<option value="Ireland"></option>
<option value="Israel"></option>
<option value="Italy"></option>
<option value="Swaziland"></option>
</datalist>
</body>
</html>
For more details, visit DataList Tag in HTML 5
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.
<input type="range" name="age" min="18" max="35" />
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.
<input type="url" name="mainpage" />
Input Type email
The email type is used for the input fields that should contain an Email address and automatically validates it when submitted.
<input type="email" name="emailid" />
Input Type Tel
Input Type Tel defines a field to enter a telephone number and automatically validates when the form is submitted.
<input type="tel" name="usrtel" />
For more details, visit HTML5 Input Types
Question 5: What is the use of Drag and Drop in HTML5?
Answer
Drag and drop is a very common feature and convenient for users. You need to grab an object and put it where you want. Online examination websites commonly use this feature wherein you have the option to pick up the correct answer, drag it to the answers placeholder, and drop it.
The Drag and Drop API has seven new events to track a drag and drop. The events are dragstart, drag, dragend, dragenter, dragleave, dragover, and drop triggered during the various stages of the drag and drop operation. These events are listed below:
For more details, visit HTML5 Drag and Drop
Question 6: What is HTML 5 Web Storage?
Answer
HTML5 Web Storage, also known as DOM Storage, is a way to preserve on either the client or server, which makes it much easier to work against the stateless nature of HTTP.
Advantages of HTML5 Web Storage:
- It can store 5 to 10 MB of data. That is far more than what cookies have.
- Web storage data is never transferred with an 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.
- It has the ability to hook into the browser events such as offline, online, and storage changes.
- It has less overhead than cookies; no extra header data is sent with the browser requests.
- It 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 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:
sessionStorage.getItem('someKey');
//returns 'someValue'
sessionStorage.someKey;
//returns 'someValue'
For more details, visit HTML5 Web Storage
Question 7: What are the types of Web Storage in HTML5?
Answer
There are two types of Web Storage,
- Session Storage
- Local Storage
As its name implies, it stores data from the 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.
- To store data in session storage, setItem () function is used.
sessionStorage.setItem (‘key’,’value’);
Example
sessionStorage.setItem (‘username’,’ABC’);
We can only store strings in Session Storage. To save the objects in the session, first, convert the object into JSON string and then store this string in Session Storage as in the following,
sessionStorage.setItem (‘object’, JSON.stringify(object));
- To retrieve the data from Session Storage getItem() function is used.
sessionStorage.getItem(‘key’);
Example
var username= sessionStorage.getItem(‘username’);
If JSON string is stored in Session Storage, then you can convert it into the object as below.
var object=JSON.parse(sessionStorage.getItem(‘object’));
- To delete a particular key from Session Storage, the removeItem function is used.
sessionStorage.removeItem(‘key’);
Example
sessionStorage.removeItem(‘username’);
- To delete all the keys from Session Storage, the clear function is used, as shown below
sessionStorage.clear();
To get all KEY/VALUE pairs from Session Storage, you can loop through Session Storage like the following.
for (var i = 0; i < sessionStorage.length; i++)
{
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
}
Local Storage
Local Storage is the second type of HTML Web Storage. Like Session Storage, it also stores data in the KEY / VALUE pair of strings. The following points help to compare Session Storage and Local Storage.
- Session Storage stores the data for only the 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 is cleared only when it is manually deleted.
- The data in Session Storage is accessible only in the current window of the browser, but the data in the Local Storage can be shared between multiple windows of the browser.
Figure: Session Storage
Figure: Local Storage
The following functions are used to access Local Storage in JavaScript:
- To store data in Local Storage, setItem() function is used.
localStorage.setItem (‘key’,’value’);
Example
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:
localStorage.setItem (‘object’, JSON.stringify(object));
To retrieve the data from Local Storage, the getItem() function is used.
localStorage.getItem(‘key’);
Example
var username= localStorage.getItem(‘username’);
For more details, visit the first part that mentions HTML5 Session Storage. The second part is about HTML5 Local Storage and, finally Difference Between Local Storage, Session Storage, And Cookies
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 sounds like .mp3, wav, and .ogg. I have used five sound formats to show which formats are compatible with the browsers. A WAV file is a common sound format that is supported by most browser versions.
Syntax
<audio src="URL" controls> </audio>
The 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 immediately. |
| autoplay |
This Boolean attribute indicates whether or not the file should start playing audio as soon as it can. |
| loop |
This Boolean attribute indicates whether or not to apply repetition on playing audio. |
| src |
This attribute is used to specify the URL (location of the audio file) of the audio. |
| controls |
This Boolean attribute specifies 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 the Audio tag in HTML5
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. A video tag is used to add video or media files to 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 a music video or a movie on your web page for the visitor to listen to and watch.
HTML5 video tag accepts the attribute that specifies how the video should be played. You can write content in <video> tag. <video> tag always occurs in pairs. Any content between the opening and closing tag is "fallback content". This content is displayed only by those browsers that do not support the video tag. Now, most of the video files are shown by the 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 |
The video will start playing automatically. |
| autobuffer |
autobuffer |
The video will start buffering automatically. |
| loop |
loop |
Video automatically starts over again when done. |
| controls |
controls |
In order to show the control poster URL |
| 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 Video Tag in HTML5
Question 10: What are the media elements in HTML 5?
Answer
The following are the 5 most popular media elements.
Audio
- The audio element is used to define or create a music element in your simple HTML page.
- It supports all 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 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 plug-ins for the Applications.
For more details, visit the following HTML5 Media Elements
Question 11: What is the use of Canvas elements 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 on one HTML page.
- The real power of the Canvas element is the scripting for which we 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.
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 HTML5 Canvas
Question 12: What is the use of a 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 a 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
<html>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
First Name: <input type="text" />
<br/><br/> Last Name: <input type="text" />
<br/><br/> p_Address: <input type="text" />
</fieldset>
</form>
</body>
</html>
For more details, visit Fieldset Tag in HTML5
Question 13: What are the HTML tags deprecated 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 an 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. A 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 |
heightwidth |
| table |
valign |
For more details, visit Deprecated HTML Tags
Question 14: What are the new APIs provided by the HTML 5 standard?
Answer
HTML5 APIs
After HTML's evolution, later in 1998, parts of the API for HTML were developed by the browser vendors and released 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 an HTML markup snippet and understand the DOM concept.
HTML markup snippet
<!DOCTYPE HTML>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>Text</h1>
<p>Text</p>
<!-- Comment -->
</body>
</html>
DOM tree of HTML markup snippet
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 HTML APIs
Question 15: What is Application Cache in HTML5?
Answer
Yet HTML5 has many new special elements and attributes, but one of the best features of HTML5 is "Application Cache", which enables us to make an offline session of a web application. It allows fetching a few or all of the content of a website, such as HTML files, Images, JavaScript, CSS, etc. This feature speed up the site performance. This is achieved with the help of a file, defined as follows:
<! doctype html>
<html manifest="example.appcache">
....
....
.....
</html>
For more details, visit Application Cache in HTML5
Question 16: What is a meter tag? What is the difference between a 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, and the fraction of a voting population to have selected a specific candidate.
Difference between a progress tag and a 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 dynamic data, whereas a meter tag represents static data.
Note
- According to the W3C, the meter tag should not be used to indicate progress as to indicate the progress, we have the progress tag.
- 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, etc.
<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 what measurements value is the best value |
For more details, visit Meter Tag in HTML 5
Question 17: What is the use of Scalable Vector Graphics (SVG) in HTML5?
Answer
Scalable Vector Graphics (SVG) is part of the vector-based family of graphics. There are various forms of Raster-based graphics available that store 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 Interchange Format), and PNG (Portable Network Graphics). SVG is a language for describing vector graphics in XML.
Basics of SVG
The 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 files, 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 an 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 Create Text |
For more details, visit Scalable Vector Graphics (SVG) in HTML5
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 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.
For more details, visit Learn HTML5 - Part 3: Server-sent Events APIs
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 Cite Tag in HTML5
Question 20: What are the names of the color in HTML 5?
Answer: You can see all 147 colors in the following list:
For more details, visit Color Name in HTML5
Question 21: What are Waves in HTML?
Answer
A sine wave is a mathematical function that is repeated 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:
- The sine wave is blue whenever the value is positive.
- The sine wave is red whenever the value is red.
- 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 degrees 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 Smooth Wave in HTML5
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 on 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 HTML 5 Web SQL Database
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 textbox. 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 equate to the true state. The false keyword implies a 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 the element is editable |
contenteditable=" " / contenteditable="true" |
| false |
Indicates that the element is not editable |
contenteditable="false" |
| inherit |
indicates that the element will be editable if and only if, its immediate parent element is editable |
contenteditable="inherit" |
For more details, visit HTML5 Contenteditable Attribute
Question 24: What is Vibration API in HTML5?
Answer
Vibration is a simple, nice way of alerting you when you get a new message or a phone call. It is especially useful when you are in a noisy environment or a 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 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,
navigator.vibrate = navigator.vibrate || navigator.mozVibrate ||
navigator.webkitVibrate || navigator.msVibrate;
if (navigator.vibrate) {
// supports vibration API.
}
Vibration Syntax
Vibration basic syntax is,
navigator.vibrate(long | [long]);
The vibrate function accepts milliseconds or an array of milliseconds.
Example
// vibrate for 1000 ms
navigator.vibrate(1000);
// same like above but in array of ms
navigator.vibrate([1000]);
In the above examples, we are setting the device to vibrate for 1000 milliseconds.
For more details, visit Vibration API in HTML5
Question 25: What is the Battery Status API in HTML5?
Answer
When a user 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 programmatically determine the battery status of the hosting device".
Check for Battery Status API
You can check whether the browser supports the battery status API or not as shown below.
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
if (battery) {
// Battery Status API is supported
}
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.
- 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.
- 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.
- 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.
- Level: Level is a type of double and read-only that represents the battery level on a scale of 0 - 1.0. The default value is 1.0.
For more details, visit Battery Status API in HTML5
Question 26: What is the use of the 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. In contrast, 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's 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 the user’s permission to share the location information. The user can accept or deny the request.
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;
A geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device.
For more details, visit Geolocation In HTML5
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 and probably a div called a flex container, and the children are elements called flex items.
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 end at a 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 Flexbox in HTML5
Question 28: What are the special symbols in HTML 5?
Answer
Special symbols, characters, and any other related stuff play a 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 sets of codes.
These special symbols provide these functionalities during the 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:
For more details, visit Special Symbols in HTML5
Question 29: What are Web Workers APIs in HTML 5?
Answer
Web Workers APIs provide 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 Web Workers APIs in HTML 5
Question 30: Describe the 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 ways to show all of these activities is with the Progress Bar control.
Example
When you install software or upload a file onto a website or 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 Simplydicates 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 Progress Bar in HTML 5
Question 31: What is Font-Awesome in HTML 5?
Answer
These simple texts can easily be manipulated like normal texts using fonts. When you stretch or enlarge an image (PNG) icon, it becomes blurred, and it looks bad in simple language. If you enlarge any font from the package of Fontawesome then it would never become blurred or pixelated. Moreover, no width and no height are required as used in images as attributes, just increase the font size, and 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.
For more details, visit Getting Started With Font-Awesome
Question 32: What are the Kinds of Mouse Pointers For HTML Controls?
Answer
Various Kinds of Mouse Pointers in HTML
- Alias: It is used as a shortcut or as an alias somewhere.
<a href="#" style="cursor:alias;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- All-Scroll: It is used to indicate to scroll in any direction.
<a href="#" style="cursor: all-scroll;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- Cell: It is used to select a cell or a set of cells.
<a href="#" style="cursor: cell;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- Col-Resize: It is used to resize the columns horizontally.
<a href="#" style="cursor: col-resize;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- Copy: It indicates that some text has been copied.
<a href="#" style="cursor: copy;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- Crosshair: With a "+" sign.
<a href="#" style="cursor: crosshair;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer
After running the page, check the mouse pointer.
- Help: It is used to indicate help.
<a href="#" style="cursor help;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- Move: It is used to indicate that something is moving.
<a href="#" style="cursor: move;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
- Pointer: It is used to indicate a pointer.
<a href="#" style="cursor: pointer;">My HyperLink</a>
Visual Studio Tool Tip for this Mouse pointer.
After running the page, check the mouse pointer.
For more details, visit Various Kinds of Mouse Pointers For HTML Controls
Question 33: What are Frames in HTML?
Answer
Frames allow multiple HTML documents to be present as independent windows within the main browser. They allow you to present two or more documents at once.
Example
<HTML>
<HEAD>
<TITLE>FRAME EXAMPLE</TITLE>
</HEAD>
<frameset cols="25%,*,25%">
<frame src="FRAME1.html">
<frame src="FRAME2.html">
<frame src="FRAME3.html">
</frameset>
</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 define the layout of the frame.
<HTML>
<HEAD>
<TITLE>FRAM EXAMPLE</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
</FRAMESET>
Type of Frame
There are two types of frames based on their layout.
- Vertical Frames
- Horizontal Frames
For more details, visit Working With Frames in HTML
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="https://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:
For more details, visit MathML With HTML5
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 bullets.
- Ordered Lists (<ol>) - The list items are marked with 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):
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>JavaScript</li>
<li>ASP.NET</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</body>
</html>
Ordered HTML Lists
If you are required to put your items in a numbered list instead of a 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
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
HTML Definition Lists
HTML supports a list style 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 another 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
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition Lists</title>
</head>
<body>
<dl>
<dt><b>ASP.NET</b></dt>
<dd>ASP.NET is easy to Learn</dd>
<dt><b>FTP</b></dt>
<dd>This stands for File Transfer Protocol</dd>
</dl>
</body>
</html>
For more details, visit Overview Of HTML Lists
Question 36: What is Microdata in HTML 5?
Answer
Microdata is used to nest metadata within existing content on 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. Its 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 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
<html>
<head>
<title>Introduction to Microdata</title>
</head>
<body>
<div id="myTab">
</div>
<h1>Microdata</h1>
<div itemscopeitemtype="https://schema.org/Person">
<p>My name is
<spanitemprop="name">Pankaj Choudhary</span>.</p>
</div>
<div itemscopeitemtype="https://schema.org/Person">
<p>This is an example of
<span itemprop="name">Microdata</span>.</p>
</div>
</body>
</html>
Output:
For more details, visit HTML5 Microdata
Question 37: What is the difference between HTML5 vs HTML4.01?
Answer
- 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>
- HTML4.01 vs. HTML5 In HTML4.01, we generally need to mention a completely referenced tagline for enabling the 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 it as it uses several new tags. These tags directly work without any link or reference.
For example: For including a structuring element and navigation or any other section in our HTML page, we need to create divisions or margins so that these can work properly in HTML4. Like:
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="nav">
<ol class="nav-list">
<li>
<a href="cshub.somee.com" title="Cshub" alt="Cshub">IT Encyclopedia </a>
</li>
<li>
<a href="picmaniac.brinkster.net" title=" Picmaniac" alt=" Picmaniac">Pic Maniac
</a>
</li>
<li>
<a href="jaiswalabhishek.blogspot.in" title="Google Says" alt=" Google Says">Google
Says </a>
</li>
</ol>
</div>
</div>
</body>
</html>
Using HTML5, we can do that as:
<html>
<head>
<title></title>
</head>
<body>
<header>
<nav>
<ol id="nav-list">
<li> <a href="cshub.somee.com" title="Cshub" alt="Cshub"> IT Encyclopedia </a></li>
<li><a href="picmaniac.brinkster.net" title=" Picmaniac" alt=" Picmaniac"> Pic Maniac </a></li>
<li> <a href="jaiswalabhishek.blogspot.in" title="Google Says" alt=" Google Says"> Google Says</a></li>
</ol>
</nav>
</header>
</body>
</html>
For more details, visit HTML5 vs HTML4.01
Question 38: Discuss keyboard shortcuts in HTML 5.
Answer
For displaying the Keyboard text, we can also create a keyboard shortcut to perform various operations, such as clicking a link or button. We can use the accesskey attribute when defining the element to provide the keyboard shortcut to that element of 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.
<!DOCTYPE HTML>
<html>
<head>
<title>Key Board Shortcut</title>
</head>
<body>
<h1>
Use the Shortcut keys to access the Content
</h1>
<p>
Press the <kbd>Alt + W</kbd> keys to navigate the following link :
</p>
<a href="XYZ.html" accesskey="w" target="">Open XYZ.html file. </a>
<p>
Press the <kbd>ALT + Z </kbd>keys to focus on the following text field
</p>
Enter Your Name :
<input type="text" name="name" accesskey="z">
<p>
Press the <kbd>ALT+S</kbd> keys to click the button to submit the form:</p>
<input type="submit" accesskey="s" onclick="alert('Form submitted successfully.')">
</body>
</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 are redirected to the page specified by the hyperlink (XYZ.html)
- ALT+Z: When we press the ALT+Z key then, get focus on the Enter your Name text field.
- ALT+S: This focuses on the Submit button and gives an alert box :
For more details, visit Keyboard Shortcut in HTML
Question 39: What are HTML5 Semantic Elements?
Answer
HTML5 introduced a new set of Semantic Elements. It helps 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 the entire structure of an 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.
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 Working With Semantic Elements in HTML5 With Layout Examples
Question 40: What is the difference between Article Vs Section tags in HTML5?
Answer
The <article> element is a special type of <section>. <article> has a more specific meaning than <section> that is, it is an 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 related content, and <div> is only a block of content. Also, we here mentioned the pubdate attribute does not apply in <section>.
The pubdate attribute is used as for 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 the three elements is appropriate, choose the first suitable option:
- Would the content make sense on its own in a feed reader? If so, use <article>
- Is the content related? if so, use <section>
- Finally, if there's no semantic relationship, use <div>
Here is an example of <section> containing <article>:
<h1>Articles on: Fruit</h1>
<article>
<h2>Apple</h2>
<p>The apple is the pomaceous fruit of the apple tree...</p>
</article>
<article>
<h2>Orange</h2>
<p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>
</article>
<article>
<h2>Banana</h2>
<p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>
</article>
</section>
For more details, visit Difference Between Article and Section Tag
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 a lot of work done on its engines, ex-V8 (Google), and 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 the server, but to make apps faster, the fat client is preferred.
- Use asynchronous calls, but many complex ecosystems of async calls & promises can lead to callback hell.
- Leverage multi-threading. Interesting!
Web Workers solve this issue by providing the capability of multi-threading in JavaScript.
Features available to WW
Due to the multi-threaded behavior, a WW only has 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 its multithreading advantage, i.e., it can't access:
- DOM elements
- window object
- document object
- parent object
For more details, visit HTML 5 Web Workers
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 are hidden by default. The header is visible and can be shown when the user clicks on the header portion of the <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 Details Tag in HTML5
Question 43: What is the figure tag in HTML 5?
Answer
A figure tag is useful to markup a photo in the document. It is used to specify the self-contained block, images, etc.
Its content belongs to the main document. But if we want to remove it, we can remove it independently, as it does not affect the rest of the document.
<!DOCTYPE html>
<html>
<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 Figure tag in HTML5
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 the Emphasized text element is <em>, which defines emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<p>Hi. This is Raj Kumar Beniwal Here (This is normal text) </p>
<p><em> Hi. This is Raj Kumar Beniwal Here (This is normal text) </em> </p>
</body>
</html>
Marked text – The syntax of the marked text element is <mark>, which defines marked or highlighted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<h2>Hi. This is <mark>Raj Kumar</mark> Beniwal Here. </h2>
</body>
</html>
Small text – The syntax of the small text element is <small>, which defines small text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<h1>Hi. This is <small>Raj Kumar</small> Beniwal Here. </h1>
</body>
</html>
Deleted text – The syntax of deleted text is <del>, which defines deleted or removed text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<h1>Hi. This is <del>Raj Kumar</del> Beniwal Here. </h1>
</body>
</html>
Inserted text – The syntax of the inserted text element is <ins>, which defines inserted or added text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<h1>Hi. This is Raj <ins>Kumar</ins> Beniwal here. </h1>
</body>
Subscripts text – The syntax of the subscripts text element is <sub>, which defines subscripted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<h1>Hi. This is <sub>Raj Kumar</sub> Beniwal here. </h1>
</body>
</html>
Superscript text– The syntax of the superscript text element is (sup>, which defines superscripted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML formatting element sample</title>
</head>
<body>
<h1>Hi. This is <sup>Raj Kumar</sup> Beniwal here. </h1>
</body>
</html>
For more details, visit HTML 5 Formatting Elements
Question 45: Why use IndexedDB instead of Web SQL in HTML 5?
Answer
This IndexedDB has been introduced with HTML5. This allows a user to store a 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 that helps the developers to do some database operations on 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 on the client side, you can use the storage mechanisms introduced in HTML5.
W3C has announced that Web SQL is obsolete and deprecated, hence it is not recommended to use Web SQL in your applications. Most 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 Introduction to IndexedDB
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 a 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:
Add the Modernize.js like we add any JavaScript file, as shown below:
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.
For more details, visit How to Use Modernizr
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:
- It helps the browser to draw shapes and images without any plugins.
- Used to draw graphics.
- It 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 the script |
Visual presentation created and modified programmatically through the script |
| Event model/user interaction is object-based at the level of primitive graphic elements, such 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 HTML5 SVG
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
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The first two letters specify the language (en). If there is a dialect, use two more letters (US).
For more details, visit Language attribute in HTML 5
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 for that reason, its more attractive for 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 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 process 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 are 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.
For more details, visit WebSocket API in HTML5
Question 50: What are HTML 5 Symbol Entities?
Answer
There is a wide category of HTML symbols for various purposes and applications:
- Mathematical operators
- Arrows
- Technical symbols
- Shapes
- Special Symbols, and so on
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:
For more details, visit HTML5 Symbol Entities
Question 51: What is a 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:
<template id="rowTemplate">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</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 a 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, assume the following HTML:
<table id="testTable">
<thead>
<tr>
<td>
ID
</td>
<td>
name
</td>
<td>
twitter
</td>
</tr>
</thead>
<tbody>
<!-- rows to be appended here -->
</tbody>
</table>
<!-- row template -->
<template id="rowTemplate">
<tr>
<td class="record"></td>
<td></td>
<td></td>
</tr>
</template>
Use the following to clone the new row and append it to the table in JavaScript:
// get tbody and row template
var t = document.querySelector("#testTabletbody"),
row = document.getElementById("rowTemplate");
// modify row data
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Sunny";
td[2].textContent = "@sunny_delhi";
// clone row and insert into table
t.appendChild(row.content.cloneNode(true));
For more details, visit Template Tag in HTML5
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" which means those don't follow the actual principle of HTML but still execute very well.
For example,
<html>
<head>
<title>
This is a bad HTML page
</title>
</head>
<body>
<h1>Bad HTML
<p> This is a web page that contain bad HTML.
</body>
</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 extensions.
- HTML is an SGML (Standard Generalized Markup Language) application.
Example
<html>
<head>
<title>This is an XHTML page </title>
</head>
<body>
<p> This is my first XHTML page
</body>
</html>
For more details, visit Difference Between XHTML and HTML
You can enhance your knowledge more, by reading the following articles.
More Interview Questions
Viknaraj ManogararajahPosted Jul 21, 2018, 9:55 AM
nice article, thank you for sharing
kzelda linkPosted Apr 23, 2017, 2:06 AM
Good , easy to learn with this method
Anoop Kumar SharmaPosted May 28, 2016, 6:56 AM
Nice Collection. Bookmarked!! :)
Prasham SabadraPosted May 28, 2016, 6:54 AM
Thanks for Sharing!!!
Ajay MalikPosted May 28, 2016, 4:47 AM
awesome
Munesh SharmaPosted May 27, 2016, 1:59 PM
good one
Sonu ChaudharyPosted May 27, 2016, 10:14 AM
nice share
Sonu ChaudharyPosted May 27, 2016, 10:12 AM
good one
Pradeep SahooPosted May 27, 2016, 9:57 AM
Nice collection
Ketak BhalsingPosted May 27, 2016, 7:56 AM
Helpful...
Karthik ElumalaiPosted May 27, 2016, 6:42 AM
Good one nitin. Very useful.
Muhammad Aqib ShehzadPosted May 27, 2016, 5:12 AM
nice compile list of HTML5 Q&A
Ajay MalikPosted May 27, 2016, 4:48 AM
nice sir ji....
Thiruppathi RPosted May 27, 2016, 1:29 AM
Great job Nitin.Thanks for the article..
Debasis SahaPosted May 26, 2016, 3:34 PM
Great collection of interview question... thanks for sharing..
Guest UserPosted May 26, 2016, 1:31 PM
Hm its not an article its mini book. Fantastic