HTML5 - HTML5 Web Development Practice Test

โ–ถ

HTML5 Guide 2025

What Is HTML5?

HTML5 is the fifth major version of HyperText Markup Language (HTML), the standard markup language used to structure and present content on the web. HTML5 was finalized by the World Wide Web Consortium (W3C) in October 2014, though its features were implemented by browsers progressively during the preceding years. HTML5 represents a major evolution from HTML4, introducing semantic elements, native multimedia support, new form input types, powerful JavaScript APIs, and improved support for mobile and offline web applications.

Prior to HTML5, web developers relied heavily on third-party plugins โ€” primarily Adobe Flash โ€” for video playback, audio, interactive graphics, and rich web applications. HTML5 built these capabilities directly into the browser, making it possible to deliver multimedia experiences, interactive graphics (via Canvas and SVG), and complex web applications without plugins. This shift was enormously consequential: Flash was officially discontinued in 2020, and HTML5-based approaches now handle all web multimedia and interactivity that Flash once provided.

HTML5 is not a single technology but a suite of related technologies including HTML markup, CSS3, and JavaScript APIs that together define the modern web platform. When developers say 'HTML5,' they often mean this full suite of capabilities โ€” semantic HTML elements, CSS transitions and animations, the Canvas and WebGL graphics APIs, the Geolocation API, Web Storage, WebSockets, and more. All major browsers (Chrome, Firefox, Safari, Edge) support HTML5 fully, and mobile browsers on iOS and Android provide equally robust support.

HTML5 Semantic Elements

One of HTML5's most important contributions is its set of semantic structural elements โ€” elements that describe the meaning and role of content, not just its visual appearance. Before HTML5, developers relied heavily on generic <div> and <span> elements for layout. HTML5 introduced named structural elements that convey meaning to browsers, search engines, screen readers, and other tools, improving accessibility and SEO.

Page Structure Elements

Text-Level Semantic Elements

HTML5 also refined and added text-level semantic elements: <time> marks up dates and times in machine-readable format; <mark> highlights text for reference; <figure> and <figcaption> associate captions with images, diagrams, and code samples; <details> and <summary> create a native expand/collapse disclosure widget without JavaScript; and <dialog> represents a dialog or popup box.

HTML5 Forms and Input Types

HTML5 significantly expanded the capabilities of web forms by introducing new input types, form validation attributes, and data list elements. These features reduce the need for JavaScript-based form validation and provide better mobile keyboard experiences when input types match the expected data.

New Input Types

HTML5 added more than a dozen new <input type> values beyond the original text, password, checkbox, radio, submit, and file types:

Form Validation Attributes

HTML5 introduced built-in form validation through attributes that eliminate the need for JavaScript validation of common cases: required prevents form submission when the field is empty; pattern validates input against a regular expression; min and max constrain numeric and date inputs; minlength and maxlength constrain text length; and multiple allows multiple values in file and email inputs. The novalidate attribute on a <form> element disables built-in validation for forms that implement custom JavaScript validation.

Datalist Element

The <datalist> element provides autocomplete suggestions for an <input> field without restricting the user to the suggested values. This is different from <select> (which requires the user to choose from a fixed list) โ€” <datalist> displays suggestions while allowing free-text input. It is connected to an input via the input's list attribute matching the datalist's id.

HTML5 Multimedia: Audio, Video, and Canvas

HTML5's most visible consumer-facing change was bringing native audio, video, and interactive graphics directly into browsers without plugins. These capabilities transformed web content delivery and made mobile-friendly, cross-platform multimedia the default.

The Video Element

The <video> element embeds video content directly in HTML with native browser controls. The element supports multiple source formats via nested <source> elements โ€” the browser selects the first format it supports. Key attributes include controls (display browser controls), autoplay (start playing immediately, usually muted), muted (required for autoplay in most browsers), loop (replay automatically), poster (image displayed before playback), and preload (hint to the browser about preloading). Video formats: MP4 (H.264) has universal support; WebM offers better compression; HLS and DASH are used for adaptive streaming.

The Audio Element

The <audio> element embeds audio content similarly. It supports the same source-multiple-format pattern as video. Common formats: MP3 for broad compatibility, AAC for better quality at lower bitrates, OGG for open-source deployments. The Web Audio API (a JavaScript API) extends beyond simple audio playback to enable audio processing, synthesis, and spatial audio for games and music applications.

The Canvas Element

The <canvas> element provides a scriptable bitmap drawing surface that JavaScript renders to via the Canvas 2D API or WebGL. Canvas 2D supports drawing shapes, paths, text, images, and pixel manipulation โ€” commonly used for data visualizations, games, image editing tools, and dynamic graphics. WebGL (Web Graphics Library) exposes hardware-accelerated 3D graphics through the canvas element, enabling complex 3D rendering directly in the browser without plugins. WebGPU, the next-generation graphics API, is now being standardized for higher-performance GPU access.

HTML5 APIs

Beyond markup elements, HTML5 encompasses a suite of JavaScript APIs that give web applications access to device features and client-side storage previously only available to native applications.

Web Storage (localStorage and sessionStorage)

