HTML 5 introduced several new features including local storage, new form controls, the <canvas> element for 2D drawing, <video> and <audio> elements for media playback, and new semantic elements like <article>, <header>, and <footer>. It also provides the canvas element for 2D drawing using JavaScript and elements like <audio> and <video> for media playback. HTML 5 also introduced new form controls, structural elements, and ways to integrate multimedia like providing drag and drop functionality and accessing a user's geographical position.

1. HTML 5 Viva questions
What are the new features provided in HTML5?
Some of the new features provided in HTML5 are:
•It provides supportfor local storage
•New form controls,like calendar,date, time,email,url,search
•<canvas> elementis provided to facilitate 2D drawing
•The <video> and <audio> elements are provided for media playback
•New content-specific elements are provided.For e.g. <article>, <header>,<footer>, <nav>, <section>
HTML interview questions and answers
2. Tell us something about the new <canvas> element.
- The new <canvas> elementprovided by HTML 5 aids in 2D drawing.
- It uses the tag <canvas>.
- This tag helps in drawing graphics through scripting usuallyJavaScript.
3. What are the various elements provided by HTML 5 for media content?
<audio> and <video> elements are provided by HTML5 for media playback.
The tags used are:
a.) <audio> - It defines sound content.
b.) <video> - It defines a video or a movie.
c.) <source> - This tag defines the multiple media resources for <video> and <audio>.
d.) <embed> - It provides a container for an external application or interactive content.
e.) <track> - It defines text tracks for <video> and <audio>.
4. What are the new Form elements made available in HTML5?
The new Form elements in HTML5 provide for a better functionality. The tags provided to carry out these functions are:
a.) <datalist> - It specifies a listof options for inputcontrols.These options are pre-defined.
b.) <keygen> - This tag defines a key-pair generator field.
c.) <output> - It defines the resultof a calculation.
5. What are the various tags provided for better structuring in HTML5?
The various tags provided for better structuring in HTML 5 are:
a.) <article> - This tag defines an article.
b.) <aside> - It defines contentother than the page content.
c.) <bdi> - This tag isolates a part of text for formatting in a different direction from other text.
d.) <command> - It defines a command button to be invoked by the user.
e.) <details> - It defines additional details thatcan be viewed or hidden by the user.
f.) <dialog> - It defines a dialog box.
g.) <figure> - This tag specifies contentlike illustrations,diagrams,photos,code listings,etc.
h.) <figcaption> - It is used to provide a caption for a <figure> element
i.) <footer> - This tag defines a footer for a documentor section
j.) <header> - This tag is used to define a header for a documentor section
k.) <hgroup> - When there are multiple levels in a heading,it groups a setof <h1> to <h6> elements.
l.) <mark> - It defines highlighted text.
m.)<meter> - It defines a scalar measurementwithin a known range.
n.) <nav> - It defines links for navigation
o.) <progress> - This tag exhibits the progress ofa task
p.) <ruby> - It defines a ruby annotation for EastAsian typography
q.) <rt> - It defines an explanation/pronunciation ofcharacters for East Asian typography
r.) <rp> - This tag tells the system whatto displayin browsers thatdo not supportruby annotations.

2. s.) <section> - It defines a section in a document
t.) <summary> - It provides a visible heading for a <details> element
u.) <time> - This tag defines a date/time
v.) <wbr> - This tag defines a line-break
6. Which elements of HTML 4.01 are no more a part of HTML5?
Following elements ofHTML 4.01 are no more a part of HTML 5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
7. What is SVG?
•SVG is the abbreviation for Scalable Vector Graphics and is recommended byW3C.
•It is used to define vector-based graphics for the Web
•The graphics are defined in XML format
•An importantquality of SVG graphics is thattheir quality is maintained even when they are zoomed or resized.
•All the elementand attributes ofSVG files can be animated
8. What are the advantages of SVG over other image format like JPEG or GIF?
Following are the main advantages ofusing 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 withoutany degradation in the quality.
- SVG images can be searched,indexed,scripted,and compressed
9. Differentiate between Canvas and SVG.
The table below shows some importantdifferences between Canvas and SVG:
- Canvas is resolution dependentwhile SVG is not.
- Canvas does not provide any supportfor event handlers while SVG does.
- Canvas is suitable for graphic-intensive games while SVGis not suitable for gaming.
- Canvas is suitable for small rendering areas while SVG is suitable for large rendering areas like Google maps.
10. What is a Canvas? What is the default border size of a canvas?
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.
11. Which methods are used to draw a straight line on a Canvas?
Following methods are used to draw a straightline on a Canvas:
- moveTo(x,y) – It defines the starting co-ordinates ofthe line
- lineTo(x,y) – It defines the ending co-ordinates ofthe line
- The actual line is drawn with the help of a method like stroke()
12. What are gradients in Canvas used for? What are their different types?

3. Gradients in canvas are used to fill rectangles,circles,lines etc.
The gradients in Canvas are of two types:
- createLinearGradient(x,y,x1,y1) – It creates a linear gradient
- createRadialGradient(x,y,r,x1,y1,r1) – It creates a radial/circular gradient
13. Which method is used to draw an image on the canvas?
drawImage(image,x,y) method is used to draw an image on the canvas.
14. HTML 5 provides drag and drop facility. How do you make an image draggable?
To make an image draggable,the draggable attribute is setto true:
<img draggable="true">
15. Can HTML 5 get the geographical position of a user?
- Yes, HTML 5 can get the location of a user with the use of Geolocation API.
- Use getCurrentPosition() method to get the user’s currentposition.