HTML5 questions for Computer Science students.

What are the new features provided in HTML5?

Some of the new features provided in HTML5 are:

• It provides support for local storage.
• New form controls, like calendar, date, time, email, url, search.
• <canvas> element is 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>

What is the page structure of HTML 5?

The following figure shows the page structure of HTML 5.



<header> : Represents the header of a section.
<footer> : Represents a footer for a section.
<nav> : Represents a section of the document intended for navigation.
<article> : Represents an independent piece of content of a document.
<section> : Used inside article to define sections or group content into sections.
<aside> : Represent side bar contents of a page.

Tell us something about the new <canvas> element.

• A canvas is a drawable area on an HTML page.
• The new <canvas> element provided by HTML5 aids in 2D drawing.
• <canvas> tag helps in drawing graphics through scripting usually JavaScript.
• By default, it has no border and no content.
• It is only a container for graphics. You have to use a script to draw the graphics.
• It has several methods for drawing boxes, circles, paths, text, and adding images.
Example:

<canvas id="myCanvas" width="200" height="200" style="border:1px solid red"></canvas>

What is SVG?

• SVG is the abbreviation for Scalable Vector Graphics and is recommended by W3C.
• It is used to define vector-based graphics for the Web.
• The graphics are defined in XML format.
• An important quality of SVG graphics is that their quality is maintained even when they are zoomed or resized.
• All the element and attributes of SVG files can be animated.
Example:

<svg width="100" height="100">
     <rect width="100" height="100"
     stroke="yellow" stroke-width="8" fill="red" />
</svg>

What are the advantages of SVG over other image format like JPEG or GIF?

Following are the main advantages of using 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 the image is high at any resolution.
• It is possible to zoom the SVG images without any degradation in the quality.
• SVG images can be searched, indexed, scripted, and compressed.
Example:

<svg width="100" height="100">
     <rect width="100" height="100"
     stroke="yellow" stroke-width="8" fill="red" />
</svg>

Differentiate between Canvas and SVG.

Canvas	SVG
Canvas is resolution dependent.	SVG is not resolution dependent.
Canvas does not provide any support for event handlers.	SVG provide support for event handlers.
Canvas is suitable for graphic-intensive games.	SVG is not suitable for graphic-intensive games.
Canvas is suitable for small rendering areas.	SVG is suitable for large rendering areas like Google maps.

Which methods are used to draw a straight line on a Canvas?

Following methods are used to draw a straight line on a Canvas:

• beginPath() : It declares that we are about to draw a new path.
• moveTo(x,y) : It defines the starting co-ordinates of the line.
• lineTo(x,y) : It defines the ending co-ordinates of the line.
• The actual line is drawn with the help of a method like stroke().
Example:

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,250);
ctx.lineTo(20,100);
ctx.stroke();
</script>

What are gradients in Canvas used for? What are their different types?

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

Example:

Create Linear Gradient

Create Radial Gradient

Which method is used to draw an image on the canvas?

• drawImage(image,x,y) method is used to draw an image and video on the canvas.
Where, image – It is used to show the image and video element to use
x – This coordinate shows where to place the image on the canvas
y – This coordinate shows where to place the image on the canvas

Example:

What are the various elements provided by HTML5 for media content?

<audio> and <video> elements are provided by HTML5 for media playback.

The tags used are:

<audio> - It defines sound content.
<video> - It defines a video or a movie.
<source> - This tag defines the multiple media resources for <video> and <audio>.
<embed> - It provides a container for an external application or interactive content.
<track> - It defines text tracks for <video> and <audio>.

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:

<datalist>

• It specifies a list of options for input controls. These options are pre-defined.
• Each of these options is defined using an <option> element, as shown in the example below.
Example:

<form>
<datalist id="languages">
<option value="English">
<option value="Hindi">
<option value="Marathi">
<option value="Other">
</datalist>
</form>

<keygen>

• This tag defines a key-pair generator field.
• When the form is submitted, private and public pair keys are generated.
• The private key is encrypted and stored locally, and the public key is sent to the server.
Example:

<form>
<input name="firstname" value="first name">
<keygen name="security" >
<input type="submit">
</form>

<output>

• It defines the result of a calculation.
Example:

