Overview of This Lesson

In this lesson we explore some of the elements that are used to display quoted material, code segments with inputs and outputs, and mathematical formula. It's a bit of a catch-all for a few very specific tasks. If you're not going to be working on pages or applications with some or any of these things, feel free to skip this lesson. Or read it over and file the information away for future reference.

Pre-Requisites

Before doing this lesson, make sure you know the basics of HTML, how to use character entities, and the various elements for grouping content and text-level semantics.

Elements for Displaying Quotes

You might be curious about why this is a topic at all, and why there are actually several elements for displaying quotes in a web document. For some types of web sites, displaying quotes is quite common! Many web documents are informational: articles; essays and opinion pieces; reviews of media such as books, movies or games; scholarly papers or educational tutorials. These examples, and likely several others I've forgotten to mention, will inevitably need to include quotes or samples of other related works. These can be displayed using the elements for displaying quotes.

The elements we're going to discuss are the <blockquote> element (which was briefly mentioned in Elements for Grouping Content), and the <cite> and <q> elements (both of which were briefly mentioned in Text-level Semantics).

The <blockquote> Element

The name of the <blockquote> element is short for block quotation and it's used to contain a long quotation, usually one that is several sentences or takes up multiple lines. By default, the content of a BLOCKQUOTE element is rendered in most browsers with indentation and margins, but this can be changed with CSS.

You would typically use a BLOCKQUOTE element for a large quotation but you could use it for a smaller quotation if you wanted the appearance of a block quotation. Any time you want to quote from any other source, and you want it to stand out on the page, it's easiest to use the BLOCKQUOTE element. This matches the standards/styles for proper citation of quoted works: the quoted text must be inside quotation marks or clearly formatted as a block. For example:

<blockquote>A day may come when the courage of 
  men fails, when we forsake our friends and break all bonds of fellowship,
  but it is not this day. A hour of wolves and shattered shields, when 
  the age of men comes crashing down, but it is not this day!
  <br>--Aragorn (played by Viggo Mortensen) during the final battle of The Return of
  the King (2003) at the Gates of Mordor
</blockquote>

The above code will appear as:

A day may come when the courage of men fails, when we forsake our friends and break all bonds of fellowship, but it is not this day. A hour of wolves and shattered shields, when the age of men comes crashing down, but it is not this day!
--Aragorn (played by Viggo Mortensen) during the final battle of The Return of the King (2003) at the Gates of Mordor

Of course, once you learn CSS, you can format it:

A day may come when the courage of men fails, when we forsake our friends and break all bonds of fellowship, but it is not this day. A hour of wolves and shattered shields, when the age of men comes crashing down, but it is not this day!
--Aragorn (played by Viggo Mortensen) during the final battle of The Return of the King (2003) at the Gates of Mordor

The <blockquote> element's cite attribute is used to specify a URL for the source of the quotation, or to a site that provides information, context, or an explanation of the quotation. This attribute is optional: if there is no specific URL, you don't need the cite, but in that case you should use the <cite> element, which we'll learn about in a moment. For example:

<blockquote cite="https://en.wikipedia.org/wiki/Franz_Kafka%27s_Diaries">A 
  heavy downpour. Stand and face the rain, let its iron rays pierce you; drift with 
  the water that wants to sweep you away but yet stand fast, and upright in this way 
  abide the sudden and endless shining of the sun. --Franz Kafka, Franz Kafka's Diaries, 1910-1923
</blockquote>

The above code will appear as:

A heavy downpour. Stand and face the rain, let its iron rays pierce you; drift with the water that wants to sweep you away but yet stand fast, and upright in this way abide the sudden and endless shining of the sun. --Franz Kafka, Franz Kafka's Diaries, 1910-1923

You don't see the URL from the cite attribute on the page: it's used primarily by browsers and by scripts. To actually cite a quotation according to the various standards/styles (e.g. APA, MLA, Chicago, etc) you can use the <cite> element.

The <cite> Element

