Front-end Web Development HTML Syllabus

What is the difference between the id and class attributes?

`id` must be unique within the page and identifies a single element. `class` can be shared by many elements for grouping/styling, and an element can have multiple classes.

What are custom data attributes and how are they written and accessed?

`data-*` attributes store custom data on elements, e.g. `data-user-id="5"`. In JavaScript they are accessed via `element.dataset.userId`.

What does a boolean attribute mean in HTML? Give examples.

A boolean attribute is true simply by being present; its value is irrelevant. Examples: `disabled`, `checked`, `required`, `readonly`, `selected`.

What does the target="_blank" attribute do on an anchor, and what security attribute should accompany it?

`target="_blank"` opens the link in a new tab/window. It should be paired with `rel="noopener noreferrer"` to prevent the new page from accessing `window.opener`.

What is the purpose of the alt attribute on images?

It provides alternative text describing the image for screen readers, search engines, and as a fallback when the image cannot be displayed.

What element wraps form controls, and which two attributes commonly control submission?

The `<form>` element. The `action` attribute specifies the URL to send data to, and the `method` attribute specifies the HTTP method (`GET` or `POST`).

What is the difference between the GET and POST methods in an HTML form?

GET appends form data to the URL as a query string (visible, limited length, used for retrieval/idempotent requests). POST sends data in the request body (not in URL, no length limit, used to change server state).

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.