CIW Advanced HTML5 & CSS3 Specialist (1D0-720) — Questions and Answers

Question 1: Which attribute on an input makes it readable but not editable by the user?

locked
static
disabled
readonly (Correct answer)

Correct answer: readonly

The readonly attribute prevents the user from modifying the input's value while still allowing the value to be submitted with the form.

Question 2: What does the toDataURL() method on a canvas element return?

A Blob object containing image data
A Base64-encoded data URI of the canvas image (Correct answer)
The pixel array of the canvas
The canvas element's HTML string

Correct answer: A Base64-encoded data URI of the canvas image

The toDataURL() method returns a data URI containing a Base64-encoded representation of the canvas image in the specified format (default PNG).

Question 3: What is the Web Audio API primarily used for?

Playing HTML5 <audio> elements only
Processing and synthesizing audio in the browser with JavaScript (Correct answer)
Recording audio from the microphone
Streaming audio from a server

Correct answer: Processing and synthesizing audio in the browser with JavaScript

The Web Audio API provides a powerful system for controlling, processing, and synthesizing audio using an audio graph of nodes.

Question 4: In HTML5, which of the following tags is used to represent the output of various forms of output?

required
output (Correct answer)
placeholder
autofocus

Correct answer: output

Explanation: <br> In HTML, the <output> tag is used to express the result of a computation done by a client-side script like JavaScript. In HTML 5, the <output> tag is a new tag that requires a starting and ending tag.

Question 5: What is the purpose of the CSS 'clamp()' function in responsive design?

Sets a value that scales between a minimum and maximum based on a preferred value (Correct answer)
Restricts an element's overflow
Limits the number of rendered DOM nodes
Constrains animation keyframe values

Correct answer: Sets a value that scales between a minimum and maximum based on a preferred value

The clamp(min, preferred, max) function returns the preferred value clamped between a minimum and maximum, enabling fluid typography and spacing.

Question 6: What is the key difference between SVG and HTML5 Canvas?

SVG renders faster for animations; Canvas is for static images
SVG is vector-based and DOM-accessible; Canvas is pixel-based and script-driven (Correct answer)
Canvas supports XML; SVG does not
They are identical in rendering approach

Correct answer: SVG is vector-based and DOM-accessible; Canvas is pixel-based and script-driven

SVG stores shapes as DOM objects (scalable and accessible), while Canvas writes pixels directly to a bitmap that must be redrawn by scripts.

Question 7: Which HTML5 feature allows embedding scalable vector graphics directly in an HTML document?

HTML5 Canvas
<embed> element
Inline SVG (Correct answer)
Object element

Correct answer: Inline SVG

Inline SVG allows embedding SVG markup directly inside HTML, enabling SVG elements to be styled with CSS and manipulated with JavaScript.

Question 8: What is the <figcaption> element used for?

Creating image tooltips
Styling images inline
Providing a caption for a <figure> element (Correct answer)
Adding alt text to images

Correct answer: Providing a caption for a <figure> element

The <figcaption> element defines a caption or legend for its parent <figure> element.

Question 9: What does the HTML5 'contenteditable' attribute do when set to 'true'?

Makes the element's content editable by the user (Correct answer)
Enables spell-checking on the element
Enables inline style editing
Allows CSS editing via DevTools

Correct answer: Makes the element's content editable by the user

The contenteditable='true' attribute makes an element's content directly editable by the user in the browser, like a basic rich-text editor.

Question 10: The ______ element is used to specify a separate unit of content, such as a blog post, remark, or article.

post
blog
comment
article (Correct answer)

Correct answer: article

Explanation: <br> One of the new semantic elements added with HTML5 is the article tag. The article element, according to the HTML5 specification, indicates a chunk of material that is separate from the rest of a document or site, such as a magazine or newspaper article or a blog entry.

Question 11: What does the 'srcset' attribute on an <img> element allow?

Defining image dimensions
Lazy-loading images
Specifying multiple image sources for different screen resolutions or widths (Correct answer)
Setting a fallback image source