<form oninput="sum.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="a" value="0" /> +
<input type="number" name="b" value="20" /><br />
Output: <output name="sum"></output>

What are the various tags provided for better structuring in HTML5?

The various tags provided for better structuring in HTML 5 are:

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

Which elements of HTML 4.01 are no more a part of HTML5?

Following elements of HTML 4.01 are no more a part of HTML 5:

What are the audio tags provided by HTML5?

HTML5 provides following audio tags:

• <audio> - Defines sound content such as  MP3, Wav, and Ogg.
• <source> - Defines multiple media resources for media elements, such as <video> and <audio>.
• The controls attribute is a boolean attribute which adds audio controls, like play, pause, and volume.
• The <source> tag provides facility to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.
Example:

<audio controls>
     <source src="song.ogg" type="audio/ogg">
     <source src="song.mp3" type="audio/mpeg">
</audio>

How to embed the Video in HTML 5?

• HTML5 provides built-in media support through the <audio> and <video> elements.
• HTML5 <video> element provides a standard way to embed video in web pages.
• To embed a video in HTML, use the <video> element.
• The controls attribute adds video controls, like play, pause, and volume.
• Specify multiple source files by using the <source> element.
• To improve performance, use type attribute in source element. Otherwise the browser will load each video file until it can find one that it can play.
Example:

<video controls>
     <source src="movie.mp4" type="video/mp4">
     <source src="movie.ogg" type="video/ogg">
</video>

What are the new input types provided by HTML 5 for forms?

Following are the important, new input types for forms provided by HTML 5:

• color – Used for fields that should contain color.
• date – Allows the user to select a date.
• datetime - Allows the user to select a date and time (with time zone).
• datetime-local - Allows the user to select a date and time (without time zone).
• email - Used for input fields that should contain an e-mail address.
• month - Allows the user to select a month and year.
• number - Used for input fields that should contain a numeric value. Restrictions on type of numbers accepted can be set.
• range - Used for input fields that should contain a value from a range of numbers. Restrictions on type of numbers accepted can be set here as well.
• search - Used for search fields.
• tel - Defines a field for entering a telephone number.
• time - Allows the user to select a time.
• url - Used for input fields that should contain a URL address.
• week - Allows the user to select a week and year.

What is HTML5 Web Storage?

• With HTML5, it is possible for the web pages to store the data locally in the user's browser.
• This web storage is much faster and secured than the cookies.
• Also, a larger amount of data can be stored without causing any adverse effect to the performance of the website.
• There are two types of web storages, local storage and session storage.
Local storage:
Local storage object stores the data without an expiry date. With local storage object, data persists even when the browser is closed and reopened.

Session storage:
Session storage object stores the data only for one session. Stored data will be cleared as soon as the user closes the browser.

Differentiate between local storage and session storage objects.

Local storage	Session storage
Local storage object stores the data without an expiry date.	Session storage object stores the data only for one session.
Data will not be deleted when the browser window is closed and reopened.	Data is deleted when the browser window closes with session storage objects.

How to add and remove data from local storage?

• Local storage object stores the data without an expiry date.
• With local storage object, data persists even when the browser is closed and reopened.
• Data is added to local storage using key and value.
localStorage.setItem("name", "Jhon");
• To retrieve data from local storage need to use “getItem” providing the key name.
document.getElementById("result").innerHTML = localStorage.getItem("name");

The above example can also be written as:

// Store
localStorage.name = "Jhon";
// Retrieve
document.getElementById("result").innerHTML = localStorage.name;

The syntax for removing localStorage item is as follows:

localStorage.removeItem("name");

What is the concept of Application Cache in HTML5? What are its advantages?

The Application Cache concept introduced by HTML5 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 or a site when they're offline.
Speed - Cached resources load faster.
Reduced server load - The browser will only download updated/changed resources from the server.

What is a Manifest file?

A Manifest file is a simple text file that tells the browser what to cache and what not to cache. Application caching can be done with the help of the cache manifest file.

There are three sections of a Manifest file:

• CACHE MANIFEST - Files listed here are cached after they are downloaded for the first time. The first line of the manifest file should start with CACHE MANIFEST keyword.
• 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. It informs the browser what to show when the browser tries to access an uncached file during offline.

What is a Web Worker?

• A web worker is a JavaScript which runs in the background. It exists in external files.
• It is independent of other scripts and does not affect the performance of the page.
• Web workers are usually used for CPU intensive tasks.

Which JavaScript objects are not accessible to web worker?

Following JavaScript objects are not accessible to web worker:

• The window object
• The document object
• The parent object

What are the new attributes provided in HTML5 for <form>?

The new attributes provided in HTML5 for <form> are:

1) autocomplete

• It specifies if a form or input field should have autocomplete as on or off.
• If autocomplete is on, the browser is able to fill the values based on the values filled by the user earlier.
• autocomplete works for following input types: text, search, url, tel, email, password, datepickers, range, and color.
Example:

<form action=" action_page.php " autocomplete="on">
Name: <input type="text" name="name">
E-mail: <input type="email" name="email" autocomplete="off">
<input type="submit">
</form>

2) novalidate

• This is a boolean attribute.
• When present, it signifies that the form-data should not be validated when submitted.
Example:

<form action=" action_page.php " novalidate>
Name: <input type="text" name="name">
E-mail: <input type="email" name="email" >
<input type="submit">
</form>

What are the new attributes provided in HTML5 for <input>?

Following are the new attributes provided in HTML5 for <input>

1) autofocus:

• This is a Boolean attribute.
• When present, it means that an <input> element should automatically get focus when the page is loaded.

2) form:

• This attribute specifies one or more forms an <input> element belongs to.

3) formaction:

• This attribute specifies the URL of a file that will process the input control when the form is submitted.
• This attribute is used with type="submit" and type="image".
• It overrides the action attribute of the <form> element.

4) formenctype:

• This attribute specifies how the form-data should be encoded when submitting it to the server.
• It is used with type="submit" and type="image".
• It overrides the enctype attribute of the <form> element.

5) formmethod:

• It defines the HTTP method for sending form-data to the action URL.
• It is used with type="submit" and type="image".
• It overrides the method attribute of the <form> element.

6) formnovalidate:

• It is a boolean attribute.
• It specifies that the <input> element should not be validated when submitted.
• It is used with type="submit".
• It overrides the novalidate attribute of the <form> element.

7) formtarget:

• It specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
• It is used with type="submit" and type="image".

8) height and width:

• It specifies the height and width of an <input> element.
• It is used only with <input type="image">

9) list:

• It refers to a <datalist> element which contains pre-defined options for an <input> element.

10) min and max:

• It specifies the minimum and maximum value for an <input> element.
• It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

11) Multiple:

• It is a boolean attribute.
• It specifies that the user is allowed to enter more than one value in the <input> element.
• It works with the following input types: email and file.

12) pattern:

• It specifies a regular expression that the <input> element's value is checked against.
• It works with the following input types: text, search, url, tel, email, and password.

13) placeholder:

• It specifies a short hint that describes the expected value of an input field.
• It works with the following input types: text, search, url, tel, email, and password.

14) required:

• It is a boolean attribute.
It specifies that an input field must be filled out before submitting the form.

15) step:

• It specifies the legal number intervals for an <input> element.
• It works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

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.

HTML5 provides drag and drop facility. How do you make an image draggable?

To make an image draggable, the draggable attribute is set to true:
<img draggable="true">

Can HTML5 get the geographical position of a user?

• HTML5 can get the location of a user with the use of Geolocation API.
• Use getCurrentPosition() method to get the user’s current position.

Explain custom attributes?

• A custom data attribute starts with data- and new in HTML5.
• The data-* attribute would be named based on user requirement.
• It is used to store custom data.
Syntax:

<element data-*="value">

Example:

<div class="class" data-technology="Java">
...
</div>

What are Server Sent Events in HTML5?

• Server-sent event (SSE) is a technology where a browser receives updates automatically from a server via HTTP connection.
• It is introduced by WHATWG Web Applications 1.0.
• Server-sent events (SSE) are real-time events which are emitted by the server and received by the browser.
• To use Server-Sent Events, add an <eventsource> element to the document.
• The src attribute of <eventsource> element is point to an URL which provides a persistent HTTP connection that sends a data stream containing the events.
• SSE can push DOM events continuously from your web server to the visitor's browser.
• Server-sent event standardizes how to stream data from the server to the client.