Title: HTML CSS Fundamentals — LearnCoachAssist

Q: What is the purpose of HTML5 semantic elements?
A: HTML5 semantic elements provide meaningful structure to web pages. They describe the role of their content rather than just its appearance. Examples include <header>, <nav>, <main>, <article>, <section>, and <footer>. They improve accessibility, SEO, and code readability.

Q: What is the difference between <section> and <div>?
A: <section> is a semantic element that represents a thematic grouping of content, typically with a heading. <div> is a non-semantic generic container with no inherent meaning. Use <section> when content forms a logical group; use <div> purely for styling or layout purposes.

Q: What is the <article> element used for?
A: The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include:
- Blog posts
- News articles
- Forum posts
- Product cards
Each <article> should make sense on its own, even outside the context of the page.

Q: What is the purpose of the <nav> element?
A: The <nav> element represents a section of a page that contains navigation links, either within the site or to other sites. It is intended for major navigation blocks, not every group of links. Screen readers use it to determine what to skip or jump to directly.

Q: What does the <figure> and <figcaption> combination do?
A: <figure> wraps self-contained content like images, diagrams, or code snippets that are referenced in the main flow. <figcaption> provides a caption or legend for the figure.
Example:
<figure><img src="chart.png"><figcaption>Sales data</figcaption></figure>

Q: What are the main HTML5 form input types?
A: HTML5 introduced many input types beyond text and password:
- email – validates email format
- url – validates URL format
- number – numeric input with spinners
- range – slider control
- date, time, datetime-local
- color – color picker
- search – search field
- tel – telephone number

Q: What is the purpose of the <label> element in forms?
A: The <label> element associates a text description with a form control. It improves accessibility by allowing screen readers to announce the label when a user focuses the input.
Two methods:
<label for="name">Name</label><input id="name">
or wrapping:
<label>Name <input></label>

Q: What does the required attribute do on form inputs?
A: The required attribute is a boolean HTML5 attribute that specifies an input field must be filled out before submitting the form. The browser performs built-in validation and displays a default error message if the field is empty. Example: <input type="email" required>

Q: What is the purpose of ARIA attributes in HTML?
A: ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for users with disabilities. Key attributes include:
- aria-label – provides an accessible name
- aria-hidden – hides elements from screen readers
- aria-live – announces dynamic content changes
- role – defines the purpose of an element
Use ARIA only when native HTML semantics are insufficient.

Q: What is the alt attribute and why is it important for accessibility?
A: The alt attribute provides alternative text for images. It is critical for accessibility because:
- Screen readers read it aloud for visually impaired users
- It displays when images fail to load
- It helps search engines understand image content
Decorative images should use an empty alt="" so screen readers skip them.

Q: What are CSS selectors and what are the basic types?
A: CSS selectors target HTML elements for styling. Basic types include:
- Element: p { } – selects all paragraphs
- Class: .intro { } – selects elements with class "intro"
- ID: #header { } – selects the element with id "header"
- Universal: * { } – selects all elements
- Attribute: [type="text"] { } – selects by attribute

Q: What is the difference between descendant and child selectors in CSS?
A: The descendant selector (div p) selects all <p> elements anywhere inside a <div>, no matter how deeply nested.
The child selector (div > p) selects only <p> elements that are direct children of a <div>. Child selectors are more specific and performant.

Q: What are CSS pseudo-classes and give common examples?
A: Pseudo-classes select elements based on their state or position without adding extra classes. Common examples:
- :hover – mouse is over the element
- :focus – element has keyboard focus
- :first-child – first child of its parent
- :nth-child(n) – nth child of its parent
- :not(selector) – elements that do not match
- :checked – checked inputs

Q: What are CSS pseudo-elements and how do they differ from pseudo-classes?
A: Pseudo-elements style specific parts of an element, written with ::. They differ from pseudo-classes which target states.
- ::before – inserts content before the element
- ::after – inserts content after the element
- ::first-line – styles the first line of text
- ::first-letter – styles the first letter
- ::placeholder – styles placeholder text

Q: How does CSS specificity work?
A: CSS specificity determines which rule applies when multiple rules target the same element. It is calculated as a four-part value (a, b, c, d):
- a: Inline styles (style="") = 1000
- b: ID selectors = 100
- c: Class, attribute, pseudo-class = 10
- d: Element, pseudo-element = 1
Higher specificity wins. !important overrides all but should be avoided.

Q: What is the CSS box model?
A: The CSS box model describes how every element is rendered as a rectangular box with four layers:
- Content – the actual text or image
- Padding – space between content and border
- Border – surrounds the padding
- Margin – space outside the border
By default, width applies only to the content area. Use box-sizing: border-box to include padding and border.

Q: What does box-sizing: border-box do?
A: box-sizing: border-box changes how the width and height of an element are calculated. Instead of adding padding and border on top of the specified width, they are included within it.
Example: An element with width: 200px; padding: 20px; border: 5px solid; will be exactly 200px wide total instead of 250px.

Q: What are the CSS position values and how do they differ?
A: CSS position values:
- static – default, follows normal document flow
- relative – offset from its normal position, still occupies original space
- absolute – removed from flow, positioned relative to nearest positioned ancestor
- fixed – removed from flow, positioned relative to the viewport
- sticky – toggles between relative and fixed based on scroll position

Q: What is the difference between position absolute and fixed?
A: position: absolute positions an element relative to its nearest positioned ancestor (an ancestor with position other than static). It scrolls with the page.
position: fixed positions an element relative to the viewport. It stays in place even when the page is scrolled. Both remove the element from the normal document flow.

Q: How does the CSS z-index property work?
A: z-index controls the stacking order of positioned elements (those with position other than static). Higher values appear in front of lower values.
Key rules:
- Only works on positioned elements
- Creates a stacking context
- Child elements are confined within their parent's stacking context
- Default value is auto (equivalent to 0)

Q: What is Flexbox and when should you use it?
A: Flexbox (Flexible Box Layout) is a CSS layout model for distributing space and aligning items in a one-dimensional direction (row or column). Use it for:
- Centering elements vertically and horizontally
- Navigation bars
- Card layouts in a single row
- Distributing space evenly among items
Enable it with display: flex on the container.

Q: What are the main Flexbox container properties?
A: Key Flexbox container properties (applied to the parent):
- display: flex – activates flexbox
- flex-direction – row, column, row-reverse, column-reverse
- justify-content – aligns items on the main axis
- align-items – aligns items on the cross axis
- flex-wrap – nowrap, wrap, wrap-reverse
- gap – spacing between items

Q: What are the main Flexbox item properties?
A: Key Flexbox item properties (applied to children):
- flex-grow – how much the item grows relative to siblings (default 0)
- flex-shrink – how much the item shrinks (default 1)
- flex-basis – initial size before growing or shrinking
- flex – shorthand for grow, shrink, basis (e.g., flex: 1 0 auto)
- align-self – overrides align-items for this item
- order – changes visual order

