Why Consistent Terminology Matters
When you ask AI to “put a logo at the top of the main page,” the AI has to decide whether you mean the Header, the Hero section, or the Navigation Bar. If you say Header instead of the vague “top area,” you get the result you want on the first try.
Using precise terminology when communicating with AI:
- Reduces the number of prompt retries
- Makes the generated code structurally consistent
- Produces cleaner HTML/CSS class naming
Layout Regions
These terms describe the major structural areas of a page.
| Term | Description |
|---|---|
| Header | Topmost area of the page. Contains logo and navigation |
| Navigation (Nav) | Collection of menu links. Included in the Header or standalone |
| Sidebar | Auxiliary area on the left/right. Filters, menus, table of contents, etc. |
| Main Content | Central area where the core content is displayed |
| Footer | Bottom of the page. Copyright, links, contact info, etc. |
| Hero Section | Large banner/intro area at the top of a landing page |
| Breadcrumb | Path showing current location in a hierarchy (Home / Blog / Post Title) |
| Container | Wrapper element that limits the max width of content |
| Grid | Row/column based grid layout system |
| Wrapper | Wrapping element that groups specific elements together |
<!-- When requesting from AI, say it like this -->
<!-- "Put a logo and Navigation in the Header, a Sidebar on the right, and a Footer at the bottom" -->
<header>
<nav><!-- Navigation --></nav>
</header>
<div class="container">
<main><!-- Main content --></main>
<aside><!-- Sidebar --></aside>
</div>
<footer><!-- Footer --></footer>UI Components
Individual elements that users interact with.
| Term | Description |
|---|---|
| Button | Clickable action trigger |
| Modal (Dialog) | Overlay popup displayed on top of the page |
| Dropdown | Selection list that expands downward on click |
| Tooltip | Short description that appears when hovering over an element |
| Toast (Snackbar) | Brief notification that appears in a corner and disappears |
| Accordion | Content panel that expands and collapses on click |
| Tabs | Tab menu that switches content within the same area |
| Carousel (Slider) | Image/card slides that you swipe left and right |
| Badge | Small label showing status or count (Notifications 3) |
| Avatar | User profile image (circular thumbnail) |
| Skeleton | Gray placeholder showing content layout during loading |
| Spinner (Loader) | Rotating icon indicating loading state |
| Chip (Tag) | Small label representing a category or filter |
| Card | Content block combining image and text |
| Pagination | Number navigation that splits a list across multiple pages |
<!-- "Arrange a card list in a Grid, and put a Badge and Avatar in each card" -->
<div class="grid grid-cols-3 gap-4">
<div class="card">
<img class="avatar" src="/user.jpg" alt="User" />
<span class="badge">New</span>
<h3>Title</h3>
<p>Description</p>
</div>
</div>Form Elements
Elements for receiving data input.
| Term | Description |
|---|---|
| Input (Text Field) | Single-line text input |
| Textarea | Multi-line text input |
| Select (Combobox) | Dropdown selection list |
| Checkbox | Multiple selection (ON/OFF) |
| Radio Button | Single selection (one from a group) |
| Toggle (Switch) | ON/OFF slide switch |
| Date Picker | UI for selecting a date from a calendar |
| File Upload | File attachment area (including drag and drop) |
| Search Bar | Input field dedicated to search |
| Form Validation | Input value validation (required fields, format, etc.) |
| Placeholder | Guide text before input (“Enter your email”) |
| Label | Name/description text for an input field |
<!-- "Create a login form with email Input, password Input, and a Submit button.
Add Validation for email format, and show red text below the Input on error" -->
<form>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email" required />
<span class="error">Invalid email format</span>
<label for="password">Password</label>
<input type="password" id="password" required />
<button type="submit">Log In</button>
</form>Style/Design Terms
Terms related to visual presentation.
| Term | Description |
|---|---|
| Responsive | Design where layout changes based on screen size |
| Breakpoint | Width thresholds for responsive transitions (768px, 1024px, etc.) |
| Dark Mode | Color theme with a dark background |
| Theme | Collection of design system variables for colors/fonts/spacing |
| Padding | Inner spacing of an element |
| Margin | Outer spacing of an element |
| Border Radius | Corner roundness (rounded) |
| Box Shadow | Shadow effect on an element |
| Opacity | Transparency (0 = fully transparent, 1 = opaque) |
| Z-index | Stacking order of elements (higher = displayed on top) |
| Transition | Animation effect when CSS properties change |
| Hover State | Style change when the mouse hovers over an element |
| Focus State | Style when an element is selected via keyboard tab |
State/Behavior Terms
Terms describing app behavior and states.
| Term | Description |
|---|---|
| Loading State | Currently fetching data |
| Empty State | Screen displayed when there is no data |
| Error State | Screen displayed when an error occurs |
| Disabled State | State where clicking/input is not possible |
| Active State | Currently selected state |
| Infinite Scroll | Pattern that automatically loads next data on scroll |
| Lazy Loading | Technique that loads resources only when they are visible |
| Debounce | Executes after a set delay following the last input in a series |
| Throttle | Allows execution only at set time intervals |
| CRUD | Create, Read, Update, Delete |
| SPA | Single Page Application. Operates without page refresh |
| SSR | Server-Side Rendering. Server generates and delivers HTML |
| SSG | Static Site Generation. HTML is pre-generated at build time |
| CSR | Client-Side Rendering. Browser generates the view with JavaScript |
Practical Prompt Examples
Comparing good prompts and bad prompts using proper terminology.
| Bad Prompt | Good Prompt |
|---|---|
| ”Make a menu at the top" | "Add a Navigation to the Header with the logo on the left and menu links on the right" |
| "Show a popup" | "Create a Modal for delete confirmation. Include 2 Buttons: Cancel and Confirm" |
| "Make the list look nice" | "Arrange Card components in a 3-column Grid, with Avatar, Badge, and title in each Card" |
| "Make it work on phones" | "Make it a Responsive layout. Change the Grid to 1 column below Breakpoint 768px" |
| "Show something while loading" | "Show a Skeleton UI during Loading State, then switch to the card list after data loads" |
| "Show more when I scroll down" | "Implement with Infinite Scroll. Lazy Load the next 10 items when reaching the bottom” |
# Actual prompt example
"Create a responsive Navigation in the Header.
- Desktop: logo on the left, menu links horizontally aligned on the right
- Mobile (Breakpoint below 768px): hamburger button + Sidebar-style dropdown
- Dark Mode support
- Active State highlight on the current page link
- Transition animation for mobile menu slide"Summary
Key principles to remember when requesting web development from AI:
| Principle | Description |
|---|---|
| Use English terms first | ”Header Navigation” instead of “menu at the top” |
| Use specific component names | ”Modal” or “Toast” instead of “popup” |
| Specify states | Designate UI for each: “loading,” “error,” “empty state” |
| Specify layout structure | ”Grid 3-column,” “Sidebar left,” “Container max-width 1200px” |
| Include responsive breakpoints | Include breakpoint numbers in your requests |
Using precise English terminology instead of vague descriptions makes a noticeable difference in the quality of AI-generated code. Bookmark this glossary and reference it when writing prompts.