Correct answer: Specifying multiple image sources for different screen resolutions or widths

The srcset attribute provides a list of candidate images with their sizes or pixel densities so the browser can select the most appropriate one.

Question 12: Which element is used inside <video> or <audio> to specify multiple media file sources?

<src>
<media>
<source> (Correct answer)
<file>

Correct answer: <source>

The <source> element is placed inside <video> or <audio> to specify multiple media files in different formats, allowing the browser to choose the one it supports.

Question 13: What does the 'novalidate' attribute on a <form> element do?

Clears all form fields
Hides validation error messages
Prevents the form from submitting
Disables built-in HTML5 form validation (Correct answer)

Correct answer: Disables built-in HTML5 form validation

The novalidate attribute specifies that the form should not be validated when submitted, bypassing HTML5 constraint validation.

Question 14: What does the HTML5 Drag and Drop API's 'dataTransfer' object do?

Transfers data between web workers
Manages clipboard data
Streams data to the server
Holds the data being dragged during a drag-and-drop operation (Correct answer)

Correct answer: Holds the data being dragged during a drag-and-drop operation

The dataTransfer object holds the data and state of a drag-and-drop operation, allowing you to set and retrieve data being dragged.

Question 15: The empty element in the head element ________ defines relationships between the current document and other documents.

join
link (Correct answer)
rel
meta

Correct answer: link

Explanation: <br> The link <tag> establishes a connection between the current document and a remote resource. The <link> tag is most commonly used to add a favicon to your website or to link to external style sheets. The link element is a blank element with only properties.

Question 16: What is the scope of a Service Worker, and how is it determined?

The scope is determined by the Content-Security-Policy header of the page
The scope is always the entire origin (domain) regardless of file location
The scope is the directory path of the service worker script file, controllable via the 'scope' option in registration (Correct answer)
The scope is set explicitly in the service worker script using self.setScope()

Correct answer: The scope is the directory path of the service worker script file, controllable via the 'scope' option in registration

By default, a Service Worker's scope is the directory it resides in, but it can be narrowed (not widened) using the scope option in navigator.serviceWorker.register().

Question 17: Which HTML5 API allows web pages to run scripts in background threads?

Service Workers API
Background Tasks API
Thread API
Web Workers API (Correct answer)

Correct answer: Web Workers API

The Web Workers API lets you run JavaScript in a separate background thread, preventing heavy computations from blocking the main UI thread.

Question 18: Which of the following correctly creates a new Web Worker?

var worker = Worker.create('worker.js');
var worker = new Worker('worker.js'); (Correct answer)
var worker = new Thread('worker.js');
var worker = document.createWorker('worker.js');

Correct answer: var worker = new Worker('worker.js');

The Worker constructor takes the URL of a script file as its argument to instantiate a new background worker.

Question 19: Which CSS unit, widely used in responsive HTML5 designs, is relative to the viewport width?

rem
em
vw (Correct answer)
px

Correct answer: vw

The vw unit equals 1% of the viewport width, making it inherently responsive as it scales with the browser window size.

Question 20: Which property of an HTML5 media element reports the current playback position in seconds?

position
timeElapsed
playbackTime
currentTime (Correct answer)

Correct answer: currentTime

The currentTime property returns or sets the current playback position of the media in seconds.

Question 21: What does the 'required' attribute do on an HTML5 form input?

Makes the field read-only
Prevents form submission if the field is empty (Correct answer)
Hides the field from screen readers
Sets a default value

Correct answer: Prevents form submission if the field is empty

The required attribute specifies that an input field must be filled out before the form can be submitted.

Question 22: What does the canvas save() method do?

Stores the current path
Saves the entire state of the canvas context to a stack (Correct answer)
Saves the canvas as an image file
Exports the canvas to PNG

Correct answer: Saves the entire state of the canvas context to a stack

The save() method pushes the current canvas state (transforms, styles, clipping) onto a stack so it can be restored later with restore().