Q: How do you center an element both vertically and horizontally with Flexbox?
A: The simplest way to center an element with Flexbox:
display: flex;
justify-content: center;
align-items: center;
Apply these to the parent container. The parent must have a defined height (e.g., min-height: 100vh) for vertical centering to be visible. This centers all direct children.

Q: What is CSS Grid and how does it differ from Flexbox?
A: CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously, while Flexbox is one-dimensional.
Use Grid for:
- Full page layouts
- Complex grid-based designs
- When you need precise control over rows AND columns
Use Flexbox for simpler, single-axis layouts. They can be combined together.

Q: What are the basic CSS Grid container properties?
A: Key Grid container properties:
- display: grid – activates grid layout
- grid-template-columns – defines column sizes (e.g., 1fr 2fr 1fr)
- grid-template-rows – defines row sizes
- gap – space between grid cells
- grid-template-areas – names regions of the grid
- justify-items / align-items – aligns items within cells

Q: What does the fr unit mean in CSS Grid?
A: The fr unit stands for fraction and represents a share of the available space in a grid container.
Example: grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the others.
It is similar to Flexbox's flex-grow but for Grid. The fr unit distributes space after fixed and content-sized tracks are calculated.

Q: How do you place items in specific grid cells?
A: Grid items can be placed using line-based placement:
- grid-column: 1 / 3 – spans from column line 1 to 3
- grid-row: 2 / 4 – spans from row line 2 to 4
- grid-area: 1 / 1 / 3 / 3 – shorthand (row-start / col-start / row-end / col-end)
Or using named areas:
grid-area: header; (with grid-template-areas on the container).

Q: What is the repeat() function in CSS Grid?
A: The repeat() function is a shorthand for repeating track definitions.
grid-template-columns: repeat(3, 1fr) is equivalent to 1fr 1fr 1fr.
Advanced usage:
- repeat(auto-fill, minmax(200px, 1fr)) – creates as many columns as fit
- repeat(auto-fit, minmax(200px, 1fr)) – same but collapses empty tracks
This enables responsive grids without media queries.

Q: What are CSS media queries?
A: Media queries apply styles conditionally based on device characteristics. Syntax:
@media (max-width: 768px) { ... }
Common features:
- min-width / max-width – viewport width
- orientation – portrait or landscape
- prefers-color-scheme – dark or light mode
- prefers-reduced-motion – motion preferences
They are the foundation of responsive web design.

Q: What is the mobile-first approach in responsive design?
A: Mobile-first means writing base CSS for small screens and adding complexity for larger ones using min-width media queries:
/* Base: mobile */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) { .container { width: 750px; } }
/* Desktop */
@media (min-width: 1024px) { .container { width: 960px; } }
This results in faster mobile loading and cleaner progressive enhancement.

Q: What is the viewport meta tag and why is it important?
A: The viewport meta tag controls how a page is displayed on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Without it, mobile browsers render the page at a desktop width (typically 980px) and scale it down. This tag ensures the page uses the actual device width and is essential for responsive design to work properly.

Q: What are CSS custom properties (variables)?
A: CSS custom properties (variables) store reusable values. They are defined with -- prefix and accessed with var():
:root {
  --primary-color: #3498db;
  --spacing: 16px;
}
.button {
  background: var(--primary-color);
  padding: var(--spacing);
}
They cascade and inherit, can be scoped to elements, and can be changed dynamically with JavaScript.

