Frontend Web Development HTML & Document Structure Syllabus

What is the difference between <section> and <article>?

<article> is self-contained, independently distributable content (e.g., a blog post or comment). <section> is a thematic grouping of related content, typically with a heading. An article can contain sections and vice versa.

How many <main> elements should a page have, and can it be nested inside <article> or <aside>?

Only one visible <main> per document. It must not be a descendant of <article>, <aside>, <header>, <footer>, or <nav>.

What is the purpose of the <figure> and <figcaption> elements?

<figure> groups self-contained content (image, diagram, code, etc.) that is referenced from the main flow; <figcaption> provides an optional caption. The caption must be the first or last child of <figure>.

What does the <time> element do, and what makes it machine-readable?

<time> marks up dates/times. The datetime attribute holds a machine-readable value (e.g., <time datetime="2026-07-01">July 1</time>), which tools and search engines can parse regardless of the human-readable text.

What is a document outline and why should heading levels not be skipped?

The document outline is the hierarchical structure implied by heading ranks. Skipping levels (e.g., <h1> to <h3>) breaks the logical hierarchy for assistive technology and SEO; heading levels should increase by one at a time.

How many <h1> elements are recommended per page in modern SEO practice?

Conventionally one <h1> per page representing the main topic. While HTML permits multiple, a single top-level <h1> gives the clearest outline and is the safest for accessibility and SEO.

What is the role of the <title> element, and where does it appear to users?

<title> (in <head>) sets the document's name shown in the browser tab, bookmarks, and search-result headlines. It is required and strongly influences SEO and click-through rate.

What does the meta description tag do, and is it a ranking factor?

<meta name="description" content="..."> supplies a summary often used as the search snippet. It is not a direct ranking factor but influences click-through rate. There is no meta keywords benefit in modern SEO.

What are Open Graph meta tags used for?

og: meta tags (e.g., og:title, og:description, og:image, og:url) control how a page appears when shared on social platforms like Facebook and LinkedIn, defining the preview card's title, text, and image.

What does a canonical link tag do?

<link rel="canonical" href="..."> tells search engines the preferred/master URL for duplicate or similar pages, consolidating ranking signals and avoiding duplicate-content dilution.

What is the difference between the action and method attributes of a <form>?

action is the URL that receives the submitted data; method is the HTTP verb used to send it (GET appends data to the URL as a query string; POST sends it in the request body).

What is the purpose of <fieldset> and <legend>?

<fieldset> groups related form controls (drawing a border by default), and <legend> gives that group a caption/title. This improves both structure and accessibility for related inputs like radio-button groups.

Which input type is best for email entry, and what does it provide automatically?

<input type="email">. It offers built-in format validation and, on mobile, an email-optimized keyboard. Add multiple to allow a comma-separated list of addresses.

Name five HTML5 input types beyond text and explain one benefit they share.

Examples: number, email, url, date, range, color, tel, search, password. They provide semantic meaning, tailored mobile keyboards/pickers, and built-in native validation.

What is the difference between the name and id attributes on a form input?

name is the key sent to the server with the input's value on submission (required for the data to be submitted). id uniquely identifies the element in the DOM and is used to associate a <label> via for.

What do the placeholder and value attributes do on an input, and how do they differ?

value is the input's actual (submittable) initial content; placeholder is a greyed-out hint that disappears on typing and is never submitted. Placeholder is not a substitute for a label.

How do you correctly associate a <label> with its form control for accessibility?

Either wrap the control inside the <label>, or use <label for="inputId"> matching the control's id. This makes clicking the label focus the control and lets screen readers announce it.

When should you use aria-label instead of a <label> element?

Use aria-label to provide an accessible name when no visible text label exists (e.g., an icon-only search button). A visible <label> is preferred when possible; aria-label overrides it if both are present.

What are the semantic differences between <input type="radio"> and <input type="checkbox">?

Radio buttons sharing the same name form a mutually exclusive group (only one selectable). Checkboxes are independent on/off toggles; multiple can be checked. Both submit only when checked.

How do you create a dropdown menu, and how do you preselect an option?

Use <select> containing <option> elements. Add the selected attribute to the <option> you want preselected. <optgroup> can group options under labels; multiple allows multi-select.

What distinguishes <textarea> from <input type="text">, and how is its initial value set?

<textarea> is a multi-line text control sized by rows and cols attributes. Unlike <input>, its initial value goes between the tags (not in a value attribute), e.g., <textarea>default</textarea>.

What are the three values of a button's type attribute, and what is the default inside a form?

type="submit" (submits the form), type="reset" (clears it), and type="button" (no default action, for JS). Inside a form the default is submit, which can cause accidental submissions if unspecified.

Which HTML attributes enable native form validation? Name four.

required (must be filled), pattern (regex the value must match), min/max and step (numeric/date bounds), maxlength/minlength (character limits), and type-based validation (email, url). The browser blocks submission if constraints fail.

What does the novalidate attribute do, and where is it placed?

Placed on the <form> element, novalidate disables the browser's native constraint validation on submit, letting the form submit even if inputs are invalid (typically to defer to custom JS validation).

What CSS pseudo-classes reflect native form validation state?

:valid and :invalid match controls that pass or fail their constraints; :required and :optional match by requirement; :in-range and :out-of-range apply to numeric inputs with min/max.

What are the required steps to embed audio with native controls and a fallback?

Use <audio controls> with one or more <source src="..." type="..."> children for different formats, plus fallback text/content between the tags for unsupported browsers. Attributes include autoplay, loop, and muted.

What key attributes control <video> playback behavior?

controls (show UI), autoplay (start automatically, usually requires muted), loop (repeat), muted (no sound), poster (placeholder image before play), and preload (none/metadata/auto hint for buffering).

How do you add captions/subtitles to an HTML5 <video>?

Add a <track> element inside <video> with kind="captions" (or subtitles), src pointing to a WebVTT (.vtt) file, srclang for the language, and label for the menu name. Use default to enable one by default.

What is an <iframe>, and which attribute improves its security?

An <iframe> embeds another HTML document within the current page (via src). The sandbox attribute restricts the framed content's capabilities (scripts, forms, popups), and allow controls features like camera; loading="lazy" defers offscreen loading.

What is the fundamental rendering difference between <canvas> and <svg>?

<canvas> is a raster, immediate-mode bitmap drawn pixel-by-pixel via JavaScript (no DOM for shapes; resolution-dependent). <svg> is retained-mode vector graphics where each shape is a DOM element (scalable, styleable with CSS, resolution-independent).

How do you obtain a 2D drawing context on a <canvas>, and what does the canvas need for accessibility?

In JavaScript: const ctx = canvas.getContext('2d'); then draw with methods like fillRect and beginPath. For accessibility, provide fallback content between the <canvas> tags and/or an appropriate ARIA label, since canvas pixels are invisible to assistive tech.