Web and SEO terms made simple

Clear definitions. Related terms. Reliable resources. Updated as I learn.

Components and UI – Glossary

Quick reference for common UI patterns, organized by how you work. Browse interactive controls, data display, layout, media, navigation, templates, and typography.

22 terms in this category

Interactive controls (4)

Buttons, inputs, toggles, and dialogs that capture intent and drive actions.

Buttons

Primary and secondary actions with clear labels and focus states.

Dropdowns

Accessible toggles with proper roles, labels, and keyboard navigation.

Range Sliders

Form control for selecting a numeric value, with min, max, step, labels, keyboard support. Input controls for ranges,...

Search

On site search with relevant results, helpful empty states, and clear filters.

Data display (1)

Present information clearly with tables, lists, badges, and status cues.

Tables

Tabular data with headers, responsive strategies, and readable cell content.

Layout blocks (6)

Structure pages with sections, grids, cards, and containers for readable flow.

404 page

A 404 page is the screen users see when a URL cannot be found, it should help them recover and keep browsing. Why it ...

Accordion

Progressive disclosure with accessible buttons and keyboard focus.

Carousel

Multi‑item media slider with slides, arrows, dots, auto‑advance, swipe, accessibility. Use sparingly, ensure accessib...

Hero

The primary header section that combines headline, subhead, media, and a CTA, keep contrast and performance in check.

Hero image

Prominent banner with good contrast, performance, and message alignment.

Tabs

Accessible segmented content with keyboard support and clear labels.

Media elements (2)

Images, video, and audio components with sensible loading and accessibility.

Flexible images

Images that adapt to their containers and contexts. Common patterns include max-width: 100 percent, responsive srcset...

Images

Choose formats wisely, set dimensions, and write useful alt text.

Menus, breadcrumbs, tabs, and pagination that help people move with confidence.

Anchor link

Deep links within a page that use headings correctly and remain accessible.

Breadcrumbs

Hierarchical links that aid wayfinding, improve context, and support accessibility.

Hamburger menu

Mobile navigation pattern with clear label, motion, and focus management.

Links

Clear labels, visited states, and external link indicators where needed. Related articles Ever clicked a link and hit...

Navigation

Global navigation, footer links, and in page wayfinding that help users discover content.

Templates (1)

Page level scaffolds, heroes, footers, and reusable shells for common layouts.

Page templates

Consistent layouts, reusable components, and content guidelines that keep pages coherent.

Typography and headings (3)

Type scales, headings, and text styles that keep content legible.

Eyebrow

A small pre heading label that adds quick context above the title.

Headings

Use H1 to H6 for hierarchy, one H1 per page, keep text concise.

Subheading (or subhead)

A secondary heading that supports the main title with extra context.

About this glossary

I’m building this glossary to become a better developer and website strategist, in my ongoing quest to build clearer, better websites. It maps how terms relate, adds practical examples, and highlights best practices so I can communicate more clearly with clients. If it helps others too, great.

It’s a living resource, I aim to cite sources clearly. If you spot errors or omissions, please contact me so I can update it. Drafts may be assisted by AI, I review and fact check before publishing. For details on how I use AI, see AI Use at Webmarks.