The Web Storage API provides client-side key-value storage with two mechanisms: localStorage persists data indefinitely (until explicitly cleared or the user clears browser data); sessionStorage persists data only for the duration of the browser tab session. Both provide a simple API: setItem(key, value), getItem(key), removeItem(key), and clear(). Web Storage replaced cookies for many client-side storage needs โ€” it stores up to 5โ€“10 MB per origin (vs. 4KB for cookies), does not send data to the server with every request, and has a simpler API.

Geolocation API

The Geolocation API allows web applications to request the user's physical location (with explicit user permission). navigator.geolocation.getCurrentPosition() returns latitude, longitude, accuracy, and optionally altitude and heading. The watchPosition() method provides continuous location updates for tracking applications. Geolocation requires HTTPS in modern browsers and user permission prompts on every origin. Location data is used for maps, local search, weather, navigation, and proximity-based services.

Service Workers and Progressive Web Apps

Service Workers are JavaScript scripts that run in the background, separate from the main browser thread, acting as a proxy between web applications, the browser, and the network. Service Workers enable offline functionality (by intercepting network requests and serving cached responses), background sync, and push notifications. Web applications that use Service Workers, a web manifest, and HTTPS qualify as Progressive Web Apps (PWAs) โ€” they can be installed on mobile and desktop, launch from the home screen, work offline, and receive push notifications like native apps.

WebSockets

The WebSocket API provides full-duplex communication channels over a single TCP connection, enabling real-time bidirectional communication between browsers and servers. Unlike HTTP (which is request-response only), WebSockets allow the server to push data to clients at any time. WebSockets power real-time features including live chat, collaborative editing, live sports scores, financial data feeds, and multiplayer games.

HTML5 Guide Checklist

Know the HTML5 semantic structure elements: header, nav, main, article, section, aside, footer
Understand when to use article vs. section vs. div
Know the new HTML5 input types: email, url, tel, number, range, date, color
Understand built-in form validation attributes: required, pattern, min, max, minlength
Know how to embed video and audio with the video and audio elements
Understand the Canvas element and its use cases (2D graphics, WebGL)
Know the difference between localStorage and sessionStorage
Understand the Geolocation API and its permission model
Know what a Service Worker is and what it enables (offline support, PWAs)
Free HTML5 - HTML5 Web Development Test
HTML5 HTML5 Semantic Elements 3
HTML5 HTML5 Forms and Input Types

HTML5 Guide Pros and Cons

Pros

  • HTML5 has a defined, publicly available content blueprint โ€” candidates know exactly what to prepare for
  • Multiple preparation pathways (self-study, courses, coaching) accommodate different learning styles and schedules
  • A growing ecosystem of study resources means candidates at any budget level can access quality preparation materials
  • Clear score reporting allows candidates to identify specific strengths and weaknesses for targeted remediation
  • Professional recognition associated with strong performance provides tangible career and academic benefits

Cons

  • The scope of tested content requires substantial preparation time that competes with existing professional or academic commitments
  • No single resource covers the full content scope โ€” candidates typically need multiple study tools for comprehensive preparation
  • Test anxiety and exam-day performance variability mean preparation effort does not always translate linearly to scores
  • Registration, preparation, and potential retake costs accumulate into a significant financial investment
  • Content and format can change between exam versions, making older preparation materials less reliable
โœ… Verified Reviews

HTML5 Practice Test Reviews

โ˜…โ˜…โ˜…โ˜…โ˜…โ˜…โ˜…โ˜…โ˜…
4.7 /5

Based on 384 reviews

HTML5 Questions and Answers

What is HTML5?

HTML5 is the fifth major revision of the HyperText Markup Language standard, finalized by W3C in 2014. It introduced semantic structural elements, native audio/video support, the Canvas element, new form input types and validation, and JavaScript APIs including Web Storage, Geolocation, WebSockets, and Service Workers.

What are HTML5 semantic elements?

HTML5 semantic elements describe the meaning of content, not just its appearance. Key structural semantic elements include header, nav, main, article, section, aside, and footer. Using semantic elements improves accessibility (screen readers understand page structure), SEO (search engines better understand content), and code readability.

What is the difference between localStorage and sessionStorage?

Both are Web Storage APIs providing client-side key-value storage. localStorage persists data indefinitely across browser sessions โ€” data survives closing and reopening the browser. sessionStorage persists only for the current tab session โ€” data is cleared when the tab is closed. Both store up to 5โ€“10 MB per origin.

What replaced Flash after HTML5?

HTML5 replaced Flash across its major use cases: the HTML5 video and audio elements replaced Flash-based media players; the Canvas element and WebGL replaced Flash-based interactive graphics and games; CSS animations replaced Flash-based animations; and JavaScript APIs replaced Flash-based local storage and communication. Adobe discontinued Flash Player on December 31, 2020.

What is a Progressive Web App (PWA)?

A Progressive Web App is a web application that uses HTML5 Service Workers, a web manifest, and HTTPS to deliver app-like experiences. PWAs can be installed on mobile and desktop home screens, work offline (via Service Worker caching), receive push notifications, and launch in full-screen without a browser UI. PWAs bridge the gap between web and native apps without requiring App Store distribution.

What are the new HTML5 form input types?

HTML5 added: email, url, tel, number, range, date, time, month, week, datetime-local, color, and search. These input types trigger appropriate mobile keyboards (a numeric pad for number, an @ keyboard for email), provide native UI controls (date pickers, sliders, color pickers), and enable built-in browser validation without JavaScript.
โ–ถ Start Quiz