Quotes, Code and Preformatted Text
Learn the HTML elements for marking up quotations, citations, code, preformatted whitespace, and specialized technical text like keyboard input and program output.
Beyond everyday prose, web pages frequently need to represent specialized kinds of text: a quotation borrowed from another source, a snippet of programming code, instructions telling a reader which keys to press, or output copied verbatim from a terminal. HTML has dedicated elements for each of these cases, and using the right one — rather than just wrapping everything in a generic <span> or <div> — gives that content proper meaning, default styling, and accessibility support out of the box. This lesson covers quotations, citations, code-related elements, and the specialized <kbd>, <samp>, and <var> elements.
Block Quotations: <blockquote>
The <blockquote> element marks an extended quotation borrowed from another source, displayed as its own block (typically indented by default browser styling). It's meant for substantial quoted content — a paragraph or more — not a short quoted phrase embedded mid-sentence.
<blockquote> accepts an optional cite attribute, whose value is a URL pointing to the source of the quotation. This attribute is not displayed by the browser — it's metadata intended for tools, browsers, and search engines that may want to verify or link to the original source. Because it isn't visible, many pages also include a visible attribution (often using <cite> or a plain <footer>) alongside the cite attribute.
Inline Quotations and Citations: <q> and <cite>
The <q> element marks a short, inline quotation embedded within a sentence — the kind you'd normally surround with quotation marks. Browsers automatically add quotation marks around <q> content, so you should not type literal quote characters yourself; doing so would produce doubled-up quotation marks.
The <cite> element marks the title of a creative work being referenced — a book, film, song, research paper, or similar — not the name of a person. This is a frequent point of confusion: <cite>Jane Doe</cite> is technically incorrect usage, because Jane Doe is a person, not a titled work; <cite>The Great Gatsby</cite> is correct usage.
Code and Preformatted Text: <code> and <pre>
The <code> element marks a fragment of computer code, typically rendered in the browser's default monospace font. It's commonly used inline within a sentence — for example, to reference a function name or a short snippet — without affecting whitespace or line breaks.
The <pre> element marks preformatted text, meaning the browser preserves exactly the whitespace, line breaks, and spacing written in the HTML source, instead of collapsing multiple spaces and line breaks the way it normally does with regular text. This makes <pre> essential for displaying multi-line content — like a block of source code, ASCII art, or a poem — exactly as it was typed.
<pre> and <code> are very frequently combined: a <code> element nested inside a <pre> element is the standard pattern for displaying a full, multi-line, properly formatted block of source code, with <pre> preserving the layout and <code> semantically marking it as code.
Keyboard Input, Sample Output, and Variables
The <kbd> element represents user input, most commonly keyboard keystrokes — for example, instructing a user to press Ctrl and C together. It's typically rendered in a monospace font, sometimes with a subtle box or border in browser defaults or common stylesheets, to visually resemble a physical key.
The <samp> element represents sample output from a computer program — text that a program printed, such as a terminal's response after running a command, or an error message a script produced. Like <code> and <kbd>, it's typically rendered in monospace.
The <var> element marks a variable — in a mathematical expression or a piece of programming context — such as x in an equation, or placeholder text like username in a piece of documentation describing a command's syntax. It's usually rendered in italics by default.
Quotation and Code Syntax
Browsers automatically add quotation marks around <q> content — do not add your own. Inside <pre>, whitespace and line breaks are preserved exactly as written in the HTML source.
<blockquote cite="https://example.com/source">
<p>A longer quotation goes here, possibly spanning multiple sentences.</p>
</blockquote>
<p>She said, <q>the deadline is tomorrow.</q></p>
<p>Read more in <cite>Clean Code</cite>.</p>
<p>Use the <code>Array.map()</code> method to transform a list.</p>
<pre><code>function greet(name) {
return "Hello, " + name;
}</code></pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The terminal printed: <samp>Build succeeded in 2.3s</samp></p>
<p>In the formula, <var>x</var> represents the unknown value.</p>Code Examples
A short inline quotation using <q>, with the browser automatically adding surrounding quotation marks. Expected result: Renders as: As the saying goes, “practice makes perfect.”
Common mistake: Writing <q>"practice makes perfect."</q> with manually typed quotation marks would produce doubled quote marks, since the browser adds its own.
A block-level quotation with a cite attribute pointing to its source, followed by a separate visible attribution using <cite> to name the referenced work.
The cite attribute (a URL) is invisible metadata; the visible attribution below the quote is added separately using <cite> for the title of the speech.
Inline <code> references a function name mid-sentence, a <pre><code> block displays the full multi-line function definition with formatting preserved, and <samp> shows sample console output. Nesting <code> inside <pre> is the standard, widely recommended pattern for multi-line code blocks: <pre> handles whitespace preservation, <code> handles the semantic 'this is code' meaning.
Note the indentation and line breaks inside <pre><code> are preserved exactly — without <pre>, the browser would collapse them onto a single line.
A realistic developer documentation page combining nearly every element from this lesson: <kbd> for keyboard shortcuts, inline <code> for commands, a <pre><code> block for multi-line output, <samp> for an error message a program produced, and <var> for a placeholder value the reader is meant to substitute. Real documentation sites (like MDN) rely heavily on exactly this pattern — it's not just a textbook example, it's how technical writing is structured in practice.
<p>As the saying goes, <q>practice makes perfect.</q></p><blockquote cite="https://example.com/speech">
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<p>— <cite>Stanford Commencement Address</cite></p><p>Call the <code>fetchData()</code> function to load results.</p>
<pre><code>function fetchData(url) {
return fetch(url).then(response => response.json());
}</code></pre>
<p>After running it, the console shows: <samp>Loaded 42 records</samp></p><h2>Keyboard Shortcuts</h2>
<p>To copy selected text, press <kbd>Ctrl</kbd> + <kbd>C</kbd>. To paste it, press <kbd>Ctrl</kbd> + <kbd>V</kbd>.</p>
<h2>Troubleshooting</h2>
<p>
If the installer fails, run <code>npm install</code> again. You should see:
</p>
<pre><code>added 214 packages in 3s</code></pre>
<p>
If instead you see <samp>Error: EACCES permission denied</samp>, try
running the command with elevated permissions.
</p>
<p>
In the configuration file, replace <var>PORT_NUMBER</var> with your
desired port, such as <code>3000</code>.
</p>Choosing the Right Text Element
Match the content's real-world role to the element — not its visual appearance.
Short quote mid-sentence? -> <q>
Longer quoted passage, own block? -> <blockquote>
Title of a book/film/song? -> <cite>
Short code reference inline? -> <code>
Multi-line code block, formatted? -> <pre><code>...</code></pre>
Key the user should press? -> <kbd>
Text a program printed out? -> <samp>
A placeholder/variable name? -> <var>Important Rules
Use <blockquote> for longer, block-level quotations and <q> for short, inline ones — don't manually type quotation marks around <q> content.
Reserve <cite> for the title of a work, not the name of a person.
Use <pre> whenever whitespace, indentation, or line breaks in the content must be preserved exactly.
Nest <code> inside <pre> for multi-line code blocks to combine formatting preservation with semantic meaning.
Use <kbd> for keys the user should press, <samp> for text a program output, and <var> for variable or placeholder names.
Documentation Sites in Practice
Sites like MDN Web Docs, Stack Overflow, and most software documentation rely heavily on this exact set of elements: <code> for inline API references, <pre><code> blocks for full code samples (often further enhanced with syntax-highlighting JavaScript libraries), and <kbd> for keyboard shortcut instructions. Learning these elements isn't just an academic exercise — it's directly transferable to reading and writing real technical documentation.
<p>She said, <q>“we'll ship it Friday.”</q></p> <p>She said, <q>we'll ship it Friday.</q></p>
Adding manual quotation marks inside <q> produces doubled quotes, since browsers already insert them automatically around <q> content.
<p>According to <cite>Jane Smith</cite>, the results were conclusive.</p>
<p>According to Jane Smith, in her paper <cite>Climate Patterns of the Pacific</cite>, the results were conclusive.</p>
<cite> is meant for the title of a work, not a person's name — the person's name should appear as plain text, with <cite> wrapping the title of the paper, book, or article being referenced.
[Predict the Output] What will a browser display for the following markup? <p>He replied, <q>"I'll be there soon."</q></p> A. He replied, I'll be there soon. (quotation marks are ignored entirely) B. He replied, ““I'll be there soon.”” (doubled quotation marks, because <q> adds its own on top of the typed ones) C. He replied, “I'll be there soon.” (quotation marks appear once, exactly as intended) D. The browser will throw an error because <q> cannot contain quotation mark characters
B. He replied, ““I'll be there soon.”” (doubled quotation marks, because <q> adds its own on top of the typed ones) — <q> automatically inserts quotation marks around its content. Since the author also typed literal quotation marks inside the tag, the result is doubled marks — a common mistake. The fix is to remove the manually typed quotes and let <q> handle them.
Write a short troubleshooting tip: tell the reader to press a keyboard shortcut to open developer tools, show a one-line code snippet they should type into the console, and show the sample output they should expect to see.
<p>Press <kbd>F12</kbd> to open developer tools, then type <code>console.log("test")</code> and press Enter. You should see: <samp>test</samp></p>
Use <kbd> for the shortcut, inline <code> or a <pre><code> block for what they type, and <samp> for the output.