---
description: "Web design terminology for writing clearer Dalton prompts — above the fold, hero, CTA, form fields, and more."
---

# Common Web Design Terms

Understanding basic web design terminology helps you write clearer prompts. Here are the most common terms you'll encounter:

## HTML, CSS & JavaScript

A web page is made up of three parts:

- **HTML**: What is it? Also called the markup.
- **CSS**: What does it look like? Commonly referred to as styling.
- **JavaScript**: What does it do? This is the logic or interactivity part of the website.

## Axes

- **x axis**: This refers to the horizontal or left-right direction of a web page.
- **y axis**: This refers to the vertical or up-down direction of a web page.
- **z index**: This refers to the 'depth', and decides, if two elements are overlapping, which one will be shown on top.

**Examples in prompts:**
- "Add some margin on the x axis, so the text doesn't stick to the sides."
- "The icon and text are not centered on the y axis."
- "Make sure the popup has a higher z-index than the rest of the page."

**Positioning**
- **Sticky**: This term is often used to describe something that is fixed in place when scrolling, useful for things that always need to be visible, like navigation menus or popups.

**Examples in prompts:**
- "Add a sticky buy button on mobile"
- "Make sure the popup is sticky, so it's always visible on the page."


**Examples in prompts:**
- "Make the CTA button sticky at the bottom of the page on mobile"
- "Layer the badge above the image using a higher z-index"
- "Absolutely position the icon in the top-right corner of the card"


## Spacing

To describe spacing inside and around an element, we use different terms.

- **Margin**: Space *outside* an element, between it and other elements. Use when you want to move an element away from others.
- **Padding**: Space *inside* an element, between its border and content. Use when you want to add space inside a button, card, or container.
- **Gap**: For elements aligned in a grid, the spacing between grid items is often referred to as gutters, or gaps.

**Examples in prompts:**
- "Add more padding inside the button" (makes the button bigger internally)
- "Add margin above this section" (creates space between this section and the one above)
- "Increase the padding on mobile only" (makes content less cramped on small screens)

## Alignment

- **Horizontal alignment**: Left, center, or right. Use terms like "center this text" or "align the button to the right"
- **Vertical alignment**: Top, middle, or bottom. Use terms like "vertically center the content" or "align items to the bottom"

**Examples in prompts:**
- "Center the headline horizontally"
- "Vertically center the button in the hero section"
- "Align the trust badges to the right on desktop"

## Other Common Terms

- **Responsive**: Adapts to different screen sizes (mobile, tablet, desktop)
- **Above the fold**: Content visible without scrolling (most important area)
- **CTA (Call-to-Action)**: Buttons or links that prompt users to take action
- **Hero section**: The main banner area at the top of a page, usually containing the headline and primary CTA