Question 23: Which HTML5 attribute enables native lazy loading of images and iframes?

loading='lazy' (Correct answer)
lazysrc
defer='true'
async-load

Correct answer: loading='lazy'

The loading='lazy' attribute tells the browser to defer loading of off-screen images and iframes until the user scrolls near them.

Question 24: What does the 'muted' attribute on a <video> element do?

Silences the audio track of the video (Correct answer)
Hides the audio controls
Disables the video track
Prevents volume changes

Correct answer: Silences the audio track of the video

The muted attribute sets the default audio state to muted, which is often required by browsers before autoplay is allowed.

Question 25: What does the CSS 'aspect-ratio' property control?

The image compression ratio
The ratio of padding to content area
The preferred aspect ratio of an element's box (Correct answer)
The screen aspect ratio for media queries

Correct answer: The preferred aspect ratio of an element's box

The aspect-ratio property sets the preferred aspect ratio of an element, maintaining proportional dimensions as the element resizes.

Question 26: What is the key advantage of using Transferable Objects with postMessage() in Web Workers?

They enable workers to communicate with external servers without CORS restrictions
The data is transferred by reference (zero-copy), making it much faster for large data like ArrayBuffers (Correct answer)
They compress data automatically before transferring to reduce memory usage
Transferable Objects allow workers to directly access the DOM

Correct answer: The data is transferred by reference (zero-copy), making it much faster for large data like ArrayBuffers

Transferable Objects like ArrayBuffers are moved (not copied) between threads, so the transfer cost is O(1) regardless of data size.

Question 27: Which HTML5 input type is used to let users select a date from a date picker?

date (Correct answer)
datetime
picker
calendar

Correct answer: date

The input type='date' provides a native browser date picker control for selecting year, month, and day.

Question 28: In HTML5, what do you use instead of cookies?

Local Storage (Correct answer)
None of the above
Java scripts
Web beacons

Correct answer: Local Storage

Explanation: <br> Many usage of cookies were superseded by the use of LocalStorage after HTML5 was released. This is due to the several advantages that LocalStorage provides over cookies. One of the most significant distinctions is that, unlike cookies, data is not need to be transferred back and forth with each HTTP request.

Question 29: The 'autocomplete' attribute on an HTML5 form field controls:

Whether the browser can automatically fill in the field value (Correct answer)
Spell-checking behavior
Input validation patterns
Automatic form submission

Correct answer: Whether the browser can automatically fill in the field value

The autocomplete attribute tells the browser whether it may store and automatically fill in field values based on previously entered data.

Question 30: Which of the following elements is used to highlight content in the same way as a highlighter pen is used to highlight key text in a book?

strong
none of the above
mark (Correct answer)
em

Correct answer: mark

Explanation: <br> In HTML 5, the mark> tag was introduced. The mark> tag in HTML is used to indicate that text has been marked or highlighted for reference purposes because it is relevant in another context. All major browsers recognize the mark> tag. If you wish to highlight parts of your text, use the mark> tag. We can mark the text with a variety of html5 global characteristics, such as changing the font, background color, font color, and so on. The opening and closing mark> tags are required for this tag.

Question 31: What is the purpose of the 'step' attribute on an HTML5 number input?

Controls tab order of fields
Sets how many decimal places to display
Defines the legal number intervals between values (Correct answer)
Specifies increment buttons on the control

Correct answer: Defines the legal number intervals between values

The step attribute specifies the legal number intervals for the input value, so a step='5' means only multiples of 5 are valid.

Question 32: Which method removes a specific item from localStorage?

localStorage.remove(key)
localStorage.delete(key)
localStorage.clear(key)
localStorage.removeItem(key) (Correct answer)

Correct answer: localStorage.removeItem(key)

The removeItem(key) method removes the key-value pair with the specified key from localStorage.

Question 33: What does the 'min' attribute specify on an HTML5 number input?

The minimum field width
The minimum acceptable value (Correct answer)
The minimum label length
The minimum number of characters

Correct answer: The minimum acceptable value

