How does the element improve forms, and how is it associated with an input?

It provides an accessible caption and expands the clickable area. Associate it by matching the label's `for` attribute to the input's `id`, or by wrapping the input inside the label.

List five common values of the type attribute on an element and what each does.

`text` (single-line text), `password` (masked text), `email` (email with validation), `number` (numeric input), `checkbox` (toggle), `radio` (mutually exclusive choice), `date`, `file`, `submit`, `hidden`.

What is the difference between radio buttons and checkboxes, and how are radios grouped?

Checkboxes allow multiple independent selections; radio buttons allow only one choice within a group. Radios are grouped by sharing the same `name` attribute.

Which element creates a multi-line text input, and which creates a dropdown selection list?

` ` creates a multi-line text input. ` ` with nested ` ` elements creates a dropdown list.

What does the placeholder attribute do, and why should it not replace a label?

It shows hint text inside an empty field that disappears on input. It is not a substitute for a ` ` because it vanishes when typing and is poorly handled by assistive technologies.

What does the required attribute do on a form input?

It marks the field as mandatory; the browser blocks form submission and shows a validation message if the field is left empty.

What is the role of the name attribute on form controls?

It is the key under which the control's value is submitted to the server (key/value pairs). Controls without a `name` are not submitted.

What attributes constrain numeric/range inputs for validation?

`min`, `max`, and `step` constrain the value range and increments; `pattern` constrains text against a regular expression; `maxlength`/`minlength` constrain text length.

What is the purpose of the and elements?

` ` groups related form controls together (often with a border), and ` ` provides a caption/title for that group, improving organization and accessibility.

What is semantic HTML, and why is it important?

Semantic HTML uses elements that convey the meaning/role of their content (e.g. ` `, ` `) rather than generic containers. It improves accessibility, SEO, maintainability, and machine readability.

🌍 Front-end Web Development · flashcards

Front-end Web Development HTML Flashcards

51 question-and-answer cards covering HTML as it is examined in Front-end Web Development. 24 of them are printed below, taken from across the deck — no signup, no paywall on the preview.

51Cards in deck

24Free preview

6Syllabus topics

~173Chars per answer

FreePrice

24 sample cards from the HTML deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

