Here we have mentioned most frequently asked HTML5 Interview Questions and Answers specially for freshers and experienced.
1. What is HTML?
Ans:
HTML is short for HyperText Markup Language and is the language of the World Wide Web. It is the standard text formatting language used for creating and displaying pages on the Web. HTML documents are made up of two things: the content and the tags that format it for proper display on pages.
2. What are tags?
Ans:
Content is placed in between HTML tags in order to properly format it. It makes use of the less than symbol (<) and the greater than symbol (>). A slash symbol is also used as a closing tag. For example:
sample
3. Do all HTML tags come in a pair?
Ans:
No, there are single HTML tags that do not need a closing tag. Examples are the tag and
tags.
4. What are some of the common lists that can be used when designing a page?
Ans:
You can insert any or a combination of the following list types:
– ordered list
– unordered list
– definition list
– menu list
– directory list
Each of this list types makes use of a different tag set to compose
5. How do you insert a comment in HTML?
Ans:
Comments in HTML begins with “<!–“nd ends with “–>”. For example:
<!-- A SAMPLE COMMENT -->
6. Do all character entities display properly on all systems?
Ans:
No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.
7. What is an image map?
Ans:
Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.
8. What is the advantage of collapsing white space?
Ans:
White spaces are a blank sequence of space characters, which is treated as a single space character in HTML. Because the browser collapses multiple spaces into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the HTML code into a much more readable format.
9. Can attribute values be set to anything or are there specific values that they accept?
Ans:
Some attribute values can be set to only predefined values. Other attributes can accept any numerical value that represents the number of pixels for a size.
10. How do you insert a copyright symbol on a browser page?
Ans:
To insert the copyright symbol, you need to type © or & #169; in an HTML file.
11. How do you create links to sections within the same page?
Ans:
Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.
12. Is there any way to keep list elements straight in an HTML file?
Ans:
By using indents, you can keep the list elements straight. If you indent each subnested list in further than the parent list that contains it, you can at a glance determine the various lists and the elements that it contains.
13. If you see a web address on a magazine, to which web page does it point?
Ans:
Every web page on the web can have a separate web address. Most of these addresses are relative to the top-most web page. The published web address that appears within magazines typically points this top-most page. From this top level page, you can access all other pages within the website.
14. What is the use of alternative text in image mapping?
Ans:
When you use image maps, it can easily become confusing and difficult to determine which hotspots correspond to which links. Using alternative text lets, you put a descriptive text on each hotspot link.
15. Do older HTML files work on newer browsers?
Ans:
Yes, older HTML files are compliant to the HTML standard. Most older files work on the newer browsers, though some features may not work.
16. Does a hyperlink apply to text only?
Ans:
No, hyperlinks can be used in the text as well as images. That means you can convert an image into a link that will allow users to link to another page when clicked. Surround the image within the … tag combinations.
17. If the user’s operating system does not support the needed character, how can the symbol be represented?
Ans:
In cases wherein their operating system does not support a particular character, it is still possible to display that character by showing it as an image instead.
18. How do you change the number type in the middle of a list?
Ans:
The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.
19. What are style sheets?
Ans:
Style sheets enable you to build consistent, transportable, and well-defined style templates. These templates can be linked to several different web pages, making it easy to maintain and change the look and feel of all the web pages within site.
20. State bullet types available in HTML
Ans:
With ordered lists, you can select to use some different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.
21. How do you create multicolored text in a webpage?
Ans:
To create text with different colors, use the … tags for every character that you want to apply color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.
22. Why are there both numerical and named character entity values?
Ans:
The numerical values are taken from the ASCII values for the various characters, but these can be difficult to remember. Because of this, named character entity values were created to make it easier for web page designers to use.
23. Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50
Ans:
<table>
<tr>
<td>50 pcs</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>10 pcs</td>
<td>5</td>
<td>50</td>
</tr>
</table>
24. What is the advantage of grouping several checkboxes together?
Ans:
Although checkboxes don’t affect one another, grouping checkboxes together help to organize them. Checkbox buttons can have their name and do not need to belong to a group. A single web page can have many different groups of checkboxes.
25. What will happen if you overlap sets of tags?
Ans:
If two sets of HTML tags are overlapped, only the first tag will be recognized. You will find this problem when the text does not display properly on the browser screen.
26. What are applets?
Ans:
Applets are small programs that can be embedded within web pages to perform some specific functionality, such as computations, animations, and information processing. Applets are written using the Java language.
27. What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the HTML file?
Ans:
If there is no text between the tags, then there is nothing to format. Therefore no formatting will appear. Some tags, especially tags without a closing tag like the tag, do not require any text between them.
28. Is it possible to set specific colors for table borders?
Ans:
You can specify a border color using style sheets, but the colors for a table that does not use style sheets will be the same as the text color.
29. How do you create a link that will connect to another web page when clicked?
Ans:
To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this is:
<a href=”site”>text</a>
Replace “site” with the actual page URL that is supposed to be linked to when the text is clicked.
30. What other ways can be used to align images and wrap text?
Ans:
Tables can be used to position text and images. Another useful way to wrap text around an image is to use style sheets.
31. Can a single text link point to two different web pages?
Ans:
No. The <a> tag can accept only a single href attribute, and it can point to only a single web page.
32. What is the difference between the directory and menu lists and the unordered list?
Ans:
The key difference is that the directory and menu lists do not include attributes for changing the bullet style.
33. Can you change the color of bullets?
Ans:
The bullet color is always the same as that of the first character in the list item. If you surround the <li> and the first character with a set of <font> tags with the color attribute set, the bullet color, and the first character will be a different color from the text.
34. What are the limits of the text field size?
Ans:
The default size for a text field is around 13 characters. However, if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. If the size attribute is set to 0, the size will be set to the default size of 13 characters.
35. Dotags always need to come at the start of a row or column?
Ans:
Any <tr> tag can be changed to a <th> tag. This causes the text contained within the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly used for headings, they do not need to be used exclusively for headings.
36. What is the relationship between the border and rule attributes?
Ans:
Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Likewise, If the border attribute is not included, a default 1-pixel border appears if the rules attribute is added to the <table> tag.
37. What is a marquee?
Ans:
A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the and tags.
38. How do you create text on a webpage that will allow you to send an email when clicked?
Ans:
<A HREF=”mailto:youremailaddress”>text to be clicked</A>
39. Are tags the only way to separate sections of text?
Ans:
No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text.40. Are there instances where the text will appear outside of the browser?
Ans:
By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.
41. How are active links different from normal links?
Ans:
The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.
42. Do style sheets limit the number of new style definitions that can be included within the brackets?
Ans:
Style sheets do not limit the number of style definitions that can be included within the brackets for a given selector. Every new style definition, however, must be separated from the others by a semicolon symbol.
43. Can I specify fractional weight values such as 670 or 973 for font weight?
Ans:
Implementation largely depends on the browser, but the standard does not support fractional weight values. Acceptable values must end with two zeroes.
44. What is the hierarchy that is being followed when it comes to style sheets?
Ans:
If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
45. Can several selectors with class names be grouped together?
Ans:
You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names.
46. What happens if you open the external CSS file in a browser?
Ans:
When you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using tag within another HTML document.
47. How do you make a picture into a background image of a web page?
Ans:
To do this, place a tag code after the tag as follows:
<body background = “image.gif”>
Replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.
48. What happens if the list-style-type property is used on a non-list element like a paragraph?
Ans:
If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph.
49. When is it appropriate to use frames?
Ans:
Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.
50. What happens if the number of values in the rows or cols attribute doesn’t add up to 100 percent?
Ans:
The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200% the browser displays two vertical frames with the second being twice as big as the first.
51. Which browsers support HTML5?
Ans:
The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the HTML5 features.
52. Name two new tags included in the HTML 5
Ans:
<Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a replacement for Flash, Silverlight, and similar technologies to play multimedia items.
53. Do you know which are two semantic tags are included in HTML5 version?
Ans:
The <article> and <section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole.
54. What is <figure> in HTML5?
Ans:
This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference the main flow of the document.
55. What is the use of Canvas element?
Ans:
The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them directly into HTML5 code.
56. What are the new FORM elements which are available in HTML5?
Ans:
The new Form elements in HTML5 offers much better functionality than the earlier versions.
The tags given provided to carry out these functions are:
<datalist> – This tag is use to specify a list of options for input controls.
<keygen> – This tag represents a key-pair generator field.
<output> – It represents the result of any scripting calculation.
57. Tell me two benefits of HTML5 Web Storage
Ans:
Two main benefits of HTML5 Web Storage:
It can store up to 10 MB data which is certainly more than what cookies have.
Web storage data cannot be transferred with the HTTP request. It helps to increase the performance of the application.
58. What are two types of Web Storage in HTML5?
Ans:
Two storage types of HTML5 are:
Session Storage:
It stores data of current session only. It means that the data stored in session storage clear automatically when the browser is closed.
Local Storage:
Local storage is another type of HTML5 Web Storage. In local storage, data is not deleted automatically when the current browser window is closed.
59. What is the Application Cache in HTML5 and why it is used?
Ans:
The Application Cache concept means that a web application is cached. It can be accessible without the need for internet connection.
Some advantages of Application Cache:
Offline browsing – Web users can also use the application when they are offline.
Speed – Cached resources load quicker
Reduce the server load – The web browser will only download updated resources from the server.
60. Explain five new input types provided by HTML5 for forms?
Ans:
Following are the important, new data types offered by HTML5:
Date: It allows the user to select a date.
datetime-local: This input type allows the user to select a date and time without time zone.
datetime: This input type allows the user to select a date and time with time zone.
month: It enables the user to select a month and year
email: These input fields used to contain an e-mail address.
61. What is fallback in Application cache?
Ans:
<a name="WhatisfallbackinApplicati>FALLBACK:
/home/ /homeoffline.html </a></pre>
<h2><a name=" whatisfallbackinapplicati=""></a>
62. What are the new features provided in HTML5?
Ans:
Some of the new features provided in HTML5 are:
1. It provides support for local storage
2. New form controls, like calendar, date, time, email, url, search
3. <canvas> element is provided to facilitate 2D drawing
4. The <video> and <audio> elements are provided for media playback
5. New content-specific elements are provided. For e.g. <article>, <header>, <footer>, <nav>, <section>
63. Tell us something about the new <canvas> element.
Ans:
The new <canvas> element provided by HTML5 aids in 2D drawing.
It uses the tag <canvas>.
This tag helps in drawing graphics through scripting usually JavaScript.
64. What are the various elements provided by HTML5 for media content?
Ans:
<audio> and <video> elements are provided by HTML5 for media playback.
The tags used are:
1) <audio> – It defines sound content.
2) <video> – It defines a video or a movie.
3) <source> – This tag defines the multiple media resources for <video> and <audio>.
4) <embed> – It provides a container for an external application or interactive content.
5) <track> – It defines text tracks for <video> and <audio>.
65. What are the new Form elements made available in HTML5?
Ans:
The new Form elements in HTML5 provide for a better functionality. The tags provided to carry out these functions are:
1) <datalist> – It specifies a list of options for input controls. These options are pre-defined.
2) <keygen> – This tag defines a key-pair generator field.
3) <output> – It defines the result of a calculation.
66. What are the various tags provided for better structuring in HTML5?
Ans:
1) <article> – This tag defines an article.
2) <aside> – It defines content other than the page content.
3) <bdi> – This tag isolates a part of text for formatting in a different direction from other text.
4) <command> – It defines a command button to be invoked by the user.
5) <details> – It defines additional details that can be viewed or hidden by the user.
6) <dialog> – It defines a dialog box.
7) <figure> – This tag specifies content like illustrations, diagrams, photos, code listings, etc.
8) <figcaption> – It is used to provide a caption for a <figure> element
9) <footer> – This tag defines a footer for a document or section
10) <header> – This tag is used to define a header for a document or section
11) <hgroup> – When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.
67. What are the another tags provided for better structuring in HTML5?
Ans:
68. Which elements of HTML 4.01 are no more a part of HTML5?
Ans:
Following elements of HTML 4.01 are no more a part of HTML 5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
69. What is SVG?
Ans:
1. SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
2. It is used to define vector-based graphics for the Web.
3. The graphics are defined in XML format.
4. An important quality of SVG graphics is that their quality is maintained even when they are zoomed or resized.
5. All the element and attributes of SVG files can be animated.
70. What are the advantages of SVG over other image format like JPEG or GIF?
Ans:
Following are the main advantages of using SVG over other image formats:
– It is possible to scale the SVG images.
– They can be created and edited with any text editor.
– The print quality of these image is high at any resolution.
– It is possible to zoom the SVG images without any degradation in the quality.
– SVG images can be searched, indexed, scripted, and compressed.
71. Differentiate between Canvas and SVG.
Ans:
The table below shows some important differences between Canvas and SVG:
– Canvas is resolution dependent while SVG is not.
– Canvas does not provide any support for event handlers while SVG does.
– Canvas is suitable for graphic-intensive games while SVG is not suitable for gaming.
– Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.
72. What is a Canvas? What is the default border size of a canvas?
Ans:
Canvas is a rectangular area on a HTML page, specified with the tag <canvas>.
By default, a canvas has no border. To get a border on the canvas, a style attribute is required to be used.
73. Which methods are used to draw a straight line on a Canvas?
Ans:
Following methods are used to draw a straight line on a Canvas:
1. moveTo(x,y) – It defines the starting co-ordinates of the line.
2. lineTo(x,y) – It defines the ending co-ordinates of the line.
3. The actual line is drawn with the help of a method like stroke()
74. What are gradients in Canvas used for? What are their different types?
Ans:
Gradients in canvas are used to fill rectangles, circles, lines etc.
The gradients in Canvas are of two types:
1. createLinearGradient(x,y,x1,y1) – It creates a linear gradient
2. createRadialGradient(x,y,r,x1,y1,r1) – It creates a radial/circular gradient
75. Which method is used to draw an image on the canvas?
Ans:
drawImage(image,x,y) method is used to draw an image on the canvas.
76. HTML5 provides drag and drop facility. How do you make an image draggable?
Ans:
To make an image draggable, the draggable attribute is set to true:
Can HTML5 get the geographical position of a user?
– Yes, HTML5 can get the location of a user with the use of Geolocation API.
– Use getCurrentPosition() method to get the user’s current position.
77. What are the audio tags provided by HTML5?
Ans:
HTML5 provides following audio tags:
<audio> - Defines sound content
<source> - Defines multiple media resources for media elements, such as <video> and <audio>
78. What are the new input types provided by HTML 5 for forms?
Ans:
Following are the important, new input types for forms provided by HTML 5:
1. color – Used for fields that should contain colour.
2. date – Allows the user to select a date.
3. datetime – Allows the user to select a date and time (with time zone).
4. datetime-local – Allows the user to select a date and time (without time zone).
5. email – Used for input fields that should contain an e-mail address.
6. month – Allows the user to select a month and year.
7. number – Used for input fields that should contain a numeric value. Restrictions on type of numbers accepted can be set.
8. range – Used for input fields that should contain a value from a range of numbers. Restrictions on type of numbers accepted can be set here as well.
9. search – Used for search fields.
10. tel – Defines a field for entering a telephone number.
11. time – Allows the user to select a time.
12. url – Used for input fields that should contain a URL address.
13. week – Allows the user to select a week and year.
79. What is HTML5 Web Storage?
Ans:
With HTML5, it is possible for the web pages to store the data locally in the user’s browser. This web storage is much faster and secured than the cookies. Also, a larger amount of data can be stored without causing any adverse effect to the performance of the website.
The data here is not included with every server request. It is used ONLY when it is asked for. It is only that particular web page that can access the data stored by itself.
Differentiate between localStorage and sessionStorage objects.
– localStorage object stores the data without an expiry date while sessionStorage object stores the data only for one session.
– With localStorage object, data will not be deleted when the browser window is closed while the data is deleted when the browser window closes with sessionStorage objects.
80. What is the concept of Application Cache in HTML5? What are its advantages?
Ans:
The Application Cache concept introduced by HTML5 means that a web application is cached, and accessible without an internet connection.
There are three advantages of Application Cache:
1. Offline browsing – Users can use the application when they’re offline
2. Speed – Cached resources load faster
3. Reduced server load – The browser will only download updated/changed resources from the server
81. What is a Manifest file?
Ans:
A Manifest file is a simple text file that tells the browser what to cache and what not to cache.
There are three sections of a Manifest file:
1) CACHE MANIFEST – Files listed here are cached after they are downloaded for the first time.
2) NETWORK – Files listed here require a connection to the server, and are never cached.
3) FALLBACK – Files listed here specify fallback pages if a page is inaccessible.
82. What is a Web Worker?
Ans:
1. A web worker is a JavaScript which runs in the background. It exists in external files.
2. It is independent of other scripts and does not affect the performance of the page.
3. Web workers are usually used for CPU intensive tasks.
83. Which JavaScript objects are not accessible to web worker?
Ans:
Following JavaScript objects are not accessible to web worker:
1. The window object
2. The document object
3. The parent object
84. What are the new attributes provided in HTML5 for <form>?
Ans:
The new attributes provided in HTML5 for
85. What are the new attributes provided in HTML5 for <input>?
Ans:
Following are the new attributes provided in HTML5 for <input>
1) autofocus:
This is a Boolean attribute.
When present, it means that an <input> element should automatically get focus when the page is loaded.
2) form:
This attribute specifies one or more forms an <input> element belongs to.
3) formaction:
This attribute specifies the URL of a file that will process the input control when the form is submitted.
This attribute is used with type=”submit” and type=”image”.
It overrides the action attribute of the <form> element.
4) formenctype:
This attribute specifies how the form-data should be encoded when submitting it to the server.
It is used with type=”submit” and type=”image”.
It overrides the enctype attribute of the <form> element.
5) formmethod:
It defines the HTTP method for sending form-data to the action URL.
It is used with type=”submit” and type=”image”.
It overrides the method attribute of the <form> element.
6) formnovalidate:
It is a boolean attribute.
It specifies that the <input> element should not be validated when submitted.
It is used with type=”submit”.
It overrides the novalidate attribute of the <form> element.
7) formtarget:
It specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
It is used with type=”submit” and type=”image”.
8) height and width:
It specifies the height and width of an <input> element.
It is used only with <input type=”image”>
9) list:
It refers to a <datalist> element which contains pre-defined options for an <input> element.
10) min and max:
It specifies the minimum and maximum value for an <input> element.
It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
11) Multiple:
It is a boolean attribute.
It specifies that the user is allowed to enter more than one value in the <input> element.
It works with the following input types: email and file.
12) pattern:
It specifies a regular expression that the <input> element’s value is checked against.
It works with the following input types: text, search, url, tel, email, and password.
13) placeholder:
It specifies a short hint that describes the expected value of an input field.
It works with the following input types: text, search, url, tel, email, and password.
14) required:
It is a boolean attribute.
It specifies that an input field must be filled out before submitting the form.
15) step:
It specifies the legal number intervals for an <input> element.
It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
86. Discuss the differences between an HTML specification and a browser’s implementation thereof.
Ans:
HTML specifications such as HTML5 define a set of rules that a document must adhere to in order to be “valid” according to that specification. In addition, a specification provides instructions on how a browser must interpret and render such a document.
A browser is said to “support” a specification if it handles valid documents according to the rules of the specification. As of yet, no browser supports all aspects of the HTML5 specification (although all of the major browser support most of it), and as a result, it is necessary for the developer to confirm whether the aspect they are making use of will be supported by all of the browsers on which they hope to display their content. This is why cross-browser support continues to be a headache for developers, despite the improved specificiations.
In addition, while HTML5 defines some rules to follow for an invalid HTML5 document (i.e., one that contains syntactical errors), invalid documents may contain anything, and it is impossible for the specification to handle all possibilities comprehensively. Thus, many decisions about how to handle malformed documents are left up to the browser.
87. Can a web page contain multiple elements? What about elements?
Ans:
Yes to both. In fact, both the and tags are designed to serve their respective purposes in relation to whatever their parent “section” may be. So not only can the page contain a header and a footer, but so can every and element. In fact, a should be present for all of these, although a is not always necessary.
88. What is HTML5 Web Storage? Explain localStorage and sessionStorage.
Ans:
With HTML5, web pages can store data locally within the user’s browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for.
The data is stored in name/value pairs, and a web page can only access data stored by itself. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
The difference between localStorage and sessionStorage involves the lifetime and scope of the storage.
Data stored through localStorage is permanent: it does not expire and remains stored on the user’s computer until a web app deletes it or the user asks the browser to delete it. SessionStorage has the same lifetime as the top-level window or browser tab in which the script that stored it is running. When the window or tab is permanently closed, any data stored through sessionStorage is deleted.
Both forms of storage are scoped to the document origin so that documents with different origins will never share the stored objects. But sessionStorage is also scoped on a per-window basis. If a user has two browser tabs displaying documents from the same origin, those two tabs have separate sessionStorage data: the scripts running in one tab cannot read or overwrite the data written by scripts in the other tab, even if both tabs are visiting exactly the same page and are running exactly the same scripts.
89. What’s one main result if you do not specify a doctype in an HTML page?
Ans:
New HTML5-specific tags will not be interpreted by the browser.
90. Why do we use HTML5?
Ans:
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.
91. What is the use of Drag and Drop in HTML5?
Ans:
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:
92. What is HTML 5 Web Storage?
Ans:
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:
- It can store 5 to 10 MB data. That is far more than what cookies have.
- 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:
sessionStorage.getItem('someKey');
//returns 'someValue'
sessionStorage.someKey;
//returns 'someValue' 93. What are the media elements in HTML 5?
Ans:
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
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.
94. What are the HTML tags which deprecate in HTML5?
Ans:
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:
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 |
95. What is the use of Scalable Vector Graphics (SVG) in HTML5?
Ans:
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 |
96. What is the use of cite tag in HTML5?
Ans:
The 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 tag is an inline tag that indicates “defining a citation”. The text within the 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 tags.
In HTML5 , the tag defines the cited title of a work whereas HTML 4.01 implied that the tag can be used to indicate the name of a person.
Declaring Syntax
Some Text Here
Browser support
The tag is supported in all major browsers (e.g. Internet Explorer, Google Chrome, Mozilla Firefox. Safari, etc ).
97. What are Waves in HTML?
Ans:
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:
- 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 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.
98. What is Web SQL Database in HTML 5?
Ans:
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]’)99. What is HTML5 Contenteditable Attribute?
Ans:
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” |
100. What is Vibration API in HTML5?
Ans:
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,
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 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 1000 milliseconds.
101. What is the Battery Status API in HTML5?
Ans:
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.
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 in the scale of 0 – 1.0. The default value is 1.0.
102. What are Web Workers APIs in HTML 5?
Ans:
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.
103. What are the advantages and limitations of HTML5 Web Worker
Ans:
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
104. Why to use IndexedDB instead of Web SQL in HTML 5?
Ans:
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
105. What is the difference between Canvas and SVG elements?
Ans:
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
- 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 |
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. |
With thanks! Valuable information!