Module 2: Text · Lesson 6 of 8
HTML blockquote, q, code and pre Tags Explained
All lessons in Module 2
Goal: Mark up quotes, code snippets and preformatted text.
Learn
HTML has special elements for words that are not your own and for computer text:
<blockquote>holds a longer quotation from someone else. Browsers indent it. Put the quoted paragraphs inside it.<code>marks a short piece of computer text inside a sentence, such as a file name or a command. Browsers use a monospace font, where every letter is the same width.<pre>means preformatted. It keeps every space and line break exactly as you typed them, because it switches off whitespace collapsing. Use it for longer code and text art.
For a short quote inside a sentence there is also <q>, an inline quotation element (opens in a new tab) that adds the quotation marks for you. Each of these tells readers and tools what kind of text they are looking at. How it looks comes second.
The short version
<blockquote>holds a longer quotation and contains its own paragraphs.<q>is a short quote inside a sentence and adds quotation marks.<code>marks computer text such as code, file names and commands, shown in a monospace font.<pre>keeps every space and line break exactly as typed.- For a block of code, combine them:
<pre><code>...</code></pre>.
Example
<blockquote>
<p>The best way to predict the future is to invent it.</p>
</blockquote>
<p>Open <code>index.html</code> in your editor.</p>
<pre>
*
***
*****
|
</pre>Your task
Polish this page of developer wisdom:
- Put the saying
First, solve the problem...inside a<blockquote>. - Wrap the file name
index.htmlin<code>. - At the end, add a
<pre>with at least two lines of text art, for example a box or a tiny house.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<blockquote>
<p>Our shop is open from 9 to 5.</p>
</blockquote>Right
<p>Our shop is open from 9 to 5.</p>blockquote means text quoted from another source. If all you want is an indent, use a CSS margin.
Wrong
<pre><code><p>Hello</p></code></pre>Right
<pre><code><p>Hello</p></code></pre>pre keeps spacing but still reads tags as tags, so code you want to show must use < and >.
Go deeper
Most documentation sites publish their code examples with the <pre><code> pair. It's the standard. Syntax highlighters (opens in a new tab) such as Prism and highlight.js look for it and add colors, usually guided by a class like class="language-html" on the code element.
Two details about pre catch people out. A single line break right after the opening <pre> tag is ignored, so you can start your text on the next line without an empty first line. Long lines inside pre never wrap, either, so they can stick out of narrow screens. The CSS rule pre{overflow:auto} adds a scrollbar instead.
Quotation marks from <q> follow the language in the lang attribute, so a German page gets German-style marks automatically.
HTML has a few more elements for computer text: <kbd> for keys the user presses, like Ctrl+S, <samp> for output from a program, and <var> for a variable name. The kbd reference page shows them side by side.
Inside pre, a tab may show up eight spaces wide. Indent with spaces and the result looks the same everywhere.
Frequently asked questions
What is the difference between blockquote and q in HTML?
<blockquote> is a block for a longer quotation, usually one or more paragraphs. Typographers call this a block quotation (opens in a new tab), and browsers indent it. <q> is inline. It sits inside a sentence for a short quote, and the browser adds quotation marks that suit the page language. Don't type your own quotation marks inside q, or they appear twice.
How do I cite the source of a quote in HTML?
Write the attribution outside the <blockquote>, for example in a paragraph right after it, because everything inside counts as the quote itself. Wrap the title of a book, film or article in <cite> (see the cite reference). You can also add a cite attribute with the source URL, like <blockquote cite="https://example.com">, but browsers do not display it.
What is the difference between code and pre in HTML?
<code> says what the text is: computer code. It is usually inline, inside a sentence, and collapses whitespace like normal text. <pre> says how to treat the text: keep every space and line break. For a multi-line code example you want both, nested as <pre><code>.