How does the <label> element improve forms, and how is it associated with an input?
It provides an accessible caption and expands the clickable area. Associate it by matching the label's `for` attribute to the input's `id`, or by wrapping the input inside the label.
List five common values of the type attribute on an <input> element and what each does.
`text` (single-line text), `password` (masked text), `email` (email with validation), `number` (numeric input), `checkbox` (toggle), `radio` (mutually exclusive choice), `date`, `file`, `submit`, `hidden`.
What is the difference between radio buttons and checkboxes, and how are radios grouped?
Checkboxes allow multiple independent selections; radio buttons allow only one choice within a group. Radios are grouped by sharing the same `name` attribute.
Which element creates a multi-line text input, and which creates a dropdown selection list?
`<textarea>` creates a multi-line text input. `<select>` with nested `<option>` elements creates a dropdown list.
What does the placeholder attribute do, and why should it not replace a label?
It shows hint text inside an empty field that disappears on input. It is not a substitute for a `<label>` because it vanishes when typing and is poorly handled by assistive technologies.
What does the required attribute do on a form input?
It marks the field as mandatory; the browser blocks form submission and shows a validation message if the field is left empty.
What is the role of the name attribute on form controls?
It is the key under which the control's value is submitted to the server (key/value pairs). Controls without a `name` are not submitted.
What attributes constrain numeric/range inputs for validation?
`min`, `max`, and `step` constrain the value range and increments; `pattern` constrains text against a regular expression; `maxlength`/`minlength` constrain text length.
What is the purpose of the <fieldset> and <legend> elements?
`<fieldset>` groups related form controls together (often with a border), and `<legend>` provides a caption/title for that group, improving organization and accessibility.
What is semantic HTML, and why is it important?
Semantic HTML uses elements that convey the meaning/role of their content (e.g. `<nav>`, `<article>`) rather than generic containers. It improves accessibility, SEO, maintainability, and machine readability.
Name the main HTML5 semantic sectioning/structural elements.
`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`, and `<figure>`/`<figcaption>`.
What is the difference between <article> and <section>?
`<article>` is a self-contained, independently distributable piece of content (e.g. a blog post, comment). `<section>` is a thematic grouping of content, typically with a heading, that is part of a larger whole.
What is the purpose of the <main> element, and how many should a page have?
`<main>` contains the dominant, unique content of the document. There should be only one visible `<main>` per page, and it should not be nested inside `<article>`, `<aside>`, `<header>`, `<footer>`, or `<nav>`.
What is the <nav> element used for, and should every group of links be wrapped in it?
`<nav>` marks a section of major navigation links (e.g. main menu, table of contents). Not every set of links needs it — it's reserved for primary navigation blocks.
What is the difference between <header> and the <head> element?
`<head>` is document metadata (title, meta, links) not displayed in the page body. `<header>` is a visible introductory section of a page or sectioning element, often containing logos, headings, and intro nav.
When should you use the <aside> element?
For content tangentially related to the surrounding content, such as sidebars, pull quotes, related links, or advertisements.
What is the purpose of the <figure> and <figcaption> elements?
`<figure>` groups self-contained media (images, diagrams, code) referenced from the main content, and `<figcaption>` provides a caption for that figure.
What is the role of ARIA in HTML, and what is the first rule of ARIA?
ARIA (Accessible Rich Internet Applications) adds roles/states/properties to improve accessibility for assistive tech. The first rule: if a native HTML element with the needed semantics exists, use it instead of adding ARIA.
What is the Geolocation API and which method retrieves the user's position?
An HTML5 API to access the device's geographic location. `navigator.geolocation.getCurrentPosition(success, error)` retrieves the current position (requires user permission).
What is the difference between localStorage and sessionStorage in the Web Storage API?
Both store key/value string pairs per origin. `localStorage` persists with no expiration (survives browser restarts); `sessionStorage` lasts only for the duration of the page session (cleared when the tab closes).
What is the <canvas> element, and how do you obtain a 2D drawing context?
`<canvas>` is a bitmap drawing surface scriptable with JavaScript. Get its 2D context with `canvas.getContext("2d")`, then draw with methods like `fillRect()` and `arc()`.
What is the purpose of the HTML5 <video> and <audio> elements, and how do you supply fallbacks/formats?
They embed native video/audio playback without plugins. Multiple `<source>` children provide alternative file formats so the browser picks one it supports; text between the tags is fallback content.
Name three HTML5 JavaScript APIs (besides storage) introduced to enrich web apps.
Examples: Geolocation API, Web Storage API, Canvas API, Drag and Drop API, Web Workers, History API (`pushState`), WebSockets, and the Fetch API.
What is the difference between the <progress> and <meter> elements?
`<progress>` represents the completion progress of a task (e.g. a download). `<meter>` represents a scalar measurement within a known range (a gauge), such as disk usage or a score.

What this deck covers

The HTML deck follows the Front-end Web Development HTML syllabus — 2 chapters and 6 topics — so questions land on material that is genuinely examinable rather than trivia around it. That works out to roughly 25.5 cards per chapter.

Answers are written to be recallable, not just readable — averaging about 173 characters, which is long enough to carry the reasoning and short enough to say out loud.

A deck like this earns its keep on the second and third pass. Read the syllabus first so you know the shape of the subject, then use the cards to find the specific facts that have not stuck.

HTML flashcards FAQ

How many HTML flashcards are in this Front-end Web Development deck?

51 cards. This page previews 24 of them, sampled evenly across the deck so you can judge the difficulty before installing anything.

Are these Front-end Web Development flashcards free?

Yes. The preview here is free to read with no signup, and the full 51-card deck is free inside the Examius app.

What do the HTML cards cover?

They follow the Front-end Web Development HTML syllabus — 2 chapters and 6 topics — so the questions track what is actually examinable.

How should I use these flashcards?

Read the syllabus first so you know the shape of the subject, then drill the deck. Examius schedules each card with spaced repetition, so cards you keep missing come back sooner and ones you know drift further apart.