The min attribute sets the minimum value that an input of type number, range, or date will accept during validation.

Question 34: Which HTML5 element is used to define a region of a webpage that functions as a standalone web application within an iframe?

<embed>
<object>
<portal>
<iframe> (Correct answer)

Correct answer: <iframe>

The <iframe> element embeds another HTML document within the current page, commonly used for embedding third-party widgets or applications.

Question 35: What does the 'poster' attribute on an HTML5 <video> element specify?

The video's thumbnail in search results
The video's aspect ratio
A fallback audio track
An image to display before the video plays (Correct answer)

Correct answer: An image to display before the video plays

The poster attribute specifies the URL of an image to display as the video's placeholder before the user plays it.

Question 36: Which canvas property controls the transparency level of drawn shapes?

globalAlpha (Correct answer)
opacity
alpha
transparency

Correct answer: globalAlpha

The globalAlpha property sets the transparency level (0.0 fully transparent to 1.0 fully opaque) applied to all shapes and images drawn on the canvas.

Question 37: Which HTML5 input type creates a field that masks characters, suitable for passwords?

password (Correct answer)
secure
secret
masked

Correct answer: password

The input type='password' masks the characters as the user types, hiding sensitive information like passwords from view.

Question 38: Which HTML5 input type should be used to allow users to pick a color via a color picker?

palette
hue
picker
color (Correct answer)

Correct answer: color

The input type='color' renders a native color picker control that returns a hex color value.

Question 39: What is the primary purpose of HTML5 Web Workers?

To run JavaScript in a background thread without blocking the main UI thread (Correct answer)
To create animated graphics on a canvas element
To store large amounts of data in the browser cache
To load external CSS stylesheets asynchronously

Correct answer: To run JavaScript in a background thread without blocking the main UI thread

Web Workers allow scripts to run in background threads, keeping the main thread free and preventing UI freezing during heavy computations.

Question 40: Which CSS property is used to create multi-column layouts without floats or positioning, introduced alongside HTML5?

display: inline-block
float: left
position: relative
display: flex (Correct answer)

Correct answer: display: flex

CSS Flexbox (display: flex) provides a one-dimensional layout model that makes it easy to align and distribute space among items in a container.

Question 41: Which HTML5 technology is better suited for high-performance 3D rendering in the browser?

SVG with CSS transforms
CSS 3D transforms alone
Canvas 2D context
WebGL via canvas getContext('webgl') (Correct answer)

Correct answer: WebGL via canvas getContext('webgl')

WebGL, accessed via getContext('webgl') on a canvas element, provides hardware-accelerated 3D rendering using OpenGL ES.

Question 42: Which HTML5 attribute allows you to validate an input field value against a regular expression?

pattern (Correct answer)
format
regex
validate

Correct answer: pattern

The pattern attribute specifies a regular expression that the input's value must match for the form to be valid.

Question 43: In HTML5, which of the following tags denotes a general document or application section?

aside
section (Correct answer)
header
article

Correct answer: section

Explanation: <br> Introducing Content. The section element is a new HTML 5 element that designates a key portion of a document. It can be used in articles, headers and footers, and to establish navigation. If a section of text warrants its own heading, and that heading would appear in a theoretical or actual table of contents, it should be placed there.

Question 44: Which canvas method is used to create a linear gradient?

createLinearGradient() (Correct answer)
linearGradient()
makeGradient()
addGradient()

Correct answer: createLinearGradient()

The createLinearGradient(x0, y0, x1, y1) method creates a CanvasGradient object representing a linear gradient between two points.

Question 45: What is a Shared Worker in HTML5, and how does it differ from a Dedicated Worker?

A Shared Worker runs on the server rather than the client
A Shared Worker automatically syncs data between browser tabs using localStorage
A Shared Worker can be accessed by multiple scripts from different windows or tabs of the same origin (Correct answer)
A Shared Worker has access to the DOM, unlike a Dedicated Worker

