HTML5 Quiz

Test your knowledge of HTML5 new features!

Question 1: Which element is used to define the core main content of a document, and there should only be one per page?

[ ] <section>
[ ] <main>
[ ] <article>
[ ] <div>

Answer: <main>

Question 2: You want to create an input field that only accepts valid email addresses. Which `type` attribute should you use?

[ ] type="text"
[ ] type="email"
[ ] type="url"
[ ] type="string"

Answer: type="email"

Question 3: Which HTML5 element is used to natively play video on a web page without plugins?

[ ] <movie>
[ ] <media>
[ ] <video>
[ ] <embed>

Answer: <video>

Question 4: When you want to permanently store a small amount of data in the user's browser (data persists even after the user closes the browser), which Web Storage object should you use?

[ ] sessionStorage
[ ] globalStorage
[ ] cookieStorage
[ ] localStorage

Answer: localStorage

Question 5: Which technology allows you to run JavaScript in the background to prevent complex computations from freezing the user interface?

[ ] setTimeout
[ ] Ajax
[ ] Web Workers
[ ] requestAnimationFrame

Answer: Web Workers

Question 6: If you need a lightweight, one-way real-time data stream from server to client (e.g., news feeds) and want to take advantage of automatic reconnection, which technology is the best choice?

[ ] WebSockets
[ ] Long Polling
[ ] Server-Sent Events (SSE)
[ ] Flash

Answer: Server-Sent Events (SSE)

Question 7: Both `<canvas>` and `<svg>` can be used for drawing. What is the main difference between them?

[ ] <canvas> is vector-based, <svg> is pixel-based.
[ ] <canvas> graphics are part of the DOM, <svg> is not.
[ ] <canvas> is pixel-based and gets distorted when enlarged; <svg> is vector-based and scales infinitely without distortion.
[ ] <svg> must use JavaScript for drawing, <canvas> can use CSS.

Answer: <canvas> is pixel-based and gets distorted when enlarged; <svg> is vector-based and scales infinitely without distortion.

Question 8: When implementing drag and drop functionality, to allow an element to be successfully dropped onto another element, in which event of the drop zone must you call `event.preventDefault()`?

[ ] ondrop
[ ] ondragstart
[ ] ondragenter
[ ] ondragover

Answer: ondragover