Q: How can CSS variables be used for theming?
A: CSS variables make theming simple by defining theme values on a selector:
:root { --bg: #fff; --text: #333; }
[data-theme="dark"] { --bg: #1a1a1a; --text: #eee; }
Elements reference the variables:
body { background: var(--bg); color: var(--text); }
Toggle themes by changing the data-theme attribute with JavaScript. No need to rewrite any CSS rules.

Q: What are CSS transitions?
A: CSS transitions animate property changes smoothly over time. Syntax:
transition: property duration timing-function delay;
Example:
.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover { background: darkblue; }
Key properties:
- transition-property – which property to animate
- transition-duration – how long
- transition-timing-function – easing curve

Q: What are CSS timing functions?
A: Timing functions define the speed curve of transitions and animations:
- ease – slow start, fast middle, slow end (default)
- linear – constant speed
- ease-in – slow start
- ease-out – slow end
- ease-in-out – slow start and end
- cubic-bezier(x1,y1,x2,y2) – custom curve
- steps(n) – discrete steps

Q: What are CSS animations and how do they differ from transitions?
A: CSS animations use @keyframes to define multi-step sequences and can run automatically without a trigger. Transitions only animate between two states and require a trigger (like :hover).
Example:
@keyframes slide { from { left: 0; } to { left: 100px; } }
.box { animation: slide 2s ease infinite; }
Animations support looping, direction, delays, and complex multi-step sequences.

Q: What are the main CSS animation properties?
A: Key animation properties:
- animation-name – references a @keyframes rule
- animation-duration – how long one cycle takes
- animation-timing-function – speed curve
- animation-delay – wait before starting
- animation-iteration-count – number of cycles (infinite)
- animation-direction – normal, reverse, alternate
- animation-fill-mode – forwards, backwards, both

Q: What is the transform property in CSS?
A: The transform property applies 2D or 3D transformations to elements without affecting document flow. Common functions:
- translate(x, y) – moves the element
- rotate(deg) – rotates the element
- scale(x, y) – resizes the element
- skew(x, y) – skews the element
Example: transform: translateX(50px) rotate(45deg);
Transforms are GPU-accelerated and ideal for animations.

Q: What is the CSS display property and its common values?
A: The display property controls how an element is rendered:
- block – takes full width, starts on new line (div, p, h1)
- inline – flows with text, no width/height (span, a)
- inline-block – inline but respects width/height
- none – completely removed from layout
- flex – enables Flexbox
- grid – enables Grid

Q: What is the difference between display: none and visibility: hidden?
A: display: none completely removes the element from the document flow — it takes up no space and is invisible.
visibility: hidden makes the element invisible but it still occupies space in the layout.
Key difference for accessibility: display: none hides content from screen readers. visibility: hidden also hides from screen readers, but the layout space is preserved.

Q: What is the CSS float property and how does clearfix work?
A: float removes an element from normal flow and places it to the left or right, with text wrapping around it. Problem: floated elements cause their parent to collapse.
Clearfix solution:
.parent::after {
  content: "";
  display: table;
  clear: both;
}
Modern layouts using Flexbox or Grid have largely replaced floats for page layout.

Q: What is the difference between em and rem units in CSS?
A: em is relative to the font-size of the parent element, which can cause compounding when nested.
rem is relative to the root element's font-size (<html>), making it consistent everywhere.
Example: If root is 16px, 1.5rem = 24px always. But 1.5em inside a 20px parent = 30px.
Best practice: Use rem for consistent sizing and em for component-relative scaling.

Q: What are the common CSS length units?
A: CSS offers several length units:
Absolute:
- px – pixels (most common)
Relative:
- em – relative to parent font-size
- rem – relative to root font-size
- % – relative to parent dimension
- vw / vh – 1% of viewport width/height
- vmin / vmax – 1% of smaller/larger viewport dimension
- ch – width of the "0" character

Q: How does the CSS cascade determine which styles apply?
A: The CSS cascade resolves conflicts using this priority order (highest to lowest):
1. Importance – !important declarations
2. Origin – author styles > user styles > browser defaults
3. Specificity – inline > ID > class > element
4. Source order – later rules win when specificity is equal
Understanding the cascade prevents unexpected style overrides and reduces the need for !important.

Q: What is the :nth-child() pseudo-class and how is it used?
A: :nth-child() selects elements based on their position among siblings. It accepts formulas:
- :nth-child(3) – selects the 3rd child
- :nth-child(odd) – 1st, 3rd, 5th...
- :nth-child(even) – 2nd, 4th, 6th...
- :nth-child(3n) – every 3rd (3, 6, 9...)
- :nth-child(3n+1) – 1st, 4th, 7th...
Great for styling table rows and lists with alternating patterns.

Q: What is the difference between :nth-child() and :nth-of-type()?
A: :nth-child(n) counts all sibling elements regardless of type.
:nth-of-type(n) counts only siblings of the same element type.
Example: p:nth-child(2) selects a <p> only if it is the 2nd child overall. p:nth-of-type(2) selects the 2nd <p> regardless of other sibling types. Use :nth-of-type() when elements are mixed.

Q: What is the object-fit property in CSS?
A: object-fit controls how replaced content (like <img> or <video>) is resized to fit its container:
- fill – stretches to fill (default, may distort)
- contain – scales to fit, preserving aspect ratio
- cover – scales to cover, cropping if needed
- none – original size, may overflow
- scale-down – uses none or contain, whichever is smaller

Q: What is the clamp() function in CSS?
A: clamp(min, preferred, max) sets a value that adapts between a minimum and maximum range. It is especially useful for fluid typography:
font-size: clamp(1rem, 2.5vw, 2rem);
This means the font size will be at least 1rem, ideally 2.5vw, but never more than 2rem. It replaces many media queries for responsive sizing.

Q: What is the minmax() function in CSS Grid?
A: minmax(min, max) defines a size range for grid tracks. The track will be at least the min and at most the max.
Example:
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
This creates a responsive grid where columns are at least 250px wide but expand to fill available space. Combined with auto-fill, it creates responsive layouts without media queries.

Q: What is the role of the <!DOCTYPE html> declaration?
A: <!DOCTYPE html> tells the browser to render the page in standards mode using the HTML5 specification. It must be the very first line of the document, before <html>. Without it, browsers fall back to quirks mode, emulating legacy non-standard behavior that breaks modern CSS layouts and box-model handling.

Q: What are the required components of a minimal valid HTML5 document?
A: A minimal HTML5 page contains:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>
<body></body>
</html>
The lang attribute on <html> and a <meta charset> declaration are essential for accessibility and correct character encoding.

Q: What does the meta charset tag do?
A: <meta charset="UTF-8"> declares the character encoding used by the document. UTF-8 supports virtually every character from every language, including emojis. It must appear in the first 1024 bytes of the document so the browser does not have to re-parse the page. Missing it can cause mojibake (garbled characters) in non-ASCII text.

Q: What is the purpose of the <head> element?
A: The <head> contains metadata about the document that is not rendered as visible content: title, character set, viewport settings, CSS links, scripts, Open Graph tags, and SEO information. Only one <head> per document. Elements like <title>, <meta>, <link>, and <style> belong here.

Q: How do <link rel="stylesheet"> and <script src> differ in loading behavior?
A: A stylesheet <link> is render-blocking: the browser pauses rendering until the CSS is fetched and parsed, because unstyled content (FOUC) flashes badly.
A <script> is also parser-blocking by default. Adding defer makes scripts download in parallel and execute after parsing; async lets them execute as soon as downloaded, which is unsafe for scripts that depend on the DOM.

Q: What does the defer attribute do on a <script> tag?
A: defer tells the browser to download the script in parallel with HTML parsing and execute it after the document is fully parsed, in document order. Deferred scripts run before DOMContentLoaded. They behave as if placed just before </body> but without blocking earlier parsing, improving perceived load time.

Q: What does the async attribute do on a <script> tag?
A: async downloads the script in parallel with parsing and executes it as soon as it finishes downloading, regardless of DOM state or other scripts. Order is not guaranteed between async scripts. Use async for independent scripts (analytics, ads) and defer for scripts that depend on the DOM or on each other.

Q: What are the differences between <strong> and <b>?
A: <strong> carries semantic importance: screen readers may announce it with emphasis, and search engines may weight it. <b> is purely stylistic (bold) without implying importance.
Similarly, <em> conveys stress/emphasis semantically, while <i> is just italic styling (often used for technical terms or foreign phrases). Prefer the semantic tags when meaning matters.

Q: What is the difference between <ol> and <ul>?
A: <ul> is an unordered list rendered with bullets, used when order is irrelevant (shopping list, nav menu).
<ol> is an ordered list rendered with numbers, used when sequence matters (recipe steps, ranking). Both contain <li> items. Lists should only be used for actual list content, never as a layout hack (use Flexbox or Grid instead).

Q: What is the <dl>, <dt>, and <dd> trio used for?
A: This trio describes a description list (formerly definition list):
<dl> wraps the list, <dt> is the term, <dd> is its description.
Example: a glossary or FAQ where each term needs an explanation. A single <dt> may be followed by multiple <dd>s, and vice versa.

Q: How does the <a> tag's target="_blank" attribute affect security and performance?
A: target="_blank" opens the link in a new tab. Best practice: combine it with rel="noopener noreferrer":
- noopener prevents the new page from accessing window.opener (security: tabnabbing)
- noreferrer removes the Referer header (privacy)
Modern browsers default to noopener, but adding it explicitly is safer and more compatible.

Q: What is the rel="canonical" link and why is it used?
A: <link rel="canonical" href="https://example.com/page"> tells search engines which URL is the master version of a page. Use it when the same content is reachable via multiple URLs (with/without trailing slash, query parameters, or from different domains) to consolidate SEO ranking signals and prevent duplicate-content penalties.

Q: What is the difference between <header> and <head>?
A: <head> is a metadata container for the whole document (title, meta, links) and is never rendered as visible content.
<header> is a landmark representing introductory content for its nearest sectioning ancestor (often the page banner with logo and nav). It can appear multiple times per page (e.g., inside <article>) and is visible content.

Q: What are HTML content categories?
A: HTML elements belong to categories that describe how they may contain or be contained:
- Flow content – most body content
- Metadata content – lives in <head>
- Phrasing content – inline text-level elements
- Embedded content – images, video, audio
- Interactive content – links, form controls
Rules define which categories can nest inside which.

Q: What is the <small> element used for?
A: <small> represents side comments and fine print like copyright notices, legal disclaimers, or licensing terms. It is semantic (different from simply shrinking font size with CSS) and is typically rendered in smaller text by browsers. It should not be used purely to reduce font size for emphasis.

Q: What is the <time> element and why is it useful?
A: <time> represents a specific period in time. Its datetime attribute carries a machine-readable value:
<time datetime="2026-05-13">May 13</time>
This helps search engines, browsers, and assistive tech understand and process dates (e.g., offering to add events to calendars). The visible content can be human-friendly while the attribute stays precise.

Q: What is the difference between <meter> and <progress>?
A: <progress> represents the completion progress of a task (uploading, downloading, loading).
<meter> represents a scalar measurement within a known range, like disk usage, battery level, or a rating score.
Use progress for dynamic tasks, meter for static values that fluctuate within bounds. Both have min/max/value attributes.

Q: What is the <details> and <summary> pair used for?
A: This pair creates a native disclosure widget (collapsible section) without JavaScript:
<details>
  <summary>Click to expand</summary>
  Hidden content here.
</details>
Adding the open attribute shows the content by default. Useful for FAQs, spoilers, and progressively revealing content.

Q: What is the purpose of the <template> element?
A: <template> holds inert HTML markup that is not rendered on page load and not parsed as active content. JavaScript can clone and insert its contents dynamically. It is the standard way to declare reusable DOM fragments (better than stuffing hidden markup in <script> tags or injecting HTML strings, which can introduce XSS risks).

Q: What is the <slot> element used for in Web Components?
A: <slot> is a placeholder inside a shadow DOM that defines where light-DOM children provided by the consumer should be projected. Named slots (<slot name="header">) let users slot markup into specific regions:
<my-card><h1 slot="header">Title</h1></my-card>
It enables flexible, reusable custom components.

Q: How do data-* attributes work?
A: data-* attributes let you store custom data on any HTML element without affecting layout or behavior. The * must be a valid name:
<div data-user-id="42" data-role="admin"></div>
Access in JavaScript via element.dataset.userId. Common uses: tooltip text, JS component configuration, server-rendered IDs for client-side lookup.

Q: How does the <iframe> work and what are key security attributes?
A: <iframe> embeds another HTML page inside the current one. Security attributes:
- sandbox – restricts what the embedded page can do (no scripts, no forms, etc.)
- allow – grants specific feature permissions (camera, fullscreen)
- referrerpolicy – controls the Referer header sent
- loading="lazy" – defers loading until needed
Always embed trusted sources and consider sandboxing even trusted content.

Q: What does the loading="lazy" attribute do on images and iframes?
A: loading="lazy" tells the browser to defer fetching the resource until it is near the viewport. It reduces initial page weight, saves bandwidth, and improves Largest Contentful Paint. Use it for below-the-fold images. Do not use it for above-the-fold (hero) images — eager loading is faster for content the user sees immediately.

Q: What are srcset and sizes for responsive images?
A: srcset lists multiple image sources with their intrinsic widths:
srcset="small.jpg 400w, large.jpg 1200w"
sizes tells the browser how wide the image will display at different breakpoints:
sizes="(max-width: 600px) 100vw, 50vw"
The browser picks the most efficient file, saving bandwidth on small screens and serving sharp images on retina displays.

Q: What is the <picture> element used for?
A: <picture> enables art direction in responsive images — serving different crops or compositions per breakpoint, not just different resolutions. It contains <source> elements with media queries and a fallback <img>:
<picture>
  <source media="(min-width:800px)" srcset="wide.jpg">
  <img src="narrow.jpg" alt="">
</picture>

Q: What is the <input type="file"> accept attribute used for?
A: accept hints which file types the user should be able to select. Examples:
accept="image/*" (any image)
accept=".pdf,.doc" (specific extensions)
accept="image/png,image/jpeg" (specific MIME types)
It filters the file picker dialog. Note: it is a hint, not enforced validation — server-side validation is still required.

Q: What does the pattern attribute do on an input?
A: pattern defines a regular expression the input value must match to be valid:
<input type="text" pattern="[A-Za-z]{3}" title="Three letters">
The browser shows the value of title when validation fails. pattern only applies to text-like inputs and the value is matched against the entire string (implicit ^...$ anchors).

Q: What is the <fieldset> and <legend> pair used for?
A: <fieldset> groups related form controls, and <legend> provides a caption describing the group:
<fieldset>
  <legend>Shipping address</legend>
  ...inputs...
</fieldset>
It improves accessibility (screen readers announce the legend for each contained control), supports disabled propagation, and gives browsers a default visual style.

Q: What is the autocomplete attribute on form inputs?
A: autocomplete tells the browser what kind of value is expected so it can fill in saved data:
<input autocomplete="email">, autocomplete="cc-number", autocomplete="new-password".
Use autocomplete="off" on sensitive one-time fields (like 2FA codes). Proper values improve user experience and reduce form-friction.

Q: What is the difference between <button type="submit"> and <button type="button">?
A: type="submit" (default inside a form) submits the form when clicked.
type="button" does nothing by default and is intended for JavaScript handlers.
Always set type="button" on buttons that don't submit, otherwise clicking them inside a form will submit it — a common cause of bugs.

Q: What is the <output> element?
A: <output> represents the result of a calculation or user action, typically wired to a form via the for attribute:
<input type="range" id="r"> <output for="r"></output>
It is semantically meaningful for screen readers and is the standard place to show computed values like order totals or filter results.

Q: What is the purpose of <datalist>?
A: <datalist> provides a list of suggested values for an <input> while still allowing the user to type any value:
<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
It is a hybrid between <select> (forced choice) and a free text field.

Q: What are void elements in HTML and why do they differ from normal elements?
A: Void elements cannot have children or closing tags: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>.
Writing <br></br> is invalid — they are self-contained. This is an HTML-specific rule, not a general XML one.

Q: What is the <wbr> element?
A: <wbr> (word break opportunity) suggests where a long word may break across lines if needed, without forcing a break:
https://verylong.domain.com
Unlike <br>, the browser only breaks there when necessary, preserving readability. Useful for URLs and compound words.

Q: What does the <hr> element represent?
A: <hr> represents a thematic break between paragraphs or sections (a scene change in a story, a topic shift in a document). Historically used as a horizontal rule for visual styling, modern HTML treats it as semantic. Use CSS borders on elements for purely decorative dividers instead.

Q: What is the <abbr> element?
A: <abbr> marks an abbreviation or acronym. The full expansion belongs in the title attribute:
<abbr title="HyperText Markup Language">HTML</abbr>
Screen readers may announce the expansion on focus, and browsers often show it as a tooltip. Helps both accessibility and SEO.

Q: What does the tabindex attribute do?
A: tabindex controls whether and how an element participates in keyboard tab navigation:
- tabindex="0" – inserts into natural tab order
- tabindex="-1" – focusable via JS but not via Tab
- tabindex="1+" – positive values force a custom order (avoid — harms accessibility)
Native focusable elements (links, buttons, inputs) don't need tabindex at all.

Q: What is the contenteditable attribute?
A: contenteditable="true" makes an element's text editable in place by the user directly in the browser. Used to build rich-text editors (the basis of contenteditable frameworks and Google Docs-style apps). Be cautious: it has quirks with cursor placement, IME, and complex HTML. Most modern editors prefer the document.execCommand successor or libraries like ProseMirror.

Q: What is the draggable attribute?
A: draggable="true" makes an element draggable via the HTML5 Drag and Drop API. Pair with event handlers (dragstart, dragover, drop) and call event.preventDefault() in dragover to allow dropping. Useful for kanban boards, file uploads, and reorderable lists.

Q: How does the defer/async/default order affect page rendering?
A: Three strategies for scripts in the head:
1. Default: pause parsing, fetch, execute, resume parsing (blocks everything)
2. defer: fetch in parallel, execute after parsing finishes, in document order
3. async: fetch in parallel, execute as soon as ready, possibly mid-parse
For best perceived performance: put critical CSS inline, defer non-critical JS, and load analytics async.

Q: What is the purpose of the <base> element?
A: <base href="https://example.com/"> sets a default base URL for all relative links and images in the document. Useful when serving content from a CDN or subdirectory. Only one <base> is allowed, and it must appear in <head>. It also accepts a target attribute that affects all anchors.

Q: How does the hreflang attribute on <a> work?
A: hreflang="es" indicates that the linked resource is in Spanish. Search engines use this for regional results, and assistive tech can announce the language of the destination. Combine with rel="alternate" for fully internationalized sites to declare localized page versions.

Q: What are ARIA live regions and how do they work?
A: Live regions announce dynamic content changes to screen readers:
aria-live="polite" – waits for the user to finish before announcing
aria-live="assertive" – interrupts immediately (use sparingly)
Use them for toast notifications, chat messages, form validation feedback, and search results. Without live regions, screen reader users miss updates that don't change focus.

Q: What is role="presentation" (or role="none")?
A: It tells assistive technology to ignore the element's implicit role. Useful when an element is used purely for layout (like <table> for non-tabular data) so screen readers don't announce "table" or imply that rows/columns are data. Combine with role="none" on <thead>/<tbody> as needed.

Q: What is the difference between role="button" and a real <button>?
A: <div role="button" tabindex="0"> looks like a button to screen readers but misses native behavior: no built-in keyboard activation on Enter/Space, no disabled handling, no form submission semantics, and no default styling. Always prefer the real <button>; use ARIA roles only when no native element fits.

Q: What are the main CSS combinators?
A: Combinators define relationships between selectors:
- Descendant (space) — A B: B anywhere inside A
- Child (>) — A > B: B is a direct child of A
- Adjacent sibling (+) — A + B: B immediately follows A
- General sibling (~) — A ~ B: B is a later sibling of A
Each has different specificity behavior — combinators themselves add no specificity.

Q: What is the :has() selector?
A: :has() is a parent selector: article:has(h2) matches any <article> containing an <h2>. Long awaited, it is now broadly supported. Powerful use cases: styling a card when its image has failed, highlighting a form section when an input is invalid, or theming based on child state. Often called the "parent selector" and unlocks many previously-impossible patterns.

Q: What is the :is() and :where() pseudo-class?
A: Both accept a list of selectors and match any element matched by any of them:
:is(h1, h2, h3) { margin: 0; }
The difference: :is() takes the specificity of its most specific argument, while :where() always has zero specificity. Use :where() for low-priority resets that should never override real styles.

Q: What are CSS attribute selectors?
A: They match elements based on attribute values:
- [attr] — has the attribute
- [attr="value"] — exact match
- [attr^="value"] — starts with
- [attr$="value"] — ends with
- [attr*="value"] — contains
- [attr~="value"] — word in space-separated list
- [attr|="value"] — exact or prefix- (e.g., lang="en-")
Case sensitivity can be controlled with [attr="value" i].

Q: What is the difference between :focus, :focus-visible, and :focus-within?
A: :focus matches whenever the element has focus (including mouse clicks).
:focus-visible matches only when focus is shown (typically keyboard navigation), avoiding the ring on mouse clicks.
:focus-within matches an element when any descendant has focus. Best practice: style keyboard focus with :focus-visible for better UX.

Q: What are the CSS logical properties and why use them?
A: Logical properties describe directions relative to the writing mode, not the viewport:
- margin-inline-start (instead of margin-left)
- padding-block (top + bottom)
- border-inline-end
- inset-inline-start
They automatically adapt to direction: rtl and vertical writing modes, essential for internationalization.

Q: What is the difference between margin and padding?
A: margin is space outside the border, between this element and its neighbors. It collapses vertically with adjacent margins (the larger wins).
padding is space inside the border, between the border and the content. Padding does not collapse and is part of the element's box (it receives the background color). Both accept 1–4 values for top/right/bottom/left.

Q: What is margin collapsing in CSS?
A: Adjacent vertical margins collapse into a single margin equal to the larger of the two. This happens between siblings and between a parent and its first/last child when there's no border/padding/inline content between them.
Margin collapse does not happen with horizontal margins, inside Flexbox/Grid, or on elements with overflow: auto. Knowing when collapse applies prevents mysterious spacing bugs.

Q: What does overflow: hidden actually do?
A: overflow: hidden clips content that extends past the element's box and also creates a new block formatting context. Side effects:
- Establishes a containing block for absolutely positioned descendants
- Prevents margin collapse with the parent
- Forces the element to contain its floated children (modern clearfix)
Use it for carousels, image cropping, and containing floats — but it kills accessibility by hiding useful scrollbars.

Q: What is the difference between visibility: collapse and display: none?
A: display: none removes the element entirely from layout.
visibility: collapse removes the element visually but preserves its layout space (except inside table rows/columns, where it collapses the row/column entirely). It is rarely used outside tables but is occasionally useful for "loading" placeholders that shouldn't shift the layout.

Q: What is the content property used for?
A: content is a special property that works only with ::before and ::after pseudo-elements to insert generated content:
.external::after { content: " ↗"; }
It can hold text, images (content: url(icon.png)), counters (content: counter(item)), or attribute values (content: attr(href)). Inserted content is not selectable and not in the DOM.

Q: What does will-change do and how should it be used?
A: will-change hints to the browser that an element is likely to change (transform, opacity, scroll-position). The browser may promote it to its own compositor layer for smoother animation. Use it sparingly and just-in-time:
- Apply shortly before the change (not permanently)
- Remove it when done
- Overuse wastes GPU memory and slows the page
It is not a silver bullet — the change itself must still be cheap.

Q: What is the difference between opacity: 0, visibility: hidden, and display: none for hiding elements?
A: - opacity: 0 — invisible but interactive and in layout; animatable; still in accessibility tree
- visibility: hidden — invisible and non-interactive but space is preserved; not in accessibility tree
- display: none — completely removed from layout, accessibility, and interaction
Use display: none for content that should not exist; visibility: hidden to preserve layout; opacity: 0 with pointer-events: none for animated reveals.

Q: What is the pointer-events CSS property?
A: pointer-events controls whether an element responds to mouse/touch events. Useful values:
- auto — normal
- none — click events pass through to underlying elements
- visiblePainted — only painted visible parts (default for SVG)
Common use: making an overlay decorative without blocking clicks on the content below, or making a heading non-clickable when overlaid on a link.

Q: What is the difference between flex-direction: row and flex-direction: column?
A: They define the main axis of a flex container:
- row — items laid out left-to-right; main axis is horizontal; justify-content affects horizontal, align-items affects vertical
- column — items laid out top-to-bottom; main axis is vertical; justify-content affects vertical, align-items affects horizontal
Choosing the main axis correctly is the key to understanding Flexbox alignment.

Q: What does justify-content: space-between vs space-around vs space-evenly do?
A: All three distribute items along the main axis, but with different spacing:
- space-between — first item at start, last at end, equal gaps between
- space-around — equal gaps around each item (edges have half-gaps)
- space-evenly — equal gaps everywhere, including edges
Pick based on whether edge spacing matters visually.

Q: What is align-items vs align-content in Flexbox?
A: align-items aligns flex items within their own row along the cross axis (works for any number of rows).
align-content distributes space between rows of wrapped flex items — it only takes effect with flex-wrap: wrap and multiple lines. If there's only one row, align-content does nothing.

Q: How does flex: 1 actually work?
A: flex: 1 is shorthand for flex: 1 1 0% — grow:1, shrink:1, basis:0%. The basis of 0% means each item starts from zero and grows proportionally to share space equally. flex: auto is 1 1 auto (start from content size). flex: none is 0 0 auto (fixed size, never grows/shrinks). flex: 1 0 200px starts at 200px, can grow, never shrinks.

Q: What is the difference between order in Flexbox/Grid and DOM order?
A: The order property changes only the visual order of items. The DOM source order stays the same, so:
- Tab order follows DOM, not visual order (accessibility issue if abused)
- Screen readers read DOM order
- JavaScript iteration follows DOM order
Use order for minor visual tweaks. For major content reorganization, fix the DOM order instead.

Q: What is the CSS Grid auto-flow property?
A: grid-auto-flow controls how items are placed when not explicitly positioned:
- row (default) — fill rows left-to-right, top-to-bottom
- column — fill columns top-to-bottom, left-to-right
- dense — backtrack to fill earlier gaps if a smaller item fits
Add dense for tighter packing of heterogeneous items at the cost of source-order independence.

Q: What is the difference between 1fr and auto in CSS Grid?
A: 1fr consumes remaining space after fixed/content tracks are sized.
auto sizes the track to fit its content (max-content by default) and then any leftover space is distributed to fr tracks.
Mixing them lets you build flexible grids: grid-template-columns: auto 1fr auto (sidebar, content, sidebar) where the middle expands.

Q: What does align-self: center do on a single Grid item?
A: It overrides the container's align-items for just that item, centering it vertically within its grid cell. Useful when most items stretch but one needs custom alignment. Other values: start, end, stretch (default). Combines with justify-self for full per-item control.

Q: What are CSS Grid implicit vs explicit tracks?
A: Explicit tracks are defined by grid-template-columns/grid-template-rows. When items are placed beyond the explicit grid, the browser creates implicit tracks automatically.
Control their size with grid-auto-columns and grid-auto-rows. This lets you declare a base layout while letting extra items flow into overflow rows.

Q: What is the difference between CSS Grid span and explicit line placement?
A: Both span multiple cells, but in different ways:
grid-column: span 2 — spans 2 columns starting from auto-placed position
grid-column: 1 / 3 — spans from line 1 to line 3 (also 2 columns)
Use span for flexible placement in dynamic grids; use line numbers for precise layouts.

Q: What does place-items do in CSS Grid?
A: place-items is shorthand for align-items + justify-items:
place-items: center; centers items both ways.
place-content is shorthand for align-content + justify-content, distributing space around the grid itself. These shorthands reduce verbosity in common layouts.

Q: What is the subgrid value in CSS Grid?
A: grid-template-columns: subgrid lets a grid item's tracks inherit sizing from its parent's grid. Useful for aligning nested content (e.g., a card with internal grid sections that should align with siblings). Supported in modern browsers. Without subgrid, nested grids are independent and can drift out of alignment with the parent.

Q: What are container queries and how do they differ from media queries?
A: Container queries respond to the size of a parent container instead of the viewport:
@container (min-width: 400px) { .card { flex-direction: row; } }
First declare container-type: inline-size on the parent. They enable truly reusable components that adapt wherever they're placed — solving the media-query limitation where components couldn't react to their actual context.

Q: What does prefers-color-scheme enable?
A: The prefers-color-scheme media feature detects whether the user has requested light or dark mode at the OS level:
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --fg: #eee; }
}
Pair with CSS custom properties to switch entire themes automatically. Respecting this preference reduces eye strain and is now an expected baseline for modern sites.

Q: What does prefers-reduced-motion do?
A: The prefers-reduced-motion media feature detects users who have requested less animation in their OS settings (often for vestibular disorders):
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
Always check this for accessibility before shipping motion-heavy UI.

Q: What is the difference between em and rem in inheritance?
A: em cascades: a 1.5em font-size inside a 1.5em parent becomes 2.25× the root (compounding). rem always references the root, so it's predictable. Use em for component-relative scaling (e.g., a button that grows with the surrounding text via padding: 0.5em 1em); use rem for global sizing (typography, spacing tokens).

Q: What is min(), max(), and clamp() used for?
A: These math functions pick a value from arguments:
- min(a, b) — smaller of a and b
- max(a, b) — larger of a and b
- clamp(min, pref, max) — value between min and max, ideally pref
Examples:
width: min(100%, 800px); — never wider than 800px
font-size: clamp(1rem, 2.5vw, 2rem); — fluid typography

Q: What is the aspect-ratio property?
A: aspect-ratio: 16 / 9; sets a preferred width-to-height ratio for an element. The element computes one dimension from the other:
aspect-ratio: 1; makes a square.
Useful for responsive media containers: <div style="aspect-ratio: 16/9"><iframe></div> keeps a video frame stable across screen sizes without padding-hacks.

Q: What does object-position do?
A: object-position controls where the focal point of an <img> sits inside its box when used with object-fit: cover or contain:
object-position: top right; keeps the top-right of the image visible when it's cropped. Useful for ensuring faces in portraits aren't cut off by responsive crops.

Q: What is the filter property in CSS?
A: filter applies graphical effects: blur(5px), grayscale(100%), brightness(0.9), contrast(150%), hue-rotate(90deg), invert(1), saturate(2), sepia(1), and drop-shadow(...).
Multiple functions can be chained:
filter: blur(2px) grayscale(50%);
Filters are GPU-accelerated but can be expensive on large images.

Q: What does backdrop-filter do?
A: backdrop-filter applies a filter to the area behind an element (what shows through if it's translucent).
Example: the frosted-glass effect on iOS:
.card { background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); }
The element must be at least semi-transparent for the backdrop to be visible.

Q: What is the mix-blend-mode property?
A: mix-blend-mode controls how an element's content blends with the background using compositing modes like multiply, screen, overlay, color-dodge.
Example: a yellow text that multiplies over an image to create a duotone effect. isolation: isolate on a parent limits blending to within its subtree.

Q: What is the difference between CSS transition and @keyframes animation events?
A: Transitions fire transitionend once when the property finishes. Animations fire animationstart, animationend, and animationiteration (per loop). Use them in JS for chaining or cleaning up animation state. Note: animationend may not fire if the animation is canceled or removed mid-run — handle cleanup carefully.

Q: What does the cubic-bezier() timing function represent?
A: cubic-bezier(x1, y1, x2, y2) defines a custom speed curve by specifying two control points (P1 and P2) of a cubic Bézier curve. Values are usually between 0 and 1, but y can exceed 1 (overshoot/bounce) or go negative (anticipation).
Example: cubic-bezier(0.68, -0.55, 0.265, 1.55) creates a bouncy ease-out. Use tools like cubic-bezier.com to design curves visually.

Q: What does animation-fill-mode: forwards do?
A: forwards makes the element retain the styles from the last keyframe after the animation finishes.
Without it, the element snaps back to its pre-animation state. backwards applies the first keyframe's styles during the delay period. both applies both behaviors. Use forwards for one-shot animations that should leave a visible end state (like a progress bar completing).

Q: What is the difference between transform: translate() and margin/top/left?
A: transform: translate() moves the element without triggering layout recalculation in surrounding elements — only a composite step. It's GPU-accelerated and buttery-smooth for animation.
margin, top, and left cause layout reflow: the browser recalculates positions and sizes of nearby elements. Animating them causes expensive repaints and jank. Always animate transform and opacity when possible.

Q: What is the contain CSS property?
A: contain: layout; tells the browser that the element's internal layout is independent of the rest of the page, allowing it to skip reflow calculations elsewhere. Values: layout, paint, size, style, content (shorthand for layout + paint + style), or strict (adds size). Powerful for performance in large pages or components.

Q: What is the content-visibility property?
A: content-visibility: auto; tells the browser to skip rendering work for off-screen elements until they approach the viewport. Combined with contain-intrinsic-size (to reserve space), this dramatically improves initial render and scroll performance for long pages. Treat it as a CSS equivalent of lazy-loading for layout.

Q: What is the difference between scroll-behavior: smooth and JS smooth scrolling?
A: scroll-behavior: smooth on html or a scroll container makes all programmatic scrolls (including anchor links like #section) animate smoothly via native browser interpolation — no JS needed.
For more control (custom duration, easing, cancelable), use JS with window.scrollTo({ top: y, behavior: 'smooth' }). Mixing both is fine — they don't conflict.

Q: What does overscroll-behavior control?
A: overscroll-behavior controls what happens when a user scrolls past the edge of an element:
- auto — normal scroll chaining to parent
- contain — prevent scroll chaining (modals, side panels)
- none — prevent chaining and prevent pull-to-refresh
Essential for modal dialogs that shouldn't scroll the page behind them.

Q: What is the scroll-snap-type and scroll-snap-align pair?
A: They enable scroll snapping for carousels and galleries:
.container { scroll-snap-type: x mandatory; overflow-x: scroll; }
.item { scroll-snap-align: start; }
The browser snaps items to positions after scrolling. mandatory forces snapping; proximity allows skipping. Pure CSS, no JS required for basic snap behavior.

Q: What is the difference between width: 100% and width: 100vw?
A: width: 100% is relative to the parent's content box.
width: 100vw is relative to the viewport width (including scrollbars).
On pages where scrollbars take space, 100vw can cause horizontal overflow. Use 100% for most layouts; 100vw is useful for full-bleed backgrounds that should ignore the scrollbar.

Q: What is the ch unit good for?
A: ch equals the width of the 0 glyph in the element's font. It's ideal for optimal line length in body text:
.article { max-width: 65ch; }
This produces ~65 characters per line, the recommended measure for readability. Avoids the brittleness of pixel-based widths that don't adapt to font changes.

Q: What does scroll-padding do?
A: scroll-padding adds an offset inside a scroll container when snapping or scrolling to an anchor. Prevents content from sticking to the very edge:
.container { scroll-padding-top: 80px; } (clears a sticky header). Pairs well with scroll-snap-align and :target navigation.

Q: What is scrollbar-gutter?
A: scrollbar-gutter: stable; reserves space for the scrollbar even when there's no overflow. Prevents layout shifts when content dynamically grows to need a scrollbar. Values: auto (default, browser decides), stable, stable both-edges (symmetric reservation).

Q: How does the CSS cascade layers (@layer) feature work?
A: @layer reset, base, components, utilities; declares a priority order for layers. Styles in later layers win over earlier ones regardless of specificity. This solves the !important wars and lets you safely use low-specificity utility styles without worrying they'll be overridden:
@layer utilities { .text-center { text-align: center; } }
Unlayered styles beat layered styles.

Q: What is the CSS @property rule?
A: @property --x { syntax: '<number>'; inherits: false; initial-value: 0; } registers a custom property with a type, initial value, and inheritance behavior. The key benefit: the browser can animate the property natively (interpolating numbers smoothly) instead of treating the value as a string. Unlocks smooth animation of CSS variables.

Q: What is accent-color?
A: accent-color: hotpink; sets the color used by native form controls (checkboxes, radio buttons, range sliders, progress bars). One declaration themes all native widgets without overriding each with custom CSS. Supported broadly; respects the OS's accessibility color settings for high-contrast users.

Q: What is color-scheme?
A: color-scheme: light dark; tells the browser that the page supports both light and dark color schemes. Effects:
- Browser UI (scrollbars, form controls) adapts
- Default background and text colors switch
- Pairs with prefers-color-scheme
Set it on :root for full-page support.

Q: What does forced-colors media query detect?
A: @media (forced-colors: active) detects Windows High Contrast Mode and similar forced-color modes. Users with these settings expect browsers to use system colors:
@media (forced-colors: active) {
  .button { border: 1px solid CanvasText; background: ButtonFace; color: ButtonText; }
}
Special keywords Canvas, CanvasText, ButtonFace, ButtonText automatically reference the user's chosen system colors.

Q: What is the CSS view-transition API?
A: The View Transitions API enables smooth animated transitions between DOM states (page navigations, modal open/close, theme switches):
document.startViewTransition(() => updateDOM());
With CSS ::view-transition-group, ::view-transition-old, and ::view-transition-new pseudo-elements you control how elements morph between states. Replaces much of the JS animation work needed for SPA-feel transitions.

Q: What is the difference between id and class attributes?
A: id is unique per page (one element). class can appear on multiple elements and one element can have many classes.
CSS: #header selects by ID; .btn by class. JS: document.getElementById vs document.querySelectorAll. IDs add specificity and create global JS namespaces — prefer classes for styling and components.

Q: What does the HTML lang attribute do?
A: <html lang="en"> declares the primary language of the document. Screen readers use it to pick the right voice and pronunciation engine. Search engines use it for geo-targeting. Browser translation tools rely on it. You can also set lang on individual elements for mixed-language pages (<span lang="fr">bonjour</span>).

Q: What is the dir attribute?
A: <html dir="rtl"> declares the text direction (right-to-left) for the document or element. Used for Arabic, Hebrew, Persian, and Urdu. The browser mirrors layouts accordingly — text flows right-to-left and default start/end inline directions flip. Combine with logical CSS properties (margin-inline-start) for layouts that adapt automatically.

Q: What is the difference between <em> and <strong> vs <i> and <b>?
A: Semantics vs presentation:
- <em> — semantic emphasis (stress when read aloud)
- <strong> — semantic strong importance
- <i> — alternate voice/mood, technical terms, foreign phrases (presentational italic)
- <b> — stylistically offset without extra importance (keywords, product names)
When in doubt, choose the semantic tags. Use CSS for visual emphasis.

Q: What is the cite element?
A: <cite> marks the title of a cited work: book, article, film, song. Example:
As described in <cite>The Pragmatic Programmer</cite>...
It is for work titles only; do not use it for a person's name. For person names use no element, or in HTML5.2+ a <span> with appropriate ARIA. Browser default styles italicize it.

Q: What is the <blockquote> and <q> pair?
A: <blockquote> marks a block-level quotation from another source (typically indented). <q> marks an inline quotation.
Both can take a cite attribute pointing to the source URL:
<q cite="https://...">Quote here</q>
Browsers automatically insert quotation marks around <q> content, which can be controlled with CSS quotes and content properties.

Q: What is the <address> element?
A: <address> provides contact information for the nearest <article> or <body> ancestor. Typically rendered in italic by browsers. Inside an article it identifies the author; on a page it identifies the site owner. It is not for arbitrary postal addresses — semantic context is required.

Q: What is the difference between <canvas> and SVG?
A: <canvas> is an immediate-mode, pixel-based drawing surface. You draw into it via JavaScript (ctx.fillRect(...)); once drawn, the browser forgets the shapes. Best for many objects, animations, games, image editing.
SVG is retained-mode, vector-based, and lives in the DOM. Each shape is an element you can style and bind events to. Best for icons, charts, and small interactive graphics.

Q: What is the <video> tag's preload attribute?
A: preload hints how much video data to fetch on page load:
- none — nothing until the user interacts
- metadata — only duration/dimensions
- auto — full file (browser may ignore on data-saver)
Use metadata for off-screen videos and none for hero backgrounds where playback may never start.

Q: What is the <track> element?
A: <track> adds timed text tracks to <video> or <audio>:
<video>
  <source src="movie.mp4">
  <track kind="captions" src="captions.vtt" srclang="en" default>
</video>
kind values: captions, subtitles, descriptions, chapters, metadata. Captions are essential for accessibility.

Q: What is the difference between CSS em for font-size vs padding?
A: When used in font-size: 1.5em, em refers to the parent's font-size.
When used in padding: 0.5em, em refers to the element's own font-size.
This self-referential behavior for padding makes components nicely scalable: change the button's font-size and its padding scales proportionally, even if nested in different parent sizes.

Q: How does font-display affect web font loading?
A: font-display controls what the browser does while a custom font loads:
- auto — browser default (typically block, ~3s)
- block — invisible text until font loads (FOIT)
- swap — show fallback, swap when ready (FOUT)
- fallback — brief block, then fallback, no swap
- optional — use font only if already cached
swap is generally best for perceived performance.

Q: What is the difference between link rel="preload" and prefetch?
A: <link rel="preload" href="font.woff2" as="font"> fetches a resource with high priority for the current page (e.g., a font needed above the fold).
<link rel="prefetch" href="next-page.html"> fetches a resource with low priority for the next navigation. Use preload for critical current-page resources and prefetch for likely-future resources.

Q: What does as="image" with imagesrcset do in <link rel="preload">?
A: <link rel="preload" as="image" imagesrcset="small.jpg 400w, large.jpg 1200w" imagesizes="100vw"> preloads the right image for the current viewport, telling the browser to use the srcset selection logic. Avoids preloading a huge image for mobile. The browser respects responsive selection instead of blindly fetching the largest variant.

Q: What is the difference between HTTP caching headers Cache-Control and ETag?
A: Cache-Control tells the browser how long a resource can be cached and where (e.g., max-age=31536000, immutable).
ETag is a fingerprint that lets the browser ask "has this changed?" — the server returns 304 Not Modified if it hasn't, saving bandwidth.
Use Cache-Control for static assets (long cache, hash-filename them). ETag for dynamic content.

Q: What is the <meta name="viewport"> user-scalable=no pitfall?
A: user-scalable=no prevents users from zooming the page, which violates WCAG accessibility. Users with low vision need zoom. Avoid it entirely. If you must limit zoom (rarely a good idea), at minimum allow scaling: maximum-scale=2 or higher. Mobile-first design should never lock users out of zoom.

Q: What is the <meta name="theme-color">?
A: <meta name="theme-color" content="#3498db"> sets the color of the browser chrome (address bar on mobile, title bar on desktop) on supporting browsers. Pair with media="(prefers-color-scheme: dark)" for separate dark-mode colors. A small touch that makes PWAs and mobile sites feel native.

Q: What is the integrity attribute on <script> and <link>?
A: <script src="jquery.js" integrity="sha384-abc..." crossorigin="anonymous"> includes a cryptographic hash. The browser refuses to execute the resource if it doesn't match, protecting against compromised CDNs. Always combine with crossorigin. Particularly important for third-party scripts you include from CDNs.

Q: What is the difference between HTTP GET and POST in forms?
A: GET appends form data to the URL as query parameters (?name=value). Use it for searches and idempotent actions. Visible in browser history and bookmarks. Limit ~2KB.
POST sends data in the request body. Use it for any state-changing action (creating accounts, posting comments). Not bookmarkable, no URL length limit. Forms default to GET; set method="post" explicitly.

Q: What is the enctype attribute on <form>?
A: enctype specifies how form data is encoded. Default: application/x-www-form-urlencoded. For file uploads, use multipart/form-data — required to send binary data. text/plain exists but is rarely used. The <form> must declare enctype="multipart/form-data" for any file inputs to work.