Correct answer: A Shared Worker can be accessed by multiple scripts from different windows or tabs of the same origin

Unlike a Dedicated Worker that is tied to one script, a Shared Worker can be shared across multiple browsing contexts (tabs, iframes) from the same origin.

Question 46: Which element represents content that is tangentially related to the main content, such as a sidebar?

<details>
<figure>
<section>
<aside> (Correct answer)

Correct answer: <aside>

The <aside> element holds content related to the surrounding content but considered separate, like a sidebar or pull quote.

Question 47: What is the purpose of the 'placeholder' attribute in HTML5 form inputs?

Validates the input format
Displays hint text inside the field that disappears when the user types (Correct answer)
Labels the field for screen readers
Sets the default value of the field

Correct answer: Displays hint text inside the field that disappears when the user types

The placeholder attribute shows a short hint describing the expected value inside the input field, which disappears when the user starts typing.

Question 48: Which method is called to render the current path as a filled shape on the canvas?

fill() (Correct answer)
draw()
paint()
render()

Correct answer: fill()

The fill() method fills the current path with the current fillStyle, rendering the interior of the shape.

Question 49: What is the purpose of the HTML5 <template> element?

Holds client-side content that is not rendered but can be instantiated via JavaScript (Correct answer)
Defines server-side templates
Creates reusable CSS classes
Defines a page layout structure

Correct answer: Holds client-side content that is not rendered but can be instantiated via JavaScript

The <template> element contains HTML that is not rendered when the page loads but can be cloned and inserted into the DOM by JavaScript.

Question 50: Which CSS Grid property defines the number and size of columns in a grid container?

column-template
grid-columns
grid-column-size
grid-template-columns (Correct answer)

Correct answer: grid-template-columns

The grid-template-columns property defines the column track sizes of a CSS Grid layout using values like fr units, px, or repeat().

Question 51: Which HTML5 API enables communication between a web page and a server without page reload?

XMLHttpRequest / Fetch API
All of the above (Correct answer)
Server-Sent Events
WebSocket API

Correct answer: All of the above

XMLHttpRequest, the Fetch API, WebSocket, and Server-Sent Events all allow web pages to communicate with servers without a full page reload.

Question 52: Which format is natively supported for subtitles and captions in HTML5 <track> elements?

WebVTT (.vtt) (Correct answer)
TTML (.ttml)
SRT (.srt)
SSA (.ssa)

Correct answer: WebVTT (.vtt)

WebVTT (Web Video Text Tracks) is the native HTML5 format for timed text tracks, used with the <track> element.

Question 53: Which of the following is an HTML5-based drawing app that is compatible with all modern browsers?

X-worlds
Muro (Correct answer)
hootsuite
csswarp

Correct answer: Muro

Explanation: <br> HTML5-based online drawing program Muro is a surprise capable drawing program that doesn't require Flash, plug-ins, or anything else—all you need is a browser that supports the latest technology. <br> <br> The program works in any HTML5-compatible browser (essentially all of them except Internet Explorer), however it's obviously a lot easier to use if you also have a drawing tablet. The program also works surprisingly well on your iPad, thanks to the touch screen, which is a great platform for a drawing app.

Question 54: In a Service Worker, what lifecycle event fires after installation, when the worker takes control of clients?

install
fetch
claim
activate (Correct answer)

Correct answer: activate

The 'activate' event fires after a Service Worker is installed and ready to take control, making it the right place to clean up old caches.

Question 55: Which canvas method draws an image onto the canvas?

addImage()
paintImage()
renderImage()
drawImage() (Correct answer)

Correct answer: drawImage()

The drawImage() method draws an image, canvas, or video onto the canvas at a specified position, with optional sizing and cropping.

CIW Advanced HTML5 & CSS3 Specialist (1D0-720)

The CIW Advanced HTML5 & CSS3 Specialist certification validates proficiency in HTML5 semantic structure, multimedia APIs, interactive forms, and CSS3 responsive design techniques used in modern web development.

Questions

75 min

Time Limit

73%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds