HTML5 Advanced Topics

HTML5 introduced a large set of new elements aimed at improving semantic meaning, multimedia support, and interactive capabilities. Key additions include:

Semantic structural elements:

• `` — introductory content or navigational aids for a page or section
• `` — a block of navigation links; screen readers use this as a landmark
• `` — the primary content of the document; there should only be one per page
• `` — self-contained content that could stand alone (blog post, news article, forum post)
• `` — a thematic grouping of content, typically with its own heading
• `` — content tangentially related to the surrounding content (sidebars, pull quotes, ads)
• `` — footer for its nearest sectioning content or the page itself
• and — self-contained media (images, diagrams) with an optional caption
• <address> — contact information for the nearest or
• <time> — represents a specific time or date, with an optional machine-readable datetime attribute
• <mark> — text highlighted for reference (search result highlighting)

Multimedia elements:

• `` — embeds audio with built-in browser controls; no Flash required
• `` — embeds video with controls, autoplay, loop, and poster image support
• — specifies multiple media sources for and `` to handle format compatibility
• — provides text tracks (captions, subtitles, chapters) for
• `— art-direction wrapper for`, allowing different image sources for different conditions

Interactive / scripting elements:

• `` — scriptable bitmap drawing surface (2D and WebGL)
• `` — inline scalable vector graphics (not new to HTML5 but newly inline-embeddable)
• and — a native disclosure widget (accordion-like); no JavaScript needed
• `` — a native modal/non-modal dialog element with built-in accessibility roles

Form elements (new input types and elements):

• ,, , — covered separately
• New `types:email,url,tel,number,range,date,time,color,search`

Common interview follow-ups:

• What is the difference between and? An is independently redistributable; a is just a thematic grouping that requires surrounding context.
• Why do semantics matter? They improve accessibility (screen reader landmarks), SEO (content hierarchy), and code readability.
• <b> vs <strong>, <i> vs <em> — presentational vs semantic emphasis; <strong> and <em> carry meaning for screen readers and search engines.

HTML5 introduced native multimedia elements that eliminated the need for third-party plugins like Flash or Silverlight.

`` element:

  <p>Your browser doesn't support video. <a href="video.mp4">Download it</a>.</p>

Key attributes: controls, autoplay, muted, loop, poster, preload (none, metadata, auto), playsinline (important on iOS).

`` element:

Multiple `` elements: The browser picks the first format it supports. Common format considerations:

• Video: MP4/H.264 has universal support; WebM/VP9 or AV1 for better compression
• Audio: MP3 is universal; OGG/Vorbis and AAC are alternatives

`` element: Provides WebVTT text tracks for captions, subtitles, descriptions, chapters, and metadata. This is essential for accessibility (WCAG 1.2 requires captions for video).

`` element: For responsive images with art direction:

  <img src="small.jpg" alt="Description">

The <img> inside `is the fallback and the element that carries thealt` text.

Key JavaScript Media API: The HTMLMediaElement API exposes .play(), .pause(), .currentTime, .duration, .volume, .muted, .playbackRate, and events like play, pause, ended, timeupdate. This is how custom video players are built.

Common gotchas interviewers ask:

• autoplay is blocked by most browsers unless muted is also set. Autoplay with sound requires a prior user gesture.
• playsinline must be set on iOS to prevent the video from entering fullscreen automatically.
• Omitting alt on the <img> inside `` is a common accessibility miss.
• preload="metadata" is the sensible default — it fetches duration and dimensions without downloading the whole file.
• For accessible video, captions (``) differ from subtitles: captions also include non-speech audio information (e.g., "[door slams]") and are intended for deaf viewers.

The viewport meta tag is placed in the `` and controls how a browser renders a page on a mobile device.

Without it, mobile browsers use a virtual viewport (typically 980px wide) to render desktop-sized pages and then scale them down, making text tiny and layouts broken.

Common attribute values in content:

• width=device-width — sets the viewport width to the actual device screen width in CSS pixels, not physical pixels
• initial-scale=1 — no zoom applied on page load; 1:1 ratio between CSS pixels and device-independent pixels
• minimum-scale / maximum-scale — limits how far users can zoom in or out
• user-scalable=no — disables user zoom entirely

CSS pixels vs physical pixels: The width=device-width value uses CSS pixels (also called logical pixels), not physical pixels. A device with a 1080px physical screen and a 3x device pixel ratio (window.devicePixelRatio === 3) reports a CSS width of 360px. This is why you use @media (max-width: 768px) in CSS and it works predictably across high-density screens.

Why this matters for media queries: Media query width values match the CSS viewport width set by the viewport meta tag, not the physical screen resolution. Without the tag, @media (max-width: 600px) may never trigger on a mobile device that defaults to a 980px virtual viewport.

Accessibility concern with user-scalable=no: Preventing zoom violates WCAG 1.4.4 (Resize Text) and is harmful to users with low vision. Avoid user-scalable=no and maximum-scale=1 in production. Safari on iOS has partially ignored these restrictions since iOS 10 anyway.

interactive-widget (newer attribute): Controls how virtual keyboards affect the viewport layout on mobile. The value resizes-content (the default on most browsers) shrinks the viewport when the on-screen keyboard appears; overlays-content keeps the viewport full size. This matters for sticky bottom UI (e.g., fixed footers, chat inputs).

Common interview follow-up: What happens if you omit the viewport meta tag on a responsive site? The browser defaults to a wide virtual viewport, your min-width media queries never fire for small screens, and the page appears zoomed out. The meta tag is a prerequisite for responsive design to work correctly.

The `` element provides a resolution-dependent bitmap surface that you draw on programmatically with JavaScript. It is a rectangular pixel grid with no built-in accessibility tree — everything rendered on it is invisible to screen readers unless you provide fallback content inside the tags.

  Your browser does not support canvas.

The 2D rendering context:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 150, 100);

ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.font = '24px sans-serif';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 50);

Key 2D context capabilities:

• Shapes: fillRect, strokeRect, clearRect, arc, bezierCurveTo, quadraticCurveTo
• Text: fillText, strokeText, measureText
• Images: drawImage (can draw <img>, , another, ImageBitmap)
• Transformations: translate, rotate, scale, setTransform
• Compositing: globalAlpha, globalCompositeOperation
• Pixel manipulation: getImageData, putImageData — raw access to individual RGBA pixels
• Gradients and patterns: createLinearGradient, createRadialGradient, createPattern

WebGL context: canvas.getContext('webgl') or 'webgl2' gives access to the GPU-accelerated 3D graphics API. Used directly or through libraries like Three.js, Babylon.js, or PixiJS for games and data visualizations.

vs:

• Canvas is a raster (pixel-based) surface. It is stateless — once you draw something, the canvas has no memory of individual shapes. Suitable for pixel manipulation, particle systems, games, real-time visualizations.
• SVG is a vector-based, retained-mode DOM. Individual shapes are DOM nodes, are accessible, are styleable with CSS, and can respond to events. Suitable for charts, icons, interactive diagrams.

Common gotchas:

• Canvas width and height attributes set the drawing buffer size in CSS pixels. Setting size via CSS alone stretches/blurs the content — always set both the HTML attributes and optionally scale for high-DPI screens using window.devicePixelRatio.
• High-DPI (Retina) rendering: multiply the canvas width/height by devicePixelRatio and scale the context with ctx.scale(dpr, dpr) to avoid blurry rendering on high-density screens.
• Canvas content is not accessible by default. Provide a text description or manage an ARIA live region outside the canvas to describe dynamic content.
• Canvas is not indexed by search engines — do not place text-only content exclusively on a canvas.

HTML5 expanded the form toolkit significantly with new input types, helper elements, and built-in validation, reducing reliance on JavaScript and improving accessibility.

New `` types:

• email — validates email format; shows email keyboard on mobile
• url — validates URL format
• tel — shows numeric/dial keyboard on mobile; no format validation (phone formats vary globally)
• number — numeric spinner with min, max, and step attributes
• range — slider input with min, max, step
• date, time, datetime-local, month, week — date/time pickers; browser UI varies
• color — color picker widget
• search — search field with platform-specific styling and a clear button

New form elements:

• — associates a list of suggested options with an via its id; the user can still type freely: ```html

- `` — displays the result of a calculation; semantically linked to form inputs via the `for` attribute:
  ```html

  50

• — represents task completion; `value` and `max` attributes define the completion ratio. Without `value`, it shows an indeterminate animation: html 70% ``
• — represents a scalar measurement within a known range (not for progress). Supports `min`, `max`, `low`, `high`, `optimum` to give semantic meaning to where the value falls: html 60% ``

New attributes on existing elements:

• placeholder — hint text shown when the field is empty
• required — field must be filled before submission
• pattern — regex validation
• autofocus — automatically focuses the element on page load
• autocomplete — hints to the browser's autofill feature
• novalidate (on ``) — disables built-in browser validation
• multiple — allows multiple values on email and file inputs
• form — associates an input with a `byid`, even if the input is outside the form in the DOM

Common interview gotchas:

• is a suggestion list, not a; users can still enter arbitrary text. For constrained choices, use ``.
• is for ongoing tasks (file upload, loading); is for static measurements (disk usage, score). Using them interchangeably is a common mistake.
• Built-in HTML5 validation (:valid/:invalid pseudo-classes, required, pattern) is useful but limited. Complex validation or custom error messages still require JavaScript using the Constraint Validation API.