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.
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 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:
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 <blockquote> 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><cite></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:
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 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a page title</title>
</head>
<body>
</body>
</html></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:
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.