Lorem Ipsum HTML: How to Generate Markup-Ready Filler

Copying filler text from a website and hand-wrapping it in <p> tags is a strange thing to still be doing in 2026. Your editor can emit Lorem Ipsum HTML already inside the markup, in one keystroke, with the paragraph count and word count you asked for. This guide covers the editor route, the browser route, which tags should hold filler, and the accessibility detail almost everyone skips.

#TL;DR

• Emmet's lorem abbreviation ships in VS Code — no extension needed.
• p*4>lorem20 expands to four paragraphs of twenty words each.
• ul>lorem8.item*5 fills a list; implicit tag names do the rest.
• Mark filler with lang="zxx" so screen readers do not mispronounce it.
• Grep your build output for the word bank before every release.

#How to generate Lorem Ipsum HTML in your editor

The fastest path never leaves the file you are editing. Emmet — the abbreviation engine behind most modern editors — treats filler text as a first-class generator, not a static snippet.

#What the Emmet lorem abbreviation actually does

Type lorem (or lipsum) and expand. The Emmet documentation is explicit that this is a generator: each expansion produces about 30 words of dummy text split across a few sentences, so two expansions in the same file will not be identical. That non-repetition matters more than it sounds. Identical paragraphs make a layout look more regular than it is, and reviewers stop reading them.

Append a number to set the length:

lorem          → ~30 words
lorem12        → 12 words
lorem100       → 100 words

In VS Code this works with no extension installed. Microsoft's Emmet in Visual Studio Code page confirms expansion is enabled by default in html, pug, haml, slim, jsx, xml and anything inheriting from them, including php and handlebars. If Tab does not expand, add "emmet.triggerExpansionOnTab": true to settings — expansion is bound to the suggestion list by default, not to Tab.

#How to generate 4 paragraphs of lorem ipsum at once

This is the abbreviation worth memorising:

p*4>lorem20

It expands to four <p> elements, each holding twenty words of unique filler. Change either number independently. p*12>lorem8 gives you a long, choppy column; p*2>lorem120 gives you two dense blocks. Those two shapes stress a text container very differently, and switching between them is a two-character edit.

The same pattern works for headings and mixed blocks:

section>h2>lorem6^p*3>lorem30

That produces a section with a six-word heading followed by three thirty-word paragraphs — a realistic article stub in one line.

#Filling a list with ul>lorem10.item*4

Lists are where hand-pasting gets tedious, and where Emmet's implicit tag resolver earns its keep. Inside a ul, a repeated lorem resolves to li on its own:

ul.generic-list>lorem10.item*4

You get four <li class="item"> elements, each with ten words. No li in the abbreviation at all. The same resolution applies inside ol, table and select, which makes filling a fake nav or a fake results list about as fast as typing the class name.

#How to add lorem ipsum to HTML without an editor plugin

Not every context has Emmet. CMS rich-text fields, a browser devtools scratchpad, an email template builder, a Figma-to-code handoff — all of them want pasted markup.

#Generate the words, then wrap them

The two-step version: pull the paragraph count you need from a client-side generator such as iKit's Lorem Ipsum Generator, then wrap. If you are pasting into a Markdown-based system, skip the wrapping entirely — blank-line-separated paragraphs become <p> elements when the Markdown is rendered, which you can check live in the iKit Markdown Editor before committing.

#Generating filler HTML with a few lines of JavaScript

When you need filler inside a running page — a Storybook story, a seeded demo, a design-system playground — generate it rather than paste it:

const BANK = `lorem ipsum dolor sit amet
consectetur adipiscing elit sed do
eiusmod tempor incididunt ut labore`
  .split(/\s+/);

const words = (n) =>
  Array.from({ length: n }, () =>
    BANK[Math.floor(Math.random() * BANK.length)]
  ).join(" ");

const paras = (count, len) =>
  Array.from({ length: count },
    () => `<p lang="zxx">${words(len)}</p>`
  ).join("\n");

document.querySelector("#demo").innerHTML = paras(4, 25);

Three things to note. The word bank is yours, so it never hits a network — useful on a plane, and useful inside a corporate network that blocks unknown APIs. The lang="zxx" is doing real work; more on that below. And innerHTML is safe here only because every character in the bank is ASCII with no markup significance. The moment you swap in a themed bank containing &, < or accented characters, run it through an encoder first — the iKit HTML Encoder shows exactly which characters need escaping.

#When a <template> beats live markup

If the filler exists only to show a layout, put it in a <template> element and clone it on demand. Content inside <template> is inert: it is parsed but not rendered, images inside it are not fetched, and scripts inside it do not run. That gives you a block of filler markup that cannot accidentally render in production even if the toggle that shows it is removed.

#Which HTML tags should hold placeholder text

Filler is only useful if it has the right shape. A 30-word blob dropped into an <h2> tells you nothing about how a real six-word heading will sit.

#How many words of lorem ipsum per HTML element

Rough budgets that hold up across most designs:

Two habits worth adopting:

• Vary the lengths. Real content is uneven. If every card in a grid holds exactly 20 words, the grid will look fine in the mockup and break the week real copy arrives. Generate a few at 8 words and a few at 45.
• Check the count, do not eyeball it. A "short headline" and a "long headline" differ by maybe four words, and that is the difference between one line and two. Paste the candidate into the iKit Word & Character Counter and design against the number.

#Why you should never put lorem ipsum in alt, title or meta tags

Visible filler gets caught in review. Filler in attributes does not. An alt="Lorem ipsum dolor sit amet" looks like a filled-in field to a linter and to a code reviewer scanning the diff, but it is worse than an empty alt for a screen-reader user, who now hears nonsense instead of nothing. The same applies to <title>, meta[name="description"], aria-label and placeholder. Leave attribute values empty or write the real string; never fill them with Latin.

#Why lorem ipsum breaks screen readers, and how lang fixes it

This is the part almost every filler tutorial skips.

Drop Latin into a page declared lang="en" and a screen reader will apply English pronunciation rules to it. WCAG 2.2 Success Criterion 3.1.2, Language of Parts, exists for exactly this: when a passage is in a different language from the page, the language of that passage has to be programmatically determinable, so speech synthesizers can switch pronunciation rules instead of guessing. It is a Level AA criterion, which puts it inside most organisations' baseline.

For a mockup nobody else will open, this is academic. For a client prototype, a component library demo, a public design system or a staging site with a shared URL, it is not.

#How to mark Latin filler correctly

The obvious answer is lang="la":

<p lang="la">Lorem ipsum dolor sit amet,
  consectetur adipiscing elit.</p>

That is defensible, and it is what most tools emit. But it is slightly untrue: Lorem Ipsum is not Latin prose. It is a scrambled, truncated fragment of Cicero with words cut in half — lorem is the tail of dolorem. Declaring it Latin tells a speech synthesizer to pronounce nonsense with confidence.

The more accurate tag is zxx, the BCP 47 subtag registered for no linguistic content:

<p lang="zxx">Lorem ipsum dolor sit amet,
  consectetur adipiscing elit.</p>

Per MDN's lang reference, the attribute takes a single BCP 47 language tag and is inherited by descendants — so one lang="zxx" on the wrapper covers everything inside it, and you do not have to annotate each paragraph. Note that the empty string, lang="", is not the same thing: it means the language is explicitly unknown, which is a weaker claim than "this is not language at all".

There is a bonus: lang="zxx" is trivially greppable. Any occurrence in a production build is a filler block that escaped.

#How to stop lorem ipsum from reaching production

Every developer has a story about Latin in a footer. The fix is mechanical, not cultural.

#A grep rule for CI

Fail the build on a match, the same way you fail on a stray TODO:

#!/usr/bin/env bash
set -euo pipefail

if grep -rniE \
  'lorem ipsum|dolor sit amet|lang="zxx"' \
  ./dist --include='*.html'; then
  echo "Placeholder text found in build output"
  exit 1
fi

Run it after the build, against the output directory rather than the source tree — that way filler inside Storybook stories or fixture files does not trip it, but anything that made it into a shipped page does. If your templates live in XML-ish formats, validate those separately; the iKit XML Formatter is a quick way to confirm a template file is well-formed before you go looking for filler in it.

#Swap in difficult content before you sign off

Filler that passes review is filler shaped like the design. Real content is not. Before a layout is approved, replace the Latin with the worst realistic strings you can find: a 90-character German compound noun, a name with no spaces, an empty field, a paragraph three times longer than budgeted. Half the bugs a design ships with are visible the moment you do this, and none of them are visible while the page is full of tidy 20-word Latin blocks.

#References

• “Lorem Ipsum” generator — Emmet Documentation — behaviour of the lorem generator, word-count suffixes, and implicit tag resolution in repeated elements.
• Emmet in Visual Studio Code — which file types have Emmet enabled by default, and the emmet.triggerExpansionOnTab setting.
• Understanding Success Criterion 3.1.2: Language of Parts — WCAG 2.2 Level AA requirement for marking language changes, and why synthesizers need it.
• lang HTML global attribute — MDN — BCP 47 tag format, inheritance behaviour, and the meaning of lang="".
• HTML Standard — The lang and xml:lang attributes — normative definition of the attribute referenced by both MDN and WCAG.

#Related on iKit

• Start with the fundamentals of placeholder text before you wrap it in tags — the practical guide to how much filler a mockup needs and when it stops helping.
• Understand what filler text hides in a design review — the case for swapping Latin for real or deliberately difficult content before sign-off, which is exactly the last step above.
• Trace where the Latin in your markup actually came from — the paper trail from Cicero to Letraset, and why lorem is a truncated word rather than a real one.
• Swap the Latin word bank for a themed one — when Bacon, Cat or Hipster Ipsum makes a stakeholder read the layout instead of skimming past it, and the escaping caveats that come with it.