HTML5 QUIZ Points: 21 out of 25

1. What is the previous version of HTML, prior to HTML5?

You answered:

HTML 4.01

Correct Answer!

2. Which doctype is correct for HTML5?

You answered:

<!DOCTYPE html>

Correct Answer!

3. Which HTML5 element is used to specify a footer for a document or section?

You answered:

Correct Answer!

4. Which element is no longer supported in HTML5?

You answered:

<font>

Correct Answer!

5. Which element is no longer supported in HTML5?

You answered:

Correct Answer!

6. In HTML5, onblur and onfocus are:

You answered:

Event attributes

Correct Answer!

7. What is the correct HTML5 element for playing video files?

You answered:

<video>

Correct Answer!

8. What is the correct HTML5 element for playing audio files?

You answered:

<audio>

Correct Answer!

9. Which attribute for <script> elements is no longer required in HTML5?

You answered:

type

Correct Answer!

10. In HTML5, which method is used to get the current location of a user?

You answered:

getCurrentPosition()

Correct Answer!

11. The new HTML5 global attribute, "contenteditable" is used to:

You answered:

Specify whether the content of an element should be editable or not

Correct Answer!

12. In HTML5, contextmenu and spellcheck are:

You answered:

Style attributes

Wrong Answer!

13. In HTML5, you can embed SVG elements directly into an HTML page.

You answered:

True

Correct Answer!

14. Graphics defined by SVG is in which format?

You answered:

XML

Correct Answer!

15. The <canvas> element in HTML5 is used to:

You answered:

draw graphics

Correct Answer!

16. Which built-in HTML5 object is used to draw on the canvas?

You answered:

getContext

Correct Answer!

17. In HTML5, which attribute is used to specify that an input field must be filled out?

You answered:

required

Correct Answer!

18. Which input type defines a slider control?

You answered:

Slider RANGE

Wrong Answer!

19. Which input type defines a week and year control (no time zone)?

You answered:

week

Correct Answer!

20. Which HTML5 element is used to display a scalar measurement within a known range?

You answered:

<gauge>

Wrong Answer! <<METER>>

21. Which HTML5 element defines navigation links?

You answered:

<nav>

Correct Answer!

22. Browsers remove extra spaces when displaying an HTML file.

You answered:

False

Wrong Answer!

23. In HTML5, what does the <aside> element define?

You answered:

Content aside from the page content

Correct Answer!

24. Which HTML5 element is used to specify a header for a document or section?

You answered:

Correct Answer!

25. Which HTML5 element defines an article?

You answered:

Correct Answer!

<wbr> Defines a possible line-break

<wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

enctype

<form>

Specifies how the form-data should be encoded when submitting it to the server (only for method="post").

multiple

Specifies that a user can enter more than one value.

New Form Elements

Tag Description

<datalist> Defines pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

Draw a rectangle

<!DOCTYPE html>

<html>

<body>

Your browser does not support the HTML5 canvas tag.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.rect(20, 20, 150, 100);

ctx.stroke();

</script>

</body>

</html>

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

HTML5 Canvas -- 2dimensional

audio/video

HTML5 features, include native audio and video support without the need for Flash.

The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to set src attribute to identify the media source and include a controls attribute so the user can play and pause the media.

Embedding Video

Here is the simplest form of embedding a video file in your webpage −

Your browser does not support the <video> element.

</video>

The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are −

Ogg − Ogg files with Thedora video codec and Vorbis audio codec.

mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.

You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format −

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the video element.

</video>

</body>

</html>

Video Attribute Specification

The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control −

Attribute Description

autoplay This boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

autobuffer This boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play.

controls If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.

height This attribute specifies the height of the video's display area, in CSS pixels.

loop This boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.

preload This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.

poster This is a URL of an image to show until the user plays or seeks.

src The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed

width This attribute specifies the width of the video's display area, in CSS pixels.

Embedding Audio

HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.

Your browser does not support the <audio> element.

</audio>

The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.

You can use <source> tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format −

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

Handling Media Events

The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript −

Event Description

abort This event is generated when playback is aborted.

canplay This event is generated when enough data is available that the media can be played.

ended This event is generated when playback completes.

error This event is generated when an error occurs.

loadeddata This event is generated when the first frame of the media has finished loading.

loadstart This event is generated when loading of the media begins.

pause This event is generated when playback is paused.

play This event is generated when playback starts or resumes.

progress This event is generated periodically to inform the progress of the downloading the media.

ratechange This event is generated when the playback speed changes.

seeked This event is generated when a seek operation completes.

seeking This event is generated when a seek operation begins.

suspend This event is generated when loading of the media is suspended.

volumechange This event is generated when the audio volume changes.

waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Following is the example which allows to play the given video −

<!DOCTYPE HTML>

<html>

<head>

function PlayVideo(){

var v = document.getElementsByTagName("video")[0];

v.play();

}

</script>

</head>

<body>

<form>

Your browser does not support the video element.

</video>

<br />

</form>

</body>

</html>

This will produce following result −