Thursday, 26 April 2018

HTML5 Interview Questions

Question 1: What is HTML5?

Answer: HTML5 is the latest version of HTML and XHTML with new features like Drawing, Animation, Video and Audio etc. It is used to solve some common structural problems encountered with HTML 4.1. It gives more flexibility to both the web developers, the 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 video on the web-pages without using any special software like Flash. HTML5 is developed in such a way that the developers are not required to waste their time and efforts in creating an error free web page. Firefox, Chrome, Opera, Safari and Internet Explorer all support <! doctype html>.

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; basically 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, circle, boxes, text and graphic images.
  • Canvas
A canvas is a rectangular area on 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 canvas are:
  • SVG is scalable, provides the facility of auto scaling icon, logo and chart.
  • 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.

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 that comes with the HTML 5 specification. By using this <datalist> tag, we can define a list of data and then we can bind it with an <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 which depends on the input string or a 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>  

Question 4: What is HTML 5 Web Storage?

Answer:  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:
  1. It can store 5 to 10 MB data. That is far more than what cookies have.
  2. 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'  

Question 5: 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 sound like .mp3, wav, and .ogg. I have used five types of sound formats to show which formats are compatible for the browsers. A WAV file is a common sound format that is supported by most browser versions.
Syntax
<audio src="URL" controls> </audio>
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 right away.
autoplay
This is Boolean attribute indicate whether or not the file should start playing audio as soon as it can.
loop
This Boolean attribute indicates whether or not apply repetition on playing audio.
src
This attribute is used to specify the URL (location of the audio file) of the audio to show.
controls
This Boolean attribute specify 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


Question 6: 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. Video tag is used to add video or media files in 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 music video or a movie on your web page for the visitor to listen and watch it.
HTML5 video tag accepts the attribute that specifies how the video should be played. You can write content in <video> tag. as <video> tag always occur in pair. Any content between opening and closing tag is "fallback content". This content is displayed only by those browsers that does not support video tag. Now, most of the video files are shown by 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
Video will start playing automatically.
autobuffer
autobuffer
Video will start buffering automatically.
loop
loop
Video automatically start over again when done.
controls
controls
In order to show the controls.
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.

Question 7: What are the media elements in HTML 5?

Answer: 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 <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 we can say plug-ins for the Applications.

8. What are the features of HTML5 Canvas?

  • Flexibility
  • Interactivity
  • Multimedia Options
  • Animation
  • Platform Support
  • Free and Accessible Dev Tools
  • Code Once, Run Everywhere

Question 9: What is the use of 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 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>  

Question 10: What are the HTML tags which deprecate 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 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. 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

Question 11: What is Application Cache in HTML5?

Answer: Yet HTML5 has many new special elements and attributes but one of the best feature of HTML5 is "Application Cache", that enables us to make a offline session of a web application. It allows to fetch few or all the content of a website such as HTML files, Images, JavaScript, CSS ...etc. This features speeds up the site performance. This is achieved with the help of a file, defined as follows:
  • <! doctype html>  
  • <html manifest="example.appcache">  
  •    ....  
  •    ....  
  •    .....  
  • </html>  

Question 12: What is a meter tag? What is the difference between 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, the fraction of a voting population to have selected a specific candidate.
Difference between progress tag and 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 a dynamic data whereas a meter tag represents a static data.
Note:
  1. According to the W3C, the meter tag should not be used to indicate progress as to indicate the progress, we have the progress tag.
  2. 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 and so on.
<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 that what measurements value is the best value

Question 13: What is the use of Scalable Vector Graphics (SVG) in HTML5?

Answer: 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

14. 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 ).

Question 15: What are Waves in HTML?

Answer: 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:
  1. The sine wave is blue whenever the value is positive.
  2. The sine wave is red whenever the value is red.
  3. 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.

More about HTML5:

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)