a foundation in web development. It covers the building blocks of HTML5 — like semantic elements, form inputs, and accessibility attributes — alongside the core concepts of CSS, including selectors, pseudo-classes, pseudo-elements, and specificity. Together, these are the everyday tools you'll reach for when structuring and styling a webpage.
It's well suited for beginners who are just getting comfortable with markup and styling, as well as anyone returning to the basics who wants to refresh their understanding of how HTML and CSS work together. If you're working through a web development course or building your first projects, these flashcards can help reinforce the concepts you'll see most often in code and documentation.
To get the most out of the deck, try reviewing a small set of cards each day rather than cramming everything at once — spaced repetition works best when your brain has time to rest between sessions. As you go through each card, take a moment to think about how you'd apply the concept in a real HTML file or stylesheet, since these topics are deeply hands-on. When you encounter a question about something like specificity or semantic elements, try writing a tiny example right after reviewing it to lock the idea into memory.
Every HTML5 page begins with a doctype declaration, written as `` on the very first line. This single line tells the browser to render the document in standards mode, following the HTML5 specification. Without it, browsers fall back to quirks mode, emulating legacy behaviors that break modern CSS layouts and box-model handling. A minimal valid document then declares a language with the `lang` attribute on the `` element, sets the character encoding via a `` tag (typically UTF-8, which supports virtually every written language and emoji), and provides a `
` inside the `<head>`. The charset declaration must appear within the first 1024 bytes so the browser can correctly decode the page without re-parsing.</p><p>The `<head>` element is often confused with the visible `<header>` element, but they serve very different purposes. The `<head>` holds metadata about the document, including title, character set, viewport settings, linked stylesheets, scripts, and Open Graph tags, and is never rendered as visible content. The `<header>`, by contrast, is a semantic landmark that represents introductory content for its nearest sectioning ancestor, such as a page banner with a logo and main navigation. A page may contain many `<header>` elements (for example, one inside each `<article>`), but only one `<head>`. Other useful head-only elements include `<base>` for setting a default base URL for relative links, `<link rel="canonical">` for declaring the master URL when the same content is reachable via multiple addresses, which helps consolidate SEO ranking signals, and `<meta name="theme-color">` for setting the color of the browser chrome on supporting devices.</p><p>HTML5 semantic elements describe the role of their content rather than just its appearance, providing meaningful structure that improves accessibility, SEO, and code readability. Common landmarks include `<header>` for introductory content, `<nav>` for major navigation blocks (screen readers use it to determine what to skip or jump to directly), `<main>` for the dominant content of the page, `<article>` for self-contained compositions like blog posts or news articles that could be independently distributed, `<section>` for thematic groupings typically with a heading, and `<footer>` for closing content such as copyright or contact information. The `<figure>` and `<figcaption>` combination wraps self-contained media like images, diagrams, or code snippets and attaches a caption or legend to them. Choosing `<section>` over `<div>` signals meaning to assistive technology and search engines, while `<div>` should be reserved for purely stylistic containers with no inherent semantic role. Special text-level semantic elements include `<small>` for side comments and fine print like copyright notices, `<time>` for marking dates with a machine-readable `datetime` attribute, `<abbr>` for abbreviations with their full expansion in the `title` attribute, `<cite>` for work titles, `<address>` for contact information tied to a specific article or the whole page, and `<q>` for short inline quotations paired with `<blockquote>` for longer ones.</p><p>HTML elements are classified into content categories that describe how they may contain or be contained. Flow content includes most body content, phrasing content covers inline text-level elements like `<span>` and `<a>`, embedded content includes images and videos, interactive content encompasses links and form controls, and metadata content lives exclusively in `<head>`. These categories enforce rules about which elements can nest inside which and help developers reason about document structure. The `lang` attribute declares the primary language of the document or an element, helping screen readers pick the right voice, search engines geo-target results, and translation tools operate correctly. The `dir` attribute declares text direction (`ltr` or `rtl`) for Arabic, Hebrew, Persian, and Urdu content, with the browser mirroring layouts accordingly. Preferring semantic elements over generic presentational ones such as `<b>` and `<i>`, which carry no meaning beyond bold and italic, ensures that assistive technology can interpret content correctly.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">Forms, Validation & Accessibility</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>HTML5 dramatically expanded form capabilities beyond simple text and password fields. Modern input types include `email` and `url` for automatic format validation, `number` with built-in spinners, `range` for slider controls, `date`, `time`, and `datetime-local` for date and time entry, `color` for a native color picker, `search` for search fields, and `tel` for telephone numbers. The `required` attribute marks a field as mandatory so the browser performs built-in validation and displays a default error message if the field is empty when the form is submitted. For more precise control, the `pattern` attribute applies a regular expression that the entire input value must match, with the `title` attribute providing a human-readable hint that the browser displays when validation fails. The `accept` attribute on file inputs hints which file types the user should be able to select (such as `accept="image/*"` for any image), though it is only a hint and server-side validation remains essential.</p><p>Labels tie text descriptions to form controls and are crucial for accessibility. Screen readers announce the label when a user focuses the input, making forms navigable for users who cannot see the screen. The two ways to associate a label with an input are referencing the input's `id` via the `for` attribute, or wrapping the input inside the label itself. Related controls should be grouped with `<fieldset>` and described with a `<legend>`, which propagates a `disabled` attribute to all contained controls and gives screen readers a consistent caption to announce. The `<output>` element represents the result of a calculation, typically wired to one or more inputs via the `for` attribute, while `<datalist>` provides a list of suggested values for an input without forcing the user to pick one. Other useful form attributes include `autocomplete` for telling the browser what kind of saved value to fill in (such as `email`, `cc-number`, or `new-password`), and explicitly setting `type="button"` on buttons that should not submit their parent form, since the default `type="submit"` is a common source of unexpected submissions. The `enctype` attribute on the `<form>` itself specifies how data is encoded, with `application/x-www-form-urlencoded` as the default and `multipart/form-data` required for file uploads.</p><p>Accessibility extends well beyond forms. The `alt` attribute provides alternative text for images, which screen readers read aloud for visually impaired users, displays when the image fails to load, and helps search engines understand the image content; decorative images should use an empty `alt=""` so screen readers skip them entirely. ARIA (Accessible Rich Internet Applications) attributes enhance accessibility when native HTML semantics are insufficient, with `aria-label` providing an accessible name, `aria-hidden` hiding elements from assistive technology, and `aria-live` announcing dynamic content changes (`polite` waits for the user to finish before announcing, while `assertive` interrupts immediately for urgent updates). ARIA live regions are essential for toast notifications, chat messages, form validation feedback, and search results, because without them screen reader users miss updates that do not change focus. The `role` attribute defines an element's purpose, but a `<div role="button" tabindex="0">` looks like a button to screen readers yet lacks built-in keyboard activation on Enter and Space, disabled handling, and form submission semantics, so a real `<button>` should always be preferred when one fits. Other accessibility-oriented attributes include `tabindex` (where `0` inserts an element into the natural tab order and `-1` makes it focusable only via <a href="/wiki/javascript_fundamentals">JavaScript</a>), `contenteditable` for in-place text editing, and `draggable` for HTML5 Drag and Drop interactions.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">CSS Selectors & the Cascade</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>CSS selectors are the foundation of styling, targeting HTML elements through several basic mechanisms. The element selector applies to every instance of a tag, the class selector targets any element carrying that class, the ID selector targets the single element with that ID, the universal selector (an asterisk) matches every element, and attribute selectors match elements based on the presence or value of an attribute using patterns like `[attr="value"]`, `[attr^="value"]` for starts-with, `[attr$="value"]` for ends-with, `[attr*="value"]` for contains, and `[attr~="value"]` for word-in-list. Case sensitivity can be controlled with an `i` flag like `[attr="value" i]`. Attribute selectors are particularly powerful for styling form inputs based on type or state without adding extra classes, and they reflect the broader distinction where `id` is unique per page while `class` can appear on multiple elements and one element can carry many classes.</p><p>Selectors can be combined with combinators that define relationships between them. The descendant selector (a space) matches any element nested at any depth inside the first, the child selector (`>`) matches only direct children, the adjacent sibling selector (`+`) matches the element immediately following the first, and the general sibling selector (`~`) matches any later sibling. Combinators themselves add no specificity. Pseudo-classes select elements based on state or position without requiring additional markup: `:hover` matches when the mouse is over the element, `:focus` when an element has keyboard focus, `:first-child` and `:nth-child(n)` for positional targeting among siblings, `:not(selector)` to exclude a match, and `:checked` for selected checkboxes and radios. The `:nth-child()` pseudo-class accepts formulas like `odd`, `even`, `3n`, or `3n+1` for selecting every nth item, while `:nth-of-type()` differs by counting only siblings of the same element type, which is useful when elements are mixed within a parent.</p><p>Modern pseudo-classes and pseudo-elements expand what is possible with selectors. `:is()` and `:where()` accept lists of selectors and match any element matched by any of them, with `:is()` taking the specificity of its most specific argument and `:where()` always having zero specificity, making `:where()` ideal for low-priority resets that should never override real styles. The `:has()` selector, often called the parent selector, matches elements containing certain children, such as `article:has(h2)`, unlocking patterns that were previously impossible without <a href="/wiki/javascript_fundamentals">JavaScript</a>. Focus variants include `:focus`, which matches whenever an element has focus including mouse clicks; `:focus-visible`, which matches only when focus should be visually shown (typically keyboard navigation), avoiding the focus ring on mouse clicks; and `:focus-within`, which matches an ancestor when any descendant has focus. Pseudo-elements, written with double colons, style specific parts of an element: `::before` and `::after` insert generated content before or after the element, often combined with the `content` property holding text, images via `url()`, counters, or attribute values pulled with `attr()`, while `::first-line`, `::first-letter`, and `::placeholder` style the first line, first letter, and placeholder text respectively. Generated content from pseudo-elements is not selectable and not part of the DOM.</p><p>When multiple rules target the same element, the cascade determines which wins, using a priority order from highest to lowest: `!important` declarations, origin (author styles beat user styles beat browser defaults), specificity, and source order. Specificity is calculated as a four-part value where inline styles contribute 1000 in the first position, ID selectors 100 in the second, class/attribute/pseudo-class selectors 10 in the third, and element/pseudo-element selectors 1 in the fourth; the selector with the highest value wins, and ties are broken by source order with later rules winning. Because `!important` overrides everything, it should be avoided except in narrow cases. A more modern alternative to specificity wars is CSS cascade layers declared with `@layer`, which establishes a priority order independent of specificity: styles in later layers always win over earlier ones, and unlayered styles beat layered styles, letting you safely use low-specificity utilities without fear of being overridden.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">The Box Model, Display & Positioning</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>Every element in CSS is rendered as a rectangular box composed of four layers: the content itself (text or images), padding (space between the content and the border), the border that surrounds the padding, and margin (space outside the border separating the element from its neighbors). By default, the `width` and `height` properties apply only to the content area, so an element with `width: 200px`, `padding: 20px`, and `border: 5px solid` actually takes up 250 pixels of horizontal space. Setting `box-sizing: border-box` includes padding and border within the declared width and height, making the element exactly 200 pixels wide total. Margin behaves differently from padding in one notable way: adjacent vertical margins collapse, meaning the larger of two sibling margins wins instead of adding together. Margin collapse does not apply to horizontal margins, inside Flexbox or Grid layouts, or on elements with `overflow: auto`. For internationalized layouts, CSS logical properties such as `margin-inline-start`, `padding-block`, and `inset-inline-start` describe directions relative to the writing mode rather than the viewport, automatically adapting to right-to-left languages or vertical text.</p><p>The `display` property controls how an element participates in layout. `block` elements take the full available width and start on a new line (as with `<div>` and `<p>`), `inline` elements flow with surrounding text and ignore `width` and `height` (as with `<span>` and `<a>`), `inline-block` combines both behaviors by flowing inline but respecting dimensions, and `none` removes the element entirely from layout. The `flex` and `grid` values activate the corresponding layout systems. Hiding elements can be done with `display: none` (removed from layout, accessibility, and interaction), `visibility: hidden` (invisible and non-interactive but still occupies space), or `opacity: 0` (invisible and interactive but still in layout, useful for animated reveals when paired with `pointer-events: none`). The `visibility: collapse` value is similar to `hidden` but, inside table rows or columns, collapses the entire row or column instead of just hiding it. The `pointer-events` property controls whether an element responds to mouse and touch events, with `none` letting clicks pass through to whatever is underneath, an essential technique for decorative overlays that should not block interaction with content below.</p><p>The `position` property offers five values that determine how an element is placed relative to the page. `static` is the default and follows normal document flow. `relative` offsets the element from its normal position while still occupying its original space. `absolute` removes the element from flow and positions it relative to the nearest positioned ancestor (an ancestor whose position is anything other than `static`), and the element scrolls along with the page. `fixed` also removes the element from flow but positions it relative to the viewport, so it stays in place when the user scrolls. `sticky` toggles between `relative` and `fixed` based on scroll position, making it ideal for headers that should stay visible after scrolling past them. Stacking order among positioned elements is controlled by `z-index`, where higher values appear in front of lower ones, but `z-index` only works on positioned elements and child elements are confined within their parent's stacking context.</p><p>A few additional layout concepts round out this picture. The `float` property historically removed elements from normal flow and placed them to the left or right with text wrapping around, but floated elements cause their parent to collapse in height. The traditional clearfix solution used a `::after` pseudo-element with `clear: both` to force the parent to contain its floats, though modern Flexbox and Grid layouts have largely replaced floats for page structure. The `overflow` property controls what happens to content that exceeds an element's box; `overflow: hidden` clips the overflow and also creates a new block formatting context, which prevents margin collapse with the parent and forces the element to contain its floated children.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">Flexbox & CSS Grid Layout</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for distributing space and aligning items along a single direction, either a row or a column. It excels at centering elements both vertically and horizontally, building navigation bars, creating card layouts in a single row, and distributing space evenly among items. Flexbox is activated by setting `display: flex` on a parent container, after which a set of container properties controls the layout: `flex-direction` sets the main axis (row, column, row-reverse, or column-reverse), `justify-content` distributes items along that main axis with values like `flex-start`, `center`, `space-between`, `space-around`, and `space-evenly` (each producing slightly different edge-spacing behavior), `align-items` aligns items on the cross axis, `flex-wrap` controls whether items wrap onto multiple lines, and `gap` sets the spacing between items. Choosing the main axis correctly is the key to understanding Flexbox alignment, because `justify-content` always affects the main axis and `align-items` always affects the cross axis. A common centering pattern applies `display: flex`, `justify-content: center`, and `align-items: center` to a parent with a defined height (such as `min-height: 100vh`) to center any direct children both ways.</p><p>Flex items have their own set of properties that determine how they grow, shrink, and align within the container. The `flex` shorthand combines `flex-grow`, `flex-shrink`, and `flex-basis`, so `flex: 1` is equivalent to `flex: 1 1 0%` and makes all items share space equally, `flex: auto` is `1 1 auto` and starts from each item's content size, and `flex: none` is `0 0 auto` and keeps items at their natural size. The `align-self` property overrides `align-items` for a single item, and the `order` property changes the visual order of items, though the DOM source order is unchanged, so tab order and screen-reader reading still follow the source. The `align-content` property differs from `align-items` in that it distributes space between rows of wrapped flex items and only takes effect with `flex-wrap: wrap` and multiple lines.</p><p>CSS Grid is a two-dimensional layout system that handles both rows and columns simultaneously, making it ideal for full-page layouts, complex grid-based designs, and any situation requiring precise control over both axes. Grid is activated with `display: grid`, and its container properties include `grid-template-columns` and `grid-template-rows` for defining track sizes, `gap` for spacing between cells, `grid-template-areas` for naming regions, and `justify-items`/`align-items` for aligning items within their cells. The `place-items` shorthand combines `align-items` and `justify-items` (with `place-items: center` centering both ways), and `place-content` does the same for the container's `align-content` and `justify-content`. The `fr` unit represents a fraction of the available space, so `grid-template-columns: 1fr 2fr 1fr` creates three columns where the middle is twice as wide as the others, distributing leftover space after fixed and content-sized tracks are calculated. The `1fr` unit distributes remaining space after fixed and content-sized tracks, while `auto` sizes a track to fit its content; mixing them like `grid-template-columns: auto 1fr auto` builds flexible layouts where the middle expands.</p><p>Grid offers several tools for placing items efficiently. Line-based placement uses `grid-column: 1 / 3` to span from column line 1 to 3, while `grid-column: span 2` spans two columns from an auto-placed position for more flexible layouts. The `grid-area` shorthand accepts row-start, column-start, row-end, and column-end in one declaration, or a named region when used with `grid-template-areas`. The `repeat()` function provides a shorthand for repeating tracks, so `grid-template-columns: repeat(3, 1fr)` equals `1fr 1fr 1fr`. More powerfully, `repeat(auto-fill, minmax(250px, 1fr))` creates as many columns as fit at minimum 250 pixels each, while `repeat(auto-fit, minmax(250px, 1fr))` does the same but collapses empty tracks, both producing responsive grids without media queries. The `grid-auto-flow` property controls how unplaced items are inserted, with `row`, `column`, and `dense` (which backtracks to fill earlier gaps) as options. When items extend beyond the explicitly defined grid, the browser creates implicit tracks whose sizes are controlled by `grid-auto-columns` and `grid-auto-rows`. The `subgrid` value lets a nested grid inherit its track sizing from its parent's grid, keeping nested content aligned with siblings.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">Responsive Design, Units & Custom Properties</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>Responsive web design adapts layouts to the user's device, beginning with the viewport meta tag: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`. Without it, mobile browsers render the page at a desktop width (typically 980 pixels) and scale it down, which breaks responsive techniques entirely. The foundation of responsiveness is the media query, written as `@media (max-width: 768px) { ... }`, which applies styles conditionally based on device characteristics. Common media features include `min-width` and `max-width` for viewport size, `orientation` for portrait versus landscape, `prefers-color-scheme` for detecting dark-mode preferences at the OS level, and `prefers-reduced-motion` for users who have requested less animation. The mobile-first approach writes base styles for small screens and adds complexity for larger ones using `min-width` media queries, resulting in faster mobile loading and cleaner progressive enhancement. Container queries, declared with `@container (min-width: 400px) { ... }` after setting `container-type: inline-size` on the parent, respond to the size of a containing element instead of the viewport, enabling truly reusable components that adapt to wherever they are placed.</p><p>CSS offers a rich set of length units. Absolute units like pixels (`px`) define fixed sizes, while relative units adapt to context: `em` is relative to the parent element's font-size, `rem` is relative to the root element's font-size (typically 16 pixels by default), `%` is relative to the parent dimension, `vw` and `vh` are 1% of the viewport width and height, `vmin` and `vmax` are 1% of the smaller or larger viewport dimension, and `ch` equals the width of the `0` glyph in the element's font. The `ch` unit is ideal for setting optimal line length on body text, with `max-width: 65ch` producing about 65 characters per line, the recommended measure for readability. Because `em` cascades (a `1.5em` font-size inside a `1.5em` parent becomes 2.25 times the root), `rem` is generally preferred for global sizing, while `em` shines for component-relative scaling, since `padding: 0.5em 1em` on a button scales proportionally when the button's own font-size changes. Note that `em` refers to the parent's font-size when applied to `font-size` but to the element's own font-size when applied to `padding`, which makes components nicely scalable.</p><p>CSS custom properties, also known as CSS variables, store reusable values defined with a double-hyphen prefix and accessed with `var()`. Variables can be declared on any selector but are most commonly defined on `:root` for global use, and they cascade and inherit like any other property, allowing them to be scoped or overridden locally. They make theming straightforward: defining `--bg` and `--text` on `:root` for a light theme and overriding them on `[data-theme="dark"]` for a dark theme lets every element reference the same variables without rewriting any rules, and a <a href="/wiki/javascript_fundamentals">JavaScript</a> call that toggles the `data-theme` attribute swaps themes instantly. Custom properties can also be changed dynamically via JavaScript for animations and interactive feedback. The `@property` rule registers a custom property with a specific type, initial value, and inheritance behavior, which lets the browser interpolate the property natively instead of treating values as strings, unlocking smooth animation of CSS variables.</p><p>Modern CSS includes powerful math functions for fluid, responsive values. The `min()` function picks the smaller of its arguments, so `width: min(100%, 800px)` ensures an element never exceeds 800 pixels regardless of container size. The `max()` function picks the larger, useful for ensuring minimum sizes. The `clamp(min, preferred, max)` function returns a value between the minimum and maximum, with an ideal preferred value in between, making it perfect for fluid typography like `font-size: clamp(1rem, 2.5vw, 2rem)`, which scales smoothly between 1 and 2 rem depending on viewport width. The `aspect-ratio` property sets a preferred width-to-height ratio for an element, with `aspect-ratio: 16 / 9` keeping a video frame stable across screen sizes without padding tricks. Other accessibility- and theme-aware features include `accent-color` for theming native form controls like checkboxes, radio buttons, and range sliders with one declaration; `color-scheme` for declaring light and dark support so the browser can adapt its UI; and the `forced-colors` media query for detecting Windows High Contrast Mode, where special keywords like `Canvas`, `CanvasText`, `ButtonFace`, and `ButtonText` reference the user's chosen system colors.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">Animations, Transforms & Visual Effects</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>CSS transitions animate property changes smoothly over time, defined with `transition: property duration timing-function delay`. When a listed property changes (for example, a button's background on hover), the browser interpolates the value across the duration using the specified timing function. Common functions include `ease` (slow start, fast middle, slow end), `linear` for constant speed, `ease-in` for a slow start, `ease-out` for a slow end, `ease-in-out` for slow start and end, `cubic-bezier(x1, y1, x2, y2)` for custom curves (where y can exceed 1 for overshoot or go negative for anticipation), and `steps(n)` for discrete jumps. CSS animations extend this idea with `@keyframes` rules that define multi-step sequences, can run automatically without a trigger, and support looping. Key animation properties include `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction` (normal, reverse, or alternate), and `animation-fill-mode`. The `forwards` value retains the last keyframe's styles after the animation finishes, `backwards` applies the first keyframe's styles during the delay, and `both` combines both behaviors, with `forwards` being essential for one-shot animations that need to leave a visible end state.</p><p>The `transform` property applies 2D or 3D transformations like `translate(x, y)`, `rotate(deg)`, `scale(x, y)`, and `skew(x, y)` without affecting document flow. Transforms are GPU-accelerated and ideal for animation because they require only a composite step rather than triggering layout reflows, making them far cheaper to animate than properties like `margin`, `top`, or `left`, which force the browser to recalculate positions of nearby elements and cause jank. The `will-change` property hints to the browser that an element is likely to change (transform, opacity, or scroll-position are common candidates), allowing it to promote the element to its own compositor layer for smoother animation. To avoid wasting GPU memory, `will-change` should be applied just before the change occurs and removed when the change is done rather than being set permanently on every element.</p><p>Several properties add visual richness to interfaces. The `filter` property applies graphical effects such as `blur()`, `grayscale()`, `brightness()`, `contrast()`, `hue-rotate()`, `saturate()`, `sepia()`, `invert()`, and `drop-shadow()`, with multiple functions chainable in one declaration. The `backdrop-filter` property applies filters to the area behind an element, enabling frosted-glass effects on translucent panels when paired with a translucent background color. The `mix-blend-mode` property controls how an element's content blends with the background using compositing modes like `multiply`, `screen`, and `overlay`, while `isolation: isolate` on a parent limits blending to within that subtree. For media elements, `object-fit` controls how replaced content like images and videos is resized to fit its container (with values `fill`, `contain`, `cover`, `none`, and `scale-down`), and `object-position` controls the focal point when cropping, which is useful for keeping faces visible in responsive portrait crops. SVG and `<canvas>` are two more options for rendering graphics on a page: SVG is retained-mode and vector-based with shapes living as DOM elements that can be styled and bound to events (ideal for icons and small interactive graphics), while `<canvas>` is immediate-mode and pixel-based, drawn into via <a href="/wiki/javascript_fundamentals">JavaScript</a> with the browser forgetting the shapes once rendered (ideal for many objects, animations, and games).</p><p>Scroll-driven and rendering optimizations add further polish. `scroll-behavior: smooth` on the `html` or a scroll container animates all programmatic scrolls smoothly, including anchor link navigation. `scroll-snap-type` paired with `scroll-snap-align` enables snap behavior for carousels and galleries without JavaScript, with `mandatory` forcing snapping and `proximity` allowing skips. `scroll-padding` adds an offset inside a scroll container when snapping or jumping to anchors, preventing content from sticking to the top edge under a sticky header. `overscroll-behavior: contain` prevents scroll chaining from a child element into its parent (essential for modal dialogs), while `none` also blocks pull-to-refresh. The `scrollbar-gutter: stable` declaration reserves space for the scrollbar even when there is no overflow, preventing layout shifts when content grows to need scrolling. For performance, `contain: layout` tells the browser that an element's internal layout is independent of the rest of the page, allowing it to skip reflow work elsewhere, and `content-visibility: auto` skips rendering work for off-screen elements until they approach the viewport, acting like CSS lazy-loading for layout. The View Transitions API, called via `document.startViewTransition(() => updateDOM())`, enables smooth animated transitions between DOM states using `::view-transition-group`, `::view-transition-old`, and `::view-transition-new` pseudo-elements, replacing much of the JavaScript animation work needed for SPA-feel transitions.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">Performance, Loading & Advanced HTML</h2>
<div class="prose-sm leading-relaxed text-lca-ink space-y-3">
<p>Script loading behavior dramatically affects perceived performance. A stylesheet `<link>` is render-blocking, because the browser pauses rendering until the CSS is fetched and parsed (otherwise unstyled content flashes badly), and a `<script>` is parser-blocking by default, pausing parsing to fetch and execute before resuming. The `defer` attribute downloads the script in parallel with HTML parsing and executes it after the document is fully parsed, in document order, behaving as if placed just before `</body>` without blocking earlier parsing. The `async` attribute downloads in parallel but executes as soon as the script finishes downloading, regardless of DOM state, so order is not guaranteed between async scripts. The best practice is to put critical CSS inline, defer non-critical <a href="/wiki/javascript_fundamentals">JavaScript</a>, and load truly independent scripts like analytics asynchronously. The `font-display` property controls what the browser does while a custom font loads, with `swap` (showing fallback text until the font is ready) generally providing the best perceived performance.</p><p>For below-the-fold images and iframes, `loading="lazy"` tells the browser to defer fetching the resource until it is near the viewport, reducing initial page weight and improving Largest Contentful Paint. Avoid using lazy loading for above-the-fold hero images, where eager loading is faster because the user sees them immediately. The `srcset` attribute lists multiple image sources with their intrinsic widths, and `sizes` tells the browser how wide the image will display at different breakpoints, allowing the browser to pick the most efficient file and serve sharp images on retina displays while saving bandwidth on small screens. The `<picture>` element takes this further with art direction, serving different crops or compositions per breakpoint through `<source media>` rules, not just different resolutions of the same image. The `preload` directive fetches a resource with high priority for the current page (for example, a critical font needed above the fold), while `prefetch` fetches a resource with low priority for the next navigation, and `preload` with `as="image"` plus `imagesrcset` and `imagesizes` preloads the right variant for the current viewport instead of blindly fetching the largest one.</p><p>Several attributes and tags improve security, theming, and caching. The `integrity` attribute on `<script>` and `<link>` includes a cryptographic hash that the browser verifies before executing or applying the resource, protecting against compromised CDNs, and should always be combined with `crossorigin`. Links opened in new tabs via `target="_blank"` should be paired with `rel="noopener noreferrer"`: `noopener` prevents the new page from accessing `window.opener` (a security issue called tabnabbing), and `noreferrer` removes the Referer header for privacy. The `<meta name="theme-color">` meta tag sets the color of the browser chrome (address bar on mobile, title bar on desktop) and can be paired with a `prefers-color-scheme` media attribute for separate dark-mode colors. Avoiding `user-scalable=no` in the viewport meta tag is essential because it prevents users from zooming the page, violating WCAG accessibility for users with low vision. For caching, `Cache-Control` headers tell the browser how long a resource can be cached and where, and `ETag` provides a fingerprint that lets the browser ask the server whether a resource has changed, with a 304 Not Modified response saving bandwidth; the typical pattern is long `Cache-Control` for hashed static assets and ETag for dynamic content.</p><p>Several advanced HTML elements and form concepts round out the language. Forms send data using either `GET`, which appends data to the URL as query parameters and is suitable for idempotent actions like searches, or `POST`, which sends data in the request body and is required for state-changing actions like creating accounts or submitting comments. The `<video>` `preload` attribute hints how much video data to fetch on page load (`none` for nothing, `metadata` for just duration, `auto` for the full file), and `<track>` adds timed text such as captions, subtitles, descriptions, or chapters. `<template>` holds inert HTML that is not rendered on page load but can be cloned and inserted by JavaScript as a standard way to declare reusable DOM fragments. `<slot>` defines where light-DOM children should be projected inside a shadow DOM for Web Components, with named slots like `<slot name="header">` enabling flexible, reusable custom components. `<details>` paired with `<summary>` creates a native collapsible disclosure widget without JavaScript, with the `open` attribute showing content by default. The `<base>` element sets a default base URL for all relative links and images, while `hreflang` on `<a>` indicates the language of the linked resource. Data attributes (`data-*`) let you store custom data on any element without affecting layout or behavior, accessed in JavaScript via `element.dataset`. Void elements like `<br>`, `<hr>`, `<img>`, `<input>`, and `<meta>` cannot have children or closing tags, distinguishing them from normal elements that require both opening and closing tags.</p>
</div>
<h2 class="font-display font-bold uppercase text-lg text-lca-ink mt-8 mb-2">Frequently asked questions</h2>
<div class="divide-y divide-lca-ink/10 border-2 border-lca-ink/10 rounded-xl">
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What is the purpose of HTML5 semantic elements?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed">HTML5 semantic elements provide <b>meaningful structure</b> to web pages. They describe the <b>role</b> of their content rather than just its appearance. Examples include <code><header></code>, <code><nav></code>, <code><main></code>, <code><article></code>, <code><section></code>, and <code><footer></code>. They improve <b>accessibility</b>, <b>SEO</b>, and code readability.</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What are the CSS position values and how do they differ?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed">CSS <code>position</code> values:<ul><li><code>static</code> – default, follows normal document flow</li><li><code>relative</code> – offset from its normal position, still occupies original space</li><li><code>absolute</code> – removed from flow, positioned relative to nearest positioned ancestor</li><li><code>fixed</code> – removed from flow, positioned relative to the viewport</li><li><code>sticky</code> – toggles between relative and fixed based on scroll position</li></ul></div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What are CSS transitions?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed">CSS transitions animate property changes <b>smoothly over time</b>. Syntax:<br><code>transition: property duration timing-function delay;</code><br>Example:<br><code>.button {<br> background: blue;<br> transition: background 0.3s ease;<br>}<br>.button:hover { background: darkblue; }</code><br>Key properties:<ul><li><code>transition-property</code> – which property to animate</li><li><code>transition-duration</code> – how long</li><li><code>transition-timing-function</code> – easing curve</li></ul></div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What are the required components of a minimal valid HTML5 document?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed">A minimal HTML5 page contains:<br><code><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Page</title><br></head><br><body></body><br></html></code><br>The <code>lang</code> attribute on <code><html></code> and a <code><meta charset></code> declaration are essential for accessibility and correct character encoding.</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What is the purpose of the <code><template></code> element?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed"><code><template></code> holds <b>inert HTML markup</b> that is <b>not rendered</b> on page load and not parsed as active content. <a href="/wiki/javascript_fundamentals">JavaScript</a> can clone and insert its contents dynamically. It is the standard way to declare reusable DOM fragments (better than stuffing hidden markup in <code><script></code> tags or injecting HTML strings, which can introduce XSS risks).</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What is the <code><abbr></code> element?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed"><code><abbr></code> marks an <b>abbreviation or acronym</b>. The full expansion belongs in the <code>title</code> attribute:<br><code><abbr title="HyperText Markup Language">HTML</abbr></code><br>Screen readers may announce the expansion on focus, and browsers often show it as a tooltip. Helps both accessibility and SEO.</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What is <b>margin collapsing</b> in CSS?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed">Adjacent <b>vertical</b> margins <b>collapse</b> 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.<br>Margin collapse does <b>not</b> happen with horizontal margins, inside Flexbox/Grid, or on elements with <code>overflow: auto</code>. Knowing when collapse applies prevents mysterious spacing bugs.</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What does <code>place-items</code> do in CSS Grid?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed"><code>place-items</code> is shorthand for <code>align-items</code> + <code>justify-items</code>:<br><code>place-items: center;</code> centers items both ways.<br><code>place-content</code> is shorthand for <code>align-content</code> + <code>justify-content</code>, distributing space around the grid itself. These shorthands reduce verbosity in common layouts.</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What is the <code>content-visibility</code> property?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed"><code>content-visibility: auto;</code> tells the browser to <b>skip rendering work for off-screen elements</b> until they approach the viewport. Combined with <code>contain-intrinsic-size</code> (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.</div>
</div>
<div class="p-4">
<h3 class="font-bold text-lca-ink mb-1">What is the difference between <code><em></code> and <code><strong></code> vs <code><i></code> and <code><b></code>?</h3>
<div class="text-sm text-lca-ink/90 leading-relaxed">Semantics vs presentation:<br><ul><li><code><em></code> — <b>semantic emphasis</b> (stress when read aloud)</li><li><code><strong></code> — <b>semantic strong importance</b></li><li><code><i></code> — alternate voice/mood, technical terms, foreign phrases (presentational italic)</li><li><code><b></code> — stylistically offset without extra importance (keywords, product names)</li></ul>When in doubt, choose the semantic tags. Use CSS for visual emphasis.</div>
</div>
</div>
<div class="mt-8 p-5 rounded-xl bg-lca-terra/10 border-2 border-lca-ink/10">
<p class="font-display font-bold uppercase text-sm text-lca-ink mb-1">Drill this topic</p>
<p class="text-sm text-lca-muted-2 mb-3">170 flashcards on HTML CSS Fundamentals — free, no signup needed to start.</p>
<a href="https://learncoachassist.com/study/html_css_fundamentals" class="inline-block px-4 py-2 bg-lca-ink text-white rounded-lg font-bold uppercase text-xs">Study HTML CSS Fundamentals flashcards</a>
</div>
</div>
<div class="mt-6">
<h2 class="font-display font-bold uppercase text-sm text-lca-ink mb-2">Related wiki topics</h2>
<div class="flex flex-wrap gap-2">
<a href="https://learncoachassist.com/wiki/javascript_fundamentals" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">Javascript Fundamentals</a>
<a href="https://learncoachassist.com/wiki/api_testing" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">API Testing</a>
<a href="https://learncoachassist.com/wiki/algorithms_code" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">Algorithms Code</a>
<a href="https://learncoachassist.com/wiki/angular_framework" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">Angular Framework</a>
<a href="https://learncoachassist.com/wiki/bash_scripting_for_automation" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">Bash Scripting For Automation</a>
<a href="https://learncoachassist.com/wiki/c_programming" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">C Programming</a>
<a href="https://learncoachassist.com/wiki/cicd_pipelines" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">Cicd Pipelines</a>
<a href="https://learncoachassist.com/wiki/cloud_computing_aws" class="px-3 py-1.5 bg-white border-2 border-lca-ink/10 rounded-lg text-sm hover:border-lca-ink transition-colors">Cloud Computing AWS</a>
</div>
</div>
<p class="text-[11px] text-lca-muted-2 mt-8">
LearnWiki pages are generated with AI assistance from LearnCoachAssist's reviewed study catalog and may contain errors — verify anything critical against your course materials.
</p>
</div>
</div>
<footer class="bg-lca-ink text-lca-cream/80 mt-12 border-t-[3px] border-lca-ink">
<div class="max-w-7xl mx-auto px-4 py-10">
<div class="mb-10">
<div id="newsletter-signup-footer" class="bg-lca-cream-alt border-2 border-lca-ink rounded-lg p-6">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<div class="flex-1">
<h3 class="font-display font-extrabold uppercase text-base text-lca-ink">📬 Get new decks and study tips in your inbox</h3>
<p class="text-sm text-lca-muted mt-1">Short, practical emails with new flashcard decks, learning science, and better study workflows. No spam.</p>
</div>
<form class="newsletter-form flex w-full flex-col gap-2 sm:w-auto sm:flex-row shrink-0" data-source="footer">
<input type="hidden" name="_token" value="TD6jwIgaUtworcOrm4g4AoSh1lBfC0dOyTu899uy" autocomplete="off"> <input type="email" name="email" required placeholder="you@email.com"
class="w-full flex-1 sm:w-56 px-4 py-2.5 border-2 border-lca-ink rounded-md bg-lca-cream text-sm text-lca-ink placeholder-lca-muted-3 focus:outline-none focus:ring-2 focus:ring-lca-terra"
aria-label="Email address">
<input type="text" name="hp" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;">
<button type="submit" class="w-full sm:w-auto px-5 py-2.5 bg-lca-terra text-lca-cream text-sm font-extrabold uppercase tracking-wide rounded-md hover:bg-lca-terra-dark transition-colors whitespace-normal">Get updates</button>
</form>
</div>
<p class="newsletter-success hidden mt-3 text-sm text-lca-olive font-bold">✅ Thanks for subscribing! Check your inbox.</p>
<p class="newsletter-error hidden mt-3 text-sm text-lca-terra-dark font-bold"></p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.newsletter-form').forEach(form => {
form.addEventListener('submit', async (e) => {
e.preventDefault();
const email = form.querySelector('input[name="email"]').value;
const source = form.dataset.source;
const container = form.closest('[id^="newsletter-signup"]');
const successEl = container.querySelector('.newsletter-success');
const errorEl = container.querySelector('.newsletter-error');
const btn = form.querySelector('button[type="submit"]');
btn.disabled = true;
btn.textContent = "Joining...";
errorEl.classList.add('hidden');
try {
const res = await fetch('https://learncoachassist.com/api/newsletter/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content,
},
body: JSON.stringify({ email, source, hp: form.querySelector('input[name="hp"]')?.value || '' }),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.message || "Something went wrong");
}
form.classList.add('hidden');
successEl.classList.remove('hidden');
} catch (err) {
errorEl.textContent = err.message || "Something went wrong. Please try again.";
errorEl.classList.remove('hidden');
btn.disabled = false;
btn.textContent = "Get updates";
}
});
});
});
</script>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<span class="text-lg font-display font-extrabold uppercase tracking-tight text-lca-cream flex items-center gap-2">
<span class="rounded-md bg-lca-terra text-lca-cream font-display shrink-0" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;line-height:1" aria-hidden="true">L</span>
LearnCoachAssist
</span>
<p class="mt-2 text-sm text-lca-cream/60 leading-relaxed">Free flashcards for any subject. Powered by spaced repetition to help you learn faster and retain more.</p>
</div>
<div>
<h3 class="text-sm font-bold text-lca-gold uppercase tracking-wider mb-3">Learn</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://learncoachassist.com/topics" class="text-lca-cream/70 hover:text-lca-gold transition-colors">All Topics</a></li>
<li><a href="https://learncoachassist.com/packs" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Learning Packs</a></li>
<li><a href="https://learncoachassist.com/anki" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Free Anki Decks</a></li>
<li><a href="https://learncoachassist.com/paths" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Learning Paths</a></li>
<li><a href="https://learncoachassist.com/compare" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Compare Topics</a></li>
<li><a href="https://learncoachassist.com/spaced-repetition-schedule" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Spaced Repetition Planner</a></li>
<li><a href="https://learncoachassist.com/forgetting-curve-calculator" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Forgetting Curve Calculator</a></li>
<li><a href="https://learncoachassist.com/pomodoro-timer" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Pomodoro Timer</a></li>
<li><a href="https://learncoachassist.com/exam-study-planner" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Exam Study Planner</a></li>
<li><a href="https://learncoachassist.com" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Study Flashcards</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-bold text-lca-gold uppercase tracking-wider mb-3">Product</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://learncoachassist.com/blog" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Blog</a></li>
<li><a href="https://learncoachassist.com/flashcard-research" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Flashcard Research</a></li>
<li><a href="https://learncoachassist.com/changelog" class="text-lca-cream/70 hover:text-lca-gold transition-colors">What's New</a></li>
<li><a href="https://learncoachassist.com/about" class="text-lca-cream/70 hover:text-lca-gold transition-colors">About</a></li>
<li><a href="https://learncoachassist.com/faq" class="text-lca-cream/70 hover:text-lca-gold transition-colors">FAQ</a></li>
<li><a href="https://learncoachassist.com/contact" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Contact</a></li>
<li><a href="https://learncoachassist.com/sitemap" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Sitemap</a></li>
<li><a href="https://learncoachassist.com/ai/generate" class="text-lca-cream/70 hover:text-lca-gold transition-colors">AI Deck Generator</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-bold text-lca-gold uppercase tracking-wider mb-3">Categories</h3>
<ul class="space-y-2 text-sm">
<li><a href="https://learncoachassist.com/topics/category/programming" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Programming</a></li>
<li><a href="https://learncoachassist.com/topics/category/mathematics" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Mathematics</a></li>
<li><a href="https://learncoachassist.com/topics/category/ai" class="text-lca-cream/70 hover:text-lca-gold transition-colors">AI</a></li>
<li><a href="https://learncoachassist.com/topics/category/business" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Business</a></li>
<li><a href="https://learncoachassist.com/topics/category/science" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Science</a></li>
<li><a href="https://learncoachassist.com/topics/category/psychology" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Psychology</a></li>
<li><a href="https://learncoachassist.com/topics/category/languages" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Languages</a></li>
<li><a href="https://learncoachassist.com/topics/category/marketing" class="text-lca-cream/70 hover:text-lca-gold transition-colors">Marketing</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-6 border-t border-lca-cream/15 text-center text-xs text-lca-cream/50">
© 2026 LearnCoachAssist. Free flashcard learning for everyone.
·
<a href="https://learncoachassist.com/privacy" class="text-lca-cream/60 hover:text-lca-cream underline">Privacy</a>
·
<a href="https://learncoachassist.com/terms" class="text-lca-cream/60 hover:text-lca-cream underline">Terms</a>
·
<a href="https://learncoachassist.com/cookie-policy" class="text-lca-cream/60 hover:text-lca-cream underline">Cookies</a>
·
<button type="button" onclick="window.gdprCookieConsent && window.gdprCookieConsent.openSettings()" class="text-lca-cream/60 hover:text-lca-cream underline bg-transparent border-0 p-0 cursor-pointer">Cookie settings</button>
·
<a href="https://twelve.tools" class="text-lca-cream/60 hover:text-lca-cream underline">Twelve Tools</a>
·
<a href="https://aiagentsdirectory.com" class="text-lca-cream/60 hover:text-lca-cream underline">AI Agents Directory</a>
·
<p class="mt-3">Deck content is generated with the assistance of AI — review material before relying on it. <a href="https://artificialintelligenceact.eu/article/50/" target="_blank" rel="noopener nofollow" class="text-lca-cream/60 hover:text-lca-cream underline">EU AI Act Art. 50</a></p>
</div>
</div>
</footer>
<script defer src="/vendor/katex/katex.min.js"></script>
<script defer src="/vendor/katex/contrib/auto-render.min.js"
onload="renderMathInElement(document.body,{delimiters:[{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<style>
.lca-glossary-term { border-bottom: 1px dotted currentColor; cursor: help; }
#lca-glossary-popover {
position: fixed;
z-index: 80;
max-width: 260px;
background: var(--color-lca-ink, #241D15);
color: var(--color-lca-cream, #FBF4E6);
font-size: 0.75rem;
line-height: 1.35;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
pointer-events: none;
opacity: 0;
transition: opacity 0.12s ease-out;
}
#lca-glossary-popover.is-visible { opacity: 1; }
</style>
<div id="lca-glossary-popover" role="tooltip" aria-hidden="true"></div>
<script>
(function () {
function popover() { return document.getElementById('lca-glossary-popover'); }
function show(el) {
var definition = el.getAttribute('data-definition');
if (!definition) return;
var pop = popover();
if (!pop) return;
pop.textContent = definition;
pop.setAttribute('aria-hidden', 'false');
pop.classList.add('is-visible');
var rect = el.getBoundingClientRect();
var popRect = pop.getBoundingClientRect();
var top = rect.top - popRect.height - 8;
if (top < 8) top = rect.bottom + 8;
var left = rect.left;
if (left + popRect.width > window.innerWidth - 8) left = window.innerWidth - popRect.width - 8;
if (left < 8) left = 8;
pop.style.top = top + 'px';
pop.style.left = left + 'px';
}
function hide() {
var pop = popover();
if (!pop) return;
pop.classList.remove('is-visible');
pop.setAttribute('aria-hidden', 'true');
}
document.addEventListener('mouseover', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) show(el);
});
document.addEventListener('mouseout', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) hide();
});
document.addEventListener('focusin', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) show(el);
});
document.addEventListener('focusout', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) hide();
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') hide();
});
document.addEventListener('touchstart', function (e) {
var el = e.target.closest && e.target.closest('.lca-glossary-term');
if (el) {
e.preventDefault();
show(el);
setTimeout(hide, 3000);
}
}, { passive: false });
})();
</script>
<script>if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
<script src="/gdpr-cookie-consent.js?v=20260822" data-consent-version="1" defer></script>
</body>
</html>