Dummy HTML Generator

About this tool

What is this for?

Testing CSS. When you are writing a stylesheet you need content to write it against — real headings, lists, tables, images and prose, not one paragraph of filler. This generates a representative block of dummy HTML so you can see how your rules actually behave: how the heading scale reads, whether list markers line up, what an unstyled table looks like, how text wraps around a floated image.

How do I use it with my stylesheet?

Turn on "Add document structure", generate, and copy the markup into the page you are styling. The built-in Preview shows the same markup on a blank white page with none of this site's CSS applied, so you can see the raw starting point before your own rules land on it.

How much content should I generate?

A few paragraphs is a sampler — the blocks are packed close together so every element you have enabled appears at once, which is what you want when checking that a stylesheet covers everything. Raise the count and the blocks space themselves out, so a long document reads like a real article instead of a wall of headings. Use the short version to check coverage and the long one to check rhythm and scrolling.

Why is the text Lorem Ipsum?

It comes from a scrambled passage of Cicero's "De Finibus Bonorum et Malorum" (45 BC). The words are real Latin, but rearranged into nonsense — so your eye skims over it as texture instead of getting pulled into reading it, which is exactly what you want when you are judging a layout rather than the copy.

Why generate by paragraphs, sentences, or words instead of characters?

Layouts are judged by paragraph and line structure, not raw character count — these units match how the content actually lands in a design.

What are the inline images?

Grey placeholder boxes labelled with their own pixel dimensions, emitted as <img src="data:image/svg+xml;base64,…"> tags. Because the image data is embedded in the markup itself, the generated block carries its own images — copy it once and the pictures come with it, with no files to attach and no URL to a placeholder service that has to stay online.

Why SVG rather than PNG or JPEG?

A flat box with a label is a few hundred bytes as SVG and would be many kilobytes as a raster image, and SVG stays sharp at whatever size your layout gives it. Every current browser renders an SVG data URI in an <img> tag.

What does the Preview button show?

The generated markup laid out on a blank white page, in a sandboxed frame that none of this site's styling reaches — so headings, wrapping around a floated image, and the images themselves look the way they would in your own page rather than the way they look here. Copy still copies the markup, not the rendering. The button only appears for HTML output, since plain text has nothing to lay out.

Why does turning images on force HTML output?

An image can only ride along as an <img> tag, and plain text has nowhere to put one — so the images option checks "Wrap paragraphs in <p> tags" and holds it there until you turn images back off.

Does this tool upload my data anywhere?

There's nothing to upload — everything is generated in your browser from a fixed word list. No third-party service is involved.

Configuration options

Start with "Lorem ipsum dolor sit amet"

Keeps the traditional opening words at the very beginning of the output, then randomizes the rest. Turn off for a fully randomized passage.

Wrap paragraphs in <p> tags

Outputs ready-to-paste HTML markup instead of plain text with blank-line breaks between paragraphs.

Include accented & international characters

Occasionally swaps a word for one with accented Latin letters, symbols (%, &, @, currency signs, degree signs), typographic punctuation (curly quotes, em dashes, guillemets), or a snippet from a non-Latin script (Japanese, Korean, Greek, Russian, Arabic, Hebrew, Hindi) — useful for spotting layout issues with real-world international text, not for security testing.

Include inline base64 images

Mixes placeholder image boxes into the text as self-contained <img> tags, spread evenly across the paragraphs. Forces HTML output, since plain text cannot carry an image.

Add document structure

Turns a run of paragraphs into a real document: <h2>/<h3> headings, <ul>/<ol> lists, the odd <blockquote>, a <table> with a header row, and scattered inline <a>/<strong>/<em>/<code>. Use it to judge a heading scale, list styling, table borders or prose rhythm — a wall of identical <p> tags tells you none of that. A short document is packed deliberately, so a few paragraphs show you every element at once; longer ones space the blocks further apart so they read like an article rather than a kitchen sink. The sub-toggles turn each kind on and off; the count above still counts paragraphs, and the extra blocks are woven around them.

Tables

A <table> with a <thead> header row and 3-5 body rows. Cell content is typed per column — the first column is always text, the rest are independently text, whole numbers, two-decimal numbers or ISO dates — because a column of consistent values is what makes a table read as data and what actually exercises column-width and alignment rules. No currency symbols and no localised date formats, so nothing in it is language-specific.

Images / Size

How many boxes to spread through the text, and how big each one is. "Random" gives every image its own size from the preset list, which is the quicker way to see how a mixed-media layout copes.

Alignment

How each image sits in the text. "No alignment" emits a bare <img> on its own line with no style attribute, so your own CSS decides. Float left/right wraps the paragraph text around the image; centred puts it on its own line; inline drops it into the middle of a paragraph at a sentence break, the way a small icon or figure would sit. "Random" picks one of those five per image.