Terms explained

What is an iframe: an HTML element that draws another document inside a box on your page. How it works, the height problem, the attributes worth.

What iframe srcdoc does: the whole inner document goes in an attribute, so a preview needs no file and no address. Escaping, why every HTML viewer uses.

The iframe sandbox attribute starts from nothing allowed and grants back what you list. What each value permits, the combination to avoid, a working.

What a data URI is: the resource written into the address itself, so an image or font travels inside the HTML file. The syntax, where it fits, why.

What a static page is: the server hands over the same file to every reader and computes nothing per request. Scripts still run in the browser. Where.

contenteditable in HTML turns any element into a text field on click, with no library. What it does, the three things it does not do, the focus style.

What the DOCTYPE in HTML does: one first line that tells the browser to use current rules instead of quirks mode. What quirks mode changes, how to check.

What the viewport meta tag does: tells a phone to lay the page out at its real width instead of a pretend 980px. What each value means, why not to.

Inline CSS puts the rule on the element with a style attribute. The two cases where it is right, why it is wrong the rest of the time, how specificity.

An external stylesheet is a CSS file the page links to. Right for a site of many pages sharing rules; wrong for a single page that will be sent, because.

A self-contained HTML file carries its styles, scripts and small images inside itself and points only at full https addresses. The checklist, the.

A base64 image in HTML is the file's bytes written as text inside the img tag, so the picture travels with the page. How to produce one, why to compress.

SVG in HTML puts a drawing into the page as markup: sharp at any size, coloured by CSS variables, readable by screen readers, and embedded by.

CSS grid lays children out in rows and columns you declare. One line, repeat(auto-fit, minmax(170px, 1fr)), fits as many columns as the width allows and.

CSS flexbox arranges children along one line and shares the space between them. The four patterns that cover most rows, the shrinking trap, and when.

A CSS media query applies rules only when a condition holds: screen width, print, dark mode preference. Write mobile-first, pick breakpoints from the.

box-sizing: border-box makes padding and border fit inside the width you wrote instead of adding to it. Why the default breaks layouts, what one.

Web font CSS: a font the page brings with it via @font-face, embedded as woff2 or fetched from an address, versus a system font stack that brings.

A favicon in HTML is the icon in the tab, bookmark and history. One link tag with an SVG data URI covers modern browsers with no file; add a PNG for.

Open Graph tags are meta lines in the head that chat apps and social feeds read to draw a preview card: title, description, image. The complete useful.

A canonical URL is one link tag in the head naming the true address of a page, so copies with tracking parameters, www or a trailing slash are folded.

The title tag and meta description are the two lines a search result shows. What each does, how long they can be, how to write them so the result makes.

JSON-LD structured data is a script block that search engines read and readers never see: what kind of page this is, when it changed, who wrote it. The.

Alt text in HTML is what stands in for an image when it cannot be seen: read aloud by a screen reader, shown when the file fails to load. Write the.

Semantic HTML uses the element that says what a thing is, a heading, a nav, a table with headers, instead of a styled div. Same look, and it means.

aria-label gives an element a spoken name when nothing visible does: an icon-only button, a chart drawn from bars, a close control. The four cases where.

tabindex in HTML controls whether an element is in the keyboard's Tab order. 0 adds an element in document order, -1 lets a script focus it without.

localStorage in JavaScript keeps a few megabytes of text per origin in one browser on one machine, across reloads. Always wrap it in try, everything is.

sessionStorage in JavaScript is localStorage with a shorter life: kept across reloads, gone when the tab closes, separate per tab. When per-tab is the.

What CORS is: the browser rule that a page may read a response from another origin only if that origin allows it in a header. What an origin is, why the.

The MIME type is the Content-Type label a server puts on a response. For the same HTML file, text/html draws a page, text/plain shows the source.

A Content Security Policy lists where a page may load scripts, styles, images and frames from; anything else is refused. The directives worth knowing, a.

Mixed content is an http image, script or stylesheet inside an https page. Scripts and styles are blocked outright, images upgraded or blocked, with no.

Relative vs absolute paths in HTML: 'next to this file' versus 'at this location on the web'. Which of the four forms survives being sent, uploaded or.

file:// is the address for a page opened from disk. It is not on the web: only this machine can reach it, scripts cannot fetch neighbours, some features.

What HTTPS is: HTTP with encryption and a certificate, so nobody between reader and server can read or alter the page, and the server is proven. What it.

Cache busting is changing a file's address when the file changes, so browsers holding the old copy fetch the new one. Where copies are held, the two.

HTML minification strips whitespace and comments so the same code is smaller on the wire. What it saves, why compression saves more, and why the image.

A print stylesheet is a CSS block that applies only when printing or saving as PDF: hide navigation, keep tables whole, write link addresses out, set.

Dark mode CSS is one media query, prefers-color-scheme: dark, that redefines the page's colour variables. If every colour comes from a variable, the.

What word-break does, how it differs from overflow-wrap and hyphens, and which one to use for URLs, code, table cells and ordinary prose.

Table cells size themselves from content, so wrapping rules get ignored. Use table-layout fixed with column widths, then wrap or truncate per column.

Show and hide a div with details, the hidden attribute, a CSS class toggle, or display none. Which one survives sharing, printing and screen readers.

Show one div per dropdown option using a change listener and matching ids. Includes the reset on load, the multi-panel table, and the accessibility line.

Build nested collapsible sections with details and summary, keep deep links working, and stop the three-level tree that nobody can navigate.

Two different things share the name dropdown menu. Which one you need, the markup for each, and the keyboard rules a hover menu has to earn.

Set the default selected option with the selected attribute, add a placeholder that cannot be submitted, and fix the value the browser restores on reload.

Three different yes no buttons in HTML: a confirm prompt, a recorded answer, and a branch that reveals a section. Markup for each and which to use.

Build a modal form with the dialog element, close it without losing input, keep validation working, and know when a modal is the wrong container.

Two ways to build a modal in HTML and CSS. What the dialog element gives you free, what a div overlay has to re-earn, and the scroll lock fix.

Build a navbar with nav, a list and flexbox, mark the current page, and handle narrow screens without a hamburger you have to maintain.

Make a header stick with position sticky and top zero, then fix the four ancestors that silently disable it and the anchor links it hides.

Pin a header and footer with CSS grid or position fixed, reserve the right space, handle the mobile browser bar, and keep printing readable.

Stick a table header with position sticky on th, fix the missing borders, handle a scrolling container, and pin the first column too.

Pin the first column of an HTML table with position sticky and left zero. The scroll container, the background colour, and the four reasons it fails.

A table cannot scroll itself. Wrap it in a div with overflow-x auto, and the wide table scrolls instead of stretching or squashing the page.

Stripe alternating table rows with nth-child(even). Which rows to tint, how dark to go, dark mode values, and when striping hurts more than it helps.

border-collapse decides whether neighbouring cells share one border or keep two. What each value changes, what each one breaks, and which to pick.

Why width on a td is treated as a suggestion, what table-layout fixed changes, and the colgroup pattern that sets every column width in one place.

Freeze a table header with position sticky and top zero. The thead rule, why it needs a background, and the three ancestors that silently break it.