The CITE element is an in-line element, so you will need to put it inside any block element. For example, if you're already using a BLOCKQUOTE, you can nest the <cite> element inside the <blockquote> element:

<blockquote cite="https://www.imdb.com/title/tt0708727/characters/nm0000653">
  I would gladly risk feeling bad at times if it also meant that I could taste 
  my dessert.
  <cite>Data, Star Trek: The Next Generation, Hero Worship (1992)</cite>
</blockquote>

The above example appears as:

I would gladly risk feeling bad at times if it also meant that I could taste my dessert. Data, Star Trek: The Next Generation, Hero Worship (1992)

Shorter, Inline Quotes

The previous example was a shorter quote, and that's fine. But if you don't want to have all the formatting of a block quotation with a shorter quote, you can display your quote in-line using the <q> or quote element. Remember that in-line elements go with the document flow, so you'll want to make sure that the <q> element and surrounding content are already inside a block element. For example:

One of my favourite quotes from Star Trek is from the character Captain Jean-Luc Picard: There is a way out of every box, a solution to every puzzle; it’s just a matter of finding it.

The above example was created with the following code:

<p>One of my favourite quotes from Star 
  Trek is from the character Captain Jean-Luc Picard: <q>There is a way out 
  of every box, a solution to every puzzle; it’s just a matter of finding it.</q>
</p>

Notice that I didn't put quotes around the actual quote text: most modern browsers add the quotes automatically.

You can also use the cite attribute with the <q> element to specify a URL, just as you would with the BLOCKQUOTE element.

I've added some more examples of the various quotation elements in the following CodePen:

See the Pen HTML: Quotations by Wendi Jollymore (@ProfWendi) on CodePen.

Elements for Displaying Code

This part of the lesson is for very specific tasks: displaying code, sample outputs, sample inputs, and mathematical formulas. If you plan on writing about things like how to use a tool or or application, help documents for users or technical tutorials, you'll find the elements in this section very useful.

The elements covered in this section include the <pre>, <code>, <samp>, <kbd>, and <var>.

Displaying Code

If you're going to be writing techical documents or tutorials, you're likely going to need to display code segments and sample/suggested outputs of those code segments. This can be done using the semantic element <code> and non-semantic element <pre>.

The <code> is an in-line semantic element whose content contains computer language code. It can be any kind of computer language, including HTML, CSS, SQL, scripting languages, programming languages, operating system code or command sequences, machine code, assembly code, etc. Honestly, any kind of computer or technical code can go inside the CODE element. Since the element is semantic, the only limitation is that it must be some kind of computer code, otherwise a user with a screen reader will be confused. In face, whenever you see any reference to HTML elements or attributes in these lessons, they're enclosed within the <code> element! For example, recall this passage from the previous section:

<p>The &lt;blockquote&gt; element's <code>cite</code> 
  attribute is used to specify a URL for the source of the quotation, or to a site that provides
  information, context, or an explanation of the quotation. This attribute is optional: if there
  is no specific URL, you don't need the <code>cite</code>, but in that case you should use the
  <code>&lt;cite&gt;</code> element, which we'll learn about in a moment. For example:
</p>
An example that uses the <code> element

Note also that the contents of the CODE element will display in the browser's default mono-spaced font, by default. You can also change the appearance using CSS.

Note that the <code> element is inline, so it's useful for displaying small commands or a few words of code. But what if you want to display an entire block of code - perhaps an entire program, or a segment of code? Later, we'll learn the <pre> element, which is used in conjunction with the <code> element to display larger blocks of code.

The <pre> element is used to contain pre-formatted text: it will maintain any line breaks and spacing that are normally not rendered by the browser. For example, I could use PRE to display some text like this:

This is a line with some text on it and I'm trying to make it a bit longer.
                    This is another line, but I pressed spacebar 10 times first.

I pressed Enter twice before I typed this line

The actual HTML code I used to produce that output is:

<pre>This is a line with some text on it and I'm trying to make it a bit longer.
          This is another line, but I pressed spacebar 10 times first.

I pressed Enter twice before I typed this line</pre>
Code to produce the sample pre-formatted text.

If you'd like to play with this example, here it is in a CodePen:

See the Pen PRE and CODE Elements by Wendi Jollymore (@ProfWendi) on CodePen.

Notice that it displays its content using a mono-spaced font. The PRE element also maintains all of my spacing: when I typed 10 spaces, it displayed 10 spaces, and when I pressed enter, it added a line break each time. This is not normally how the browser interprets whitepsace. Whitespace characters include the space (space bar), tab, and new-line (what you get when you press the ENTER key). The browser interprets any sequence of whitepace characters as a single space. To see what I mean, here's what the output looks like without the PRE element:

This is a line with some text on it and I'm trying to make it a bit longer. This is another line, but I pressed spacebar 10 times first. I pressed Enter twice before I typed this line

Notice that each space or group of spaces, each new-line or group of new-lines, was interpreted as a single space! This is not a problem: this is how HTML works! In other tutorials you'll learn the best ways to display text content and maintain whitespace and other formatting.

When displaying a block of code, you will want to maintain all the spacing and formatting, so you can use the <pre> element. However, the <pre> element is not semantic, so it doesn't necessarily always contain code: it could contain any kind of text that needs to maintain its formatting, such as a poem or an address. So if you want to use the PRE element to display a block of code, you should nest the CODE element inside it so that a screen reader knows this pre-formatted text is also computer code. For example:

<pre><code><!-- the minimal HTML for all documents -->
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
        
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;a page title&lt;/title&gt;
  &lt;/head&gt;
        
  &lt;body&gt;
        
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
How to properly use <pre> with <code> for displaying computer code

If you right-click that code above and view the source, you'll see that I'm actually using the PRE and CODE elements to display the code that demontrates the PRE and CODE elements. You should also remember that when you want to display HTML code in your document, you will need to escape the <, >, and & symbols.

Remember that the <code> element is an inline element and doesn't maintain spacing like the <pre> element does. Here's the same example as above but displayed using the <code> element, instead:

This is a line with some text on it and I'm trying to make it a bit longer. This is another line, but I pressed spacebar 10 times first. I pressed Enter twice before I typed this line
<code>This is a line with some text on it and I'm trying to make it a bit longer.
          This is another line, but I pressed spacebar 10 times first.
                                      
I pressed Enter twice before I typed this line</code>

Notice we see all the text in a mono-spaced font, but each group of whitespace characters is parsed or interpreted by the browser as a single space.

However, the most important difference between PRE and CODE is that the CODE element is a semantic element: it's meant to contain some kind of computer code. Unlike the CODE element, The PRE element has no hints about what kind of content it might contain. The PRE element doesn't have to contain code: it can contain anything that needs to be displayed in a mono-spaced font while keeping the formatting of the original text.

Displaying Output

Of course, if your document is displaying any kind of code, there's a good chance it will also display actual or suggested/example output. With many languages, you'll want that output to be displayed in a mono-spaced font, but also identify it as sample output as opposed to code or other text in a mono-spaced font.

The <samp> element is used for displaying sample output or even actual output from a program or code segment. For example:

Your first JavaScript program:

document.addEventListener("DOMContentLoaded", init);
function init() {
    console.log("Hello, World!");
}

After loading the page, open the browser console and you will see the output:
> Hello, World!
>

<p>Your first JavaScript program:</p>
<pre><code>document.addEventListener("DOMContentLoaded", init);
  function init() {
    console.log("Hello, World!");
  }</code></pre>
<p>After loading the page, open the browser console and you will see the output:<br>
<samp>> Hello, World!<br>
> </samp></p>
An example that uses the <samp> element.

Notice that in the example, I had to use the line break <br> element to show my sample output on 2 lines: the <samp> element is an in-line element so, as with the <code> element, you'll have to add line breaks if you want to display multiple lines. Of course, as with the <code> element, you can always nest the <samp> element inside the <pre> element to easily display multiple lines and still maintain the spacing!

