Html5 Interview Question
HTML5 Interview Questions
HTML5 Interview Question for Freshers
What is HTML5 ?
HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages.
Why do we use HTML5 ?
The main benefit of HTML5 is that it supports Drawing, Animation, Video and Audio.
Explain some new features in HTML5?
- Introducing Web Workers
- Storage and Caching
- Added new semantic tags <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
- New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>
- Extensions to the JavaScript API such as geolocation and drag-and-drop.
What does DOCTYPE mean ?
The term DOCTYPE tells the browser which type of HTML is used on a webpage. In turn, the browsers use DOCTYPE to determine how to render a page.
How to write DOCTYPE in HTML5
Syntax
<!DOCTYPE html>
How to Declare character encoding in HTML5 ?
Syntax
<meta charset="UTF-8">
Explain Header Tag
The <header> element is used to contain introductory and navigational information about a web page. This can include the section heading, the author's name, time and date of publication, table of contents, or other navigational information.
explain Article tag
The <article> element is contain independently contents of the page without losing it's meaning. For examples Individual blog posts or news stories.
explain Section tag
The
Explain Footer tag
The <footer> element is used to hold information that appear at the end of a web page. It contain Author's name, copyright information, and related links.
What are web workers ?
A web worker is a script that runs in the background without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background.
Difference between Html and Html5
Html5 is latest version of Html it is very simple and easy to use. Some important Difference Between Html and Html5 are given below;
| Html | Html5 |
|---|---|
| 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 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) |
| Does not allow JavaScript to run in browser. JS runs in same thread as browser interface. | Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5 |
| Works with all old browsers | Supported by all new browser. |
Give Syntax for HTML5 comment
Syntax
<!-- Insert comment here. -->
Can a web page contain multiple <header> elements ?
Yes
Can a web page contain multiple <footer> elements ?
Yes
What is the Geolocation API in HTML5 ?
In HTML5 Geolocation API are used for share user physical location with chosen web sites. JavaScript can capture a user's latitude and longitude and can send it to the back-end web server to enable location-aware features like finding local businesses or showing their location on a map.
Today, most browsers and mobile devices support the Geolocation API. The Geolocation API works with a new property of the global navigator object. Syntax for create Geolocation object.
Syntax
var geolocation = navigator.geolocation;
What are the new image elements in HTML5 ?
Canvas and WebGL. <Canvas> is a new element that acts as a container for graphical elements like images and graphics.
What is the difference between SVG and <Canvas> ?
<Canvas> is an element that manipulates two-dimensional (2D) pixels while Scalable Vector Graphics works in 2D and three-dimensional (3D) vectors.
What are some new input attributes in HTML5 ?
There are many new form elements including in HTML5 they are;
- datalist
- datetime
- output
- keygen
- date
- month
- week
- time
- number
- range
- url
What are difference between cookies, sessionStorage, and localStorage ?
Cookies are small text files that websites place in a browser for tracking or login purposes. localStorage and sessionStorage are new objects, both of which are storage specifications but vary in scope and duration. localStorage is permanent and website-specific whereas sessionStorage only lasts as long as the duration of the longest open tab.
What are new API's comes with HTML5 ?
Lots of new API's Comes with HTML5 those are given below;
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
Explain difference between span and div
The main difference between span and div is; span gives the output with display: inline and div gives the output with display: block. span is used when we need our elements to be shown in a line, one after the other.
What happen when you not specify a doctype in an HTML page ?
New HTML5-specific tags will not be interpreted by the browser.
What is the difference in caching between HTML5 and the old HTML ?
An important feature of HTML5 is the Application Cache. It creates an offline version of a web application. and stores website files such as HTML files, CSS, images, and JavaScript, locally. This feature speed up website performance.
What are new media tag in HTML5 ?
<audio> and <video> tags
What is datalist in HTML 5 ?
Datalist element in HTML 5 helps to provide autocomplete feature in a textbox as shown below.
Syntax
<input list="Course"> <datalist id="Course"> <option value="MBA"> <option value="B.Tech"> <option value="BCA"> <option value="MCA"> <option value="MBBS"> </datalist>
Output
What are the different new form element types in HTML 5 ?
Following new form elements introduced in HTML 5;
- Color
- Date
- Datetime-local
- Time
- Url
- Range
- Telephone
- Number
- Search
How to Use color picker dialog box in Html5 ?
Syntax
<input type="color" name="favcolor">
Output
How to Use calendar dialog box in Html5 ?
Syntax
<input type="date" name="bday">
Output
Choose Date:
How to Use calendar with local time in Html5 ?
Syntax
<input type="datetime-local" name="bdaytime">
Output
Choose Date: