HTML 5 Interview Questions and Answers
1. What is Web Storage API in HTML 5
Web Storage is used to store the large amount of data from local user’s browser. Web Storage is a new HTML 5 API. There are 2 types of storage local storage and session storage. In Local Storage, the local Storage object stores the data for long time with no expiration date. Top JavaScript Questions & Answers
The data will not be deleted when the browser is closed, and will be available for long time with no expiration date. In Session Storage, the Session Storage object is same like local Storage object but it stores the data for only one session. The data is deleted when the user close the browser tab or refresh the browser tab.
Before HTML 5, We use the cookies to store the data but storage capacity up to 4 to 5 MB only and need every server request. After HTML 5, large amounts of data can be stored locally without affecting website performance. The Web storage is more secure and supports all major web browsers also.
Web Storage API Objects:
1. window.localStorage : Stores data with no expiration date.
2. window.sessionStorage : Stores data for one session.
2. What is web worker in HTML 5
A web worker is a piece of JavaScript code to run scripts in background without affecting the performance of the page. They are generally external script files that run in the background. Web Workers are the multi-threaded objects which can execute multiple JavaScript in parallel without affecting the performance of the application or web page.
Types of Web Workers:
Dedicated Workers
Shared Workers
Inline workers
Service Worker
3. What is the use of an iframe tag
An iframe is used to display a web page within another web page. In other words Iframe is used to embed another document within the current HTML document. It is an inline frame it supports Global Attributes and Event Attributes.
The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document including scrollbars & borders.
Syntax:
<iframe src=”URL” title=”description”> </iframe>
You can also change the size, color, style, width and height of the iframe’s border.
4. What is SVG in HTML 5
In HTML 5, SVG means Scalable Vector Graphics(SVG). It is an XML-based markup language for creating two-dimensional vector graphics with support for interactivity and animation.
The SVG images and their behaviors are defined in XML text files and the images can be written directly into the HTML document by using the <svg> </svg> tag.
You can also use an HTML<img>, <object>, <iframe> and <embed> elements to add SVG images to a web page.
SVG Advantages: Top 50 C Interview Questions
SVG is a Flexible W3C standard file format.
SVG images can be searched, indexed, scripted, and compressed.
SVG images can be manipulated using JS and CSS because they integrate into the DOM.
SVG do NOT lose any quality if they are zoomed or resized.
SVG files are pure XML.
SVG have a small file size and are highly scalable.
SVG can be accessible and animatable using JS and CSS.
SVG Lightweight Compared to other formats.
SVG can be printed at any resolution without a loss in image quality.
SVG do not need any unnecessary HTTP requests.
SVG is Easy to edit with an IDE or text editor.
SVG Disadvantages:
SVG Not fully cross-platform.
SVG does not work on legacy browsers like IE8 and below.
SVG images are very complex with thousands of objects it is sometimes more efficient to display as a jpg.
5. What is Canvas in HTML 5
It’s a Graphics API used to draw graphics on a web page using JavaScript. The <canvas> is a rectangular area on an HTML page. The canvas has no border and no content By default. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. The canvas has several methods for drawing boxes, circles, text, and images etc.
Canvas Advantages:
The Canvas is a two-dimensional rectangular area.You can use multiple <canvas> elements on one HTML page.
The Canvas can draw graphs and charts.
The Canvas Can Draw Text with or without animation.
The Canvas can be animate objects.
The Canvas can be interactive with JavaScript events.
The Canvas can be used in gaming applications.
The canvas element must have an id attribute. The width and height attribute is necessary to define the size.
To add a border, use a style attribute.
Canvas Example: <canvas id=”myCanvas” width=”100″ height=”100″></canvas>
6. What is the difference between DIV and SPAN in HTML 5
Both tags <div> and <span> are used to define parts of a web page.The div is a block-level element and span is an inline element.The div tag is used in HTML to make divisions of content on the web page like (text, images, header, footer, navigation bar, etc). Whereas, the span element is in-line and it is used to group the elements for structural and styling purposes.
Tag <div>
It is used for dividing the block-line elements
Used for CSS based HTML Layouts
Support align attribute and The div tag displayed in new line
Used to wrap a section
Nested div tag is used for HTML documents with different styles
Tag <span>
It is used for grouping inline elements
Used to stylize text
No align attribute and does not begin a new line
Wrap any particular word and to highlight it
Nested span tags will not be used for HTML documents
7. How to create a Hyperlink in HTML 5
To make a hyperlink in an HTML page, use the <a> and </a> tags, which creates a hyperlink that links one page to another page or between two sections or two different web pages or website templates. These tags can appear in any of the following ways:
Unvisited link – It is displayed, underlined and blue.
Visited link – It is displayed, underlined and purple.
Active link – It is displayed, underlined and red.
Syntax:
<a href=”url”> Display text </a>
8. What is <meta> Tag in HTML 5
The <meta> tag in HTML provides important information about HTML Document that means page description, expiry date, author of the template, character set, keywords and many more. Meta tags are used for search engine optimization to tell the search engine about the page contents and it only has an opening tag, no closing tag. The search engines are like Google, Microsoft search for this meta tag in order to understand the information provided by the website.
Syntax:
<meta attribute-name=”value”>
9. In how many ways can we specify the CSS Styles for the HTML element
There are three ways we can specify the styles for HTML elements:
Inline: An inline CSS style is used to apply a unique style to a single HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag.
Internal: An internal CSS style is used to define a style for a single HTML page. You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags.
External: An external CSS style sheet is used to define the style for many HTML pages. you can change the look of an entire website by changing just one file as it defines the style for multiple HTML pages.
10. How do you insert a copyright symbol on a page
To insert the copyright symbol, you need to type © or & #169; in an HTML file.
11. Does a hyperlink apply to text only
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.
Types of Hyperlinks:
Text hyperlink: To take visitors to another page.
Image hyperlink: To take visitors to another page.
Bookmark hyperlink: To take visitors to another page
12. What are applets in HTML 5
Applets are small programs that can be embedded within web pages to perform some specific functionality, such as computations, animations, and information processing.
13. What is the Geolocation API in HTML 5
HTML5 Geolocation API is used to share the physical location of the client with websites. This works with a new property of the global navigator object and most of the modern browsers support this.
A JavaScript can capture latitude and longitude and can be sent to backend web server. It means finding local businesses or showing your location on a map. The geolocation object is a service object that allows widgets to retrieve information about the physical location of the device. Today most of the browsers and mobile devices support Geolocation API.
Geolocation API Methods:
1. getCurrentPosition()
2. watchPosition()
3. clearWatch()
Tags: #HTML 5 #CSS 3 #JavaScript #Type Script #PHP #Angular #Bootstrap #Type Script
*Disclaimer: We have published the above images and information for reference purpose only, for any changes on the content we refer to visit the Official Website to get the latest info.
NOTE: Naukri9.Com Employees will not call any candidates towards Job Offer or Job assistance. We never charge any candidates for Jobs. Please be aware of fraudulent Calls or Emails.