Displaying Inputs

If we're going to be displaying outputs, you're likely also going to need to display inputs. For example, you might be showing a segment of code that you want your user to try, along with some sample inputs they can try it with, and the possible outputs that should appear when the code is executed.

We can use the semantic, inline element <kbd>, or the keyboard element, to display inputs from a keyboard, audio device, or any other input device that allows a user to input text. This would not include inputs from devices like a mouse or other pointing device, it should only be used for inputs that are text values or keyboard keys. For example:

Run your program using Ctrl + R and when prompted, enter the username admin and the admin password you set up earlier.

<p>Run your program using <kbd>Ctrl</kbd> + <kbd>R</kbd>
  and when prompted, enter the username <kbd>admin</kbd>
  and the admin password you set up earlier.</p>
            

By default, the content of the <kbd> element is displayed in a mono-spaced font, but once you learn CSS, you can style the element yourself. I've done this in the example you'll see below.

If your keyboard input consists of a series of keystrokes or key presses, you might need to nest your KBD elements. For example:

Run your program using Ctrl + R and when prompted, enter the username admin and the admin password you set up earlier.

<p>Run your program using <kbd><kbd>Ctrl</kbd> + <kbd>R</kbd></kbd>
                and when prompted, enter the username <kbd>admin</kbd>
                and the admin password you set up earlier.</p>
                          

In the above example, we used <kbd><kbd>Ctrl</kbd> + <kbd>R</kbd></kbd>

Here, we have one KBD element that contains the entire keystroke sequence. Each key press inside the sequence is nested inside its own KDB element. This is a common way to code longer or more complex input that involves several keystrokes or key presses so that they're more easily understood by users with screen readers. But also, this will allow you a bit more flexibility over formatting with CSS.

Here are a couple of examples using the KBD element:

See the Pen Using the <kbd> Element by Wendi Jollymore (@ProfWendi) on CodePen.

If you read the documentation for the <kbd> element, you'll see that there are also some other use-cases that include the <samp> element.

Displaying Mathematical Formulas

When displaying mathematical formulas in a document, it's common to display the variables of the formula in a different font. The <var> element allows you to do this, and of course, once you learn CSS, you can have a lot of control over what the <var> content looks like in the browser. By default, it's usually italic, but some browsers display it bold or mono-spaced fonts. If you want cross-browser consistency, you'll definitely want to format it with CSS.

For example, in my Java courses, I sometimes give an assignment that involves calculating the slope of a line and displaying line's equation:

Given points (x1, y1) and (x2, y2), the slope is calculated as:
y2 - y1
-------
x2 - x1

Display the equation of the line in the form y = mx + b using one of your points, where
y is the y-coordinate
m is the slope
x is the x-coordinate
b is the y-axis intercept

<p>Given points (<var>x1</var>, <var>y1</var>) and (<var>x2</var>, <var>y2</var>),
  the slope is calculated as:<br>
  <var>y2</var> - <var>y1</var><br>
  -------<br>
  <var>x2</var> - <var>x1</var>
 </p>

 <p>Display the equation of the line in the form
  <var>y</var> = <var>m</var><var>x</var> + <var>b</var> using one of your points, where<br>
  <var>y</var> is the y-coordinate<br>
  <var>m</var> is the slope<br>
  <var>x</var> is the x-coordinate<br>
  <var>b</var> is the y-axis intercept
</p>
An example using the <var> element

Note that for the "mx" part of y = mx + b, I used two <var> elements: one for the "m" and one for the "x". "m" and "x" are two different variables in the equation, so they would each require their own VAR element. It would semantically be incorrect to say <var>mx</var>

In the CodePen below, I've used the same example with some added CSS formatting, so you can see what you can do once you learn how to style with CSS.

See the Pen Using the <var> Element by Wendi Jollymore (@ProfWendi) on CodePen.