Preformatted Text & Quotes

<pre> is preformatted text. Unlike a normal paragraph, it shows your content exactly as written, keeping every space, tab, and newline, and it renders in a monospace font by default. It is the natural home for code blocks and ASCII diagrams.

<blockquote> marks an extended quotation, a passage borrowed from somewhere else, and the browser usually indents it. Alongside it, the <cite> element marks the title of the work being quoted. Together they say not just how the text looks, but that it is a quote and where it came from.

These two elements are where the rule from the last lesson flips. Normal HTML collapses your whitespace, but <pre> is the deliberate exception, which is exactly why every code block on the web sits inside one.

Quotations matter because meaning beats appearance. Anyone can indent text with CSS, but <blockquote> and <cite> tell browsers, search engines, and assistive technology that this passage is a genuine quotation from a named source, which plain indentation never communicates.

Inside <pre>, whitespace is preserved instead of collapsed, so the text appears with the same line breaks and indentation you typed. The standard way to show code is to wrap a <code> element inside a <pre>. Because the content is still parsed as HTML, escape the syntax characters inside it: write < for < and & for &.

<blockquote> takes an optional cite attribute whose value is a URL pointing to the source. That attribute is machine-readable metadata only and is never shown on the page, so do not expect it to display.

To show a human-readable source, use the <cite> element, which marks the title of a creative work such as a book, article, or film and usually renders in italics. Two rules trip people up: <cite> is for the title of the work, not a person's name, and the visible attribution belongs outside the <blockquote>, in a following line or a <figcaption>, not inside the quoted text.