← Back to the Placeholder Tool
Lesson

Understanding Placeholders

“Placeholder” means two different things in web design — stand-in content while you build, and the hint text inside a form field. This lesson covers both, when to use each, and the accessibility traps to avoid.

Step 1

One word, two meanings

When people say “placeholder,” they could mean one of two things. Knowing which one keeps you from confusing them — especially the second, which has real accessibility rules.

1. Stand-in content

Temporary dummy images and text you drop in while building a layout, before the real content exists. Example: a grey 300×200 box, or “lorem ipsum” paragraphs.

2. The placeholder attribute

The faint hint text inside an empty input, like “you@example.com.” It's a real HTML attribute — and it is not a substitute for a label.

Step 2

Placeholder images

Designing a gallery or hero before you have photos? Use a placeholder image service so the boxes are the right size. Two free, no-signup options:

placehold.co — plain sized boxes, with optional colors and text:

<img src="https://placehold.co/300x180" alt="Placeholder">
<img src="https://placehold.co/300x180/38bdf8/0a0a0a?text=Hero" alt="Hero slot">

picsum.photos — real random photos at any size:

<img src="https://picsum.photos/300/180" alt="Random photo">
placehold.co example picsum example
Still give it real alt text describing what the final image will be (e.g. “Team photo”), not “placeholder” — you'll often forget to come back, and screen-reader users deserve the intent. Generate ready-to-paste tags on the Placeholder Tool.
Step 3

Lorem ipsum: placeholder text

“Lorem ipsum” is scrambled Latin-looking text used to fill paragraphs before the real copy is written. Why fake words? So you judge the layout and rhythm without getting distracted reading actual content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Don't over-fill. Use roughly the amount of text the real content will have — a headline's worth for a headline, a sentence for a caption. Pages designed with giant lorem blobs break when real, shorter copy arrives.
Step 4

The HTML placeholder attribute

On form fields, placeholder shows a faint example or hint inside an empty input. It disappears the moment the user types.

<label for="email">Email</label>
<input id="email" type="email" placeholder="you@example.com">
A placeholder is not a label. Once the user types, the hint vanishes — so a field with only a placeholder leaves people unsure what it was for, and many screen readers ignore it. Always pair it with a real <label>; use the placeholder for an example, not the field's name.
Step 5

Styling the placeholder text

You can style that hint text with the ::placeholder pseudo-element — color, style, opacity. Keep it readable but clearly lighter than real input.

input::placeholder {
  color: #38bdf8;
  font-style: italic;
  opacity: 0.8;
}
Contrast matters: very light grey placeholders often fail accessibility contrast checks. Don't make the hint so faint that it can't be read.
Step 6

Loading skeletons: placeholders for data

When a page is waiting on data (from a database or API), modern sites show a skeleton — grey shimmering shapes the size of the real content. It feels faster than a blank screen or a spinner.

CSS — the shimmer

.bar {
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f5f9 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
Step 7

Do & don't

Do

Use placeholders to build layout early · size them like the real thing · write meaningful alt text · always pair an input placeholder with a <label> · swap in real content before launch.

Don't

Ship a site with lorem ipsum or grey boxes still in it · use a placeholder instead of a label · rely on hotlinked placeholder services in production · make placeholder text too faint to read.

Rule of thumb: placeholders are scaffolding. They help you build — then they come down before anyone moves in.
Where next

Keep going