HTML5 Interview Questions and Answers
HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages.It's actually three kinds of code:
- HTML, which provides the structure
- Cascading Style Sheets (CSS), which take care of presentation
DOCTYPE is short form of Document Type Declaration. it tells the web browser about the version of markup language in which a web page is written.
- Latest syntax for HTML5 document type is <!DOCTYPE html>.
- It is not a HTML tag but instruction to the web browser about the version of the HTML being used.
- It is not case sensitive
Doctype declaration in Html is too longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|DOCTYPE declaration in HTML5 is very simple "<!DOCTYPE html>|
character encoding in Html is also longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|character encoding (charset) declaration is also very simple <meta charset="UTF-8">|
|Audio and Video are not part of HTML4||Audio and Videos are integral part of HTML5 e.g. <audio> and <video> tags.|
|Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc||Vector graphics is an integral part of HTML5 e.g. SVG and canvas|
|It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.||JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)|
|Not possible to draw shapes like circle, rectangle, triangle.||Using HTML5 you can draw shapes like circle, rectangle, triangle.|
|Works with all old browsers||Supported by all new browser.|
- <article> - This tag defines an article.
- <aside> - It defines content other than the page content.
- <bdi> - This tag isolates a part of text for formatting in a different direction from other text.
- <command> - It defines a command button to be invoked by the user.
- <details> - It defines additional details that can be viewed or hidden by the user.
- <dialog> - It defines a dialog box.
- <figure> - This tag specifies content like illustrations, diagrams, photos, code listings, etc.
- <figcaption> - It is used to provide a caption for a <figure> element
- <footer> - This tag defines a footer for a document or section
- <header> - This tag is used to define a header for a document or section
- <hgroup> -When there are multiple levels in a heading, it groups a set of <h1> to <h6> elements.
- <mark> - It defines highlighted text.
- <meter> - It defines a scalar measurement within a known range.
- <nav> - It defines links for navigation.
- <progress> - This tag exhibits the progress of a task.
- <ruby> - It defines a ruby annotation for East Asian typography.
- <rt> - It defines an explanation/pronunciation of characters for East Asian typography.
- <rp> - This tag tells the system what to display in browsers that do not support ruby annotations.
- <section> - It defines a section in a document.
- <summary> - It provides a visible heading for a <details> element.
- <time> - This tag defines a date/time.
- <wbr> - This tag defines a line-break.
- Local storage.
- New form controls like calendar, date, time, email, URL and search etc.
- canvas element is provided for 2D drawing.
- video and audio elements for media playback.
- New elements are provided. For e.g. article, header, footer, nav, section.
HTML 5 has the capability to store data locally.
Previously it was done with the help of cookies.
Exciting thing about this storage is that its fast as well as secureThere are two different objects which can be used to store data.
- localStorage object stores data for a longer period of time even if the browser is closed.
- sessionStorage object stores data for a specific session.
|It persists data until we close the window or tab in which it was stored.||It persist data even if the window or tab is closed (but can be explicitly removed or expires).|
|Values stored in sessionStorage are not shared. These will be visible only to respective window or tab.||Values stored in localStorage are shared for all windows and tabs from same origin.|
|Maximum size is 5MB.||Maximum size for localStorage is more between 10-15MB.|
- localStorage.getItem(key): fetch an item from storage against provided key.
- localStorage.setItem(key, value): add an item to storage.
- localStorage.removeItem(key): removes an item from storage against provided key.
- localStorage.clear(): clearing the storage removing all items from it.
canvas is only a container for graphics you must need to write a script to draw graphics on web page.
HTML5 introduced the two graphical elements Canvas and SVG for creating rich graphics on the web, but they are fundamentally different
|Vector based (composed of Shapes)||Raster based (composed of Pixel)|
|Multiple graphical elements, which become the part of the DOM||Single HTML element similar to
|Modified through script and CSS||Modified through script only|
|Give better performance with smaller number of objects or larger surface, or both||Give better performance with smaller surface or larger number of objects, or both|
|Better scalability — can be printed with high quality at any resolution||Poor scalability — not suitable for printing on higher resolution|
SVG stands for Scalable Vector Graphics.
- SVG is used to define vector-based graphics for the Web
- SVG defines the graphics in XML format
- SVG graphics do NOT loose any quality if they are zoomed or resized
- Every element and every attribute in SVG files can be animated
- SVG is an W3C standard
- The window object
- The document object
- The parent object
The terminate() method of the Worker interface immediately terminates the Worker var myWorker = new Worker('worker.js'); myWorker.terminate();
Server-Sent Events allow a web page to get updates from a server.
HTML5 introduced a new concept Application Cache - means that a web application is cached, and accessible without an internet connection.
There are three advantages of Application Cache:
- Offline browsing - Users can use the application when they're offline
- Speed/Improve performance - Cached resources load faster
- Reduce HTTP request and server load - The browser will only download updated/changed resources from the server
The HTML5's application cache feature is supported in all major modern browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 10+.
A Manifest file is a simple text file that tells the browser what to cache and what not to cache.
To enable the application cache for an application, you must include the manifest attribute in the <html> element in your application's pages
There are three sections of a Manifest file:
- CACHE MANIFEST - Files listed here are cached after they are downloaded for the first time.
- NETWORK - Files listed here require a connection to the server, and are never cached.
- FALLBACK - Files listed here specify fallback pages if a page is inaccessible.