What's New Tutorial Index References RSS Feed Contact

Advanced Text Formatting

Headings, paragraphs, and lists can do a lot, but not everything. Sooner or later, you'll want to get a bit fancier with your text, whether that be by quoting something, adding code samples, defining terminology, or simply hiding text in the page source.

Seeing as HTML's original use was for annotating scientific documents, the spec includes a variety of advanced text formatting elements explicitly for these purposes. Not only are they useful from a semantic standpoint, but when paired with CSS, they can add visual appeal and clarity to an otherwise monotonous page.

(It's worth noting that mini.css, Tesserae's main stylesheet, has styled many of these elements already. As a result, unless you're also using it, what you see in our examples won't look exactly the same as what you'll get on your page. I've included written descriptions for what these generally look like out of the box. Remember that using CSS will allow you to make these elements look exactly how you'd like them to.)

Quotes (q and blockquote)

If you're writing a lot, it's inevitable that you'll eventually want to quote a chunk of another text for context or commentary. For inline quotes, maybe a sentence or a certain phrase, the q element should be used.

<p>According to RFC2324, <q>Future versions of this protocol may include extensions for espresso machines and similar devices.</q></p>

According to RFC2324, Future versions of this protocol may include extensions for espresso machines and similar devices.

HTML also provides the blockquote element for larger passages of text that should appear on their own. Paragraphs, lists, images, even additional inline quotes can all go in a blockquote. By default, blockquote visually indents its contents one tab space to the right.

<blockquote cite="https://tools.ietf.org/html/rfc2324">
	<p>This document specifies a Hyper Text Coffee Pot Control Protocol (HTCPCP), which permits the full request and responses necessary to control all devices capable of making the popular caffeinated hot beverages.</p>
	<p>HTTP 1.1 ([RFC2068]) permits the transfer of web objects from origin servers to clients. The web is world-wide. HTCPCP is based on HTTP. This is because HTTP is everywhere. It could not be so pervasive without being good. Therefore, HTTP is good. If you want good coffee, HTCPCP needs to be good. To make HTCPCP good, it is good to base HTCPCP on HTTP.</p>
	<p>Future versions of this protocol may include extensions for espresso machines and similar devices.</p>
	<p><strong>&mdash; <a href="https://tools.ietf.org/html/rfc2324">RFC2324</a>, an IETF memo describing the HTCPCP</strong></p>
</blockquote>

This document specifies a Hyper Text Coffee Pot Control Protocol (HTCPCP), which permits the full request and responses necessary to control all devices capable of making the popular caffeinated hot beverages.

HTTP 1.1 ([RFC2068]) permits the transfer of web objects from origin servers to clients. The web is world-wide. HTCPCP is based on HTTP. This is because HTTP is everywhere. It could not be so pervasive without being good. Therefore, HTTP is good. If you want good coffee, HTCPCP needs to be good. To make HTCPCP good, it is good to base HTCPCP on HTTP.

Future versions of this protocol may include extensions for espresso machines and similar devices.

RFC2324, an IETF memo describing the HTCPCP

blockquote also takes the optional cite attribute, which is used for semantically linking to the original source.

Code samples (pre and code)

In many programming languages and plain text documents, spacing, indentation, and whitespace are key. Browsers strip out extraneous whitespace from the page on render, which can ruin the look of code samples and plain text that's been formatted using tabs and spaces. With the pre element, for "preformatted" text, the whitespace between its closing tags are preserved.

By default, preformatted text often displays in a monospaced font, owing to its general use for code.

<pre>if tls:
    print('S/Gopher server is now running on', host + ':' + str(port) + '.')
else:
    print('Gopher server is now running on', host + ':' + str(port) + '.')</pre>
if tls:
    print('S/Gopher server is now running on', host + ':' + str(port) + '.')
else:
    print('Gopher server is now running on', host + ':' + str(port) + '.')

For lines of code being referenced inline, you can use the code element instead. It's important to note that code does not preserve whitespace like pre does; like most other elements, code will strip extraneous whitespace when rendered.

Description lists (dl, dt, and dd)

If you find yourself defining a lot of terms or explaining a lot of links, a glossary might be in order. In HTML, glossaries are represented by description lists, or the dl element. Like normal lists, description lists are one element with many children, only instead of li, description lists use dt and dd. dt elements are for terms, and dd elements are for their details, or definitions.

Visually, by default, description detail elements are indented one tab space to the right.

<dl>
	<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre">Mozilla Web Docs: The Preformatted Text element</a></dt>
	<dd>Mozilla's page on preformatted text using the <code>pre</code> element, as well as accessibility concerns to take into account when using it.</dd>
	<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl">Mozilla Web Docs: The Description List element</a></dt>
	<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Comment">Mozilla Web Docs: Comments</a></dt>
	<dd>A more in-depth page from Mozilla on how comments work in the context of the page DOM.</dd>
	<dd>The "DOM", or <strong>document object model</strong>, is a way of representing the structure a web page so that programming languages and scripts can manipulate it.</dd>
</dl>
Mozilla Web Docs: The Preformatted Text element
Mozilla's page on preformatted text using the pre element, as well as accessibility concerns to take into account when using it.
Mozilla Web Docs: The Description List element
Mozilla Web Docs: Comments
A more in-depth page from Mozilla on how comments work in the context of the page DOM.
The "DOM", or document object model, is a way of representing the structure a web page so that programming languages and scripts can manipulate it.

While description lists often have one dt paired with one dd each, this isn't required; you can have terms with no details and terms with multiple detail elements. All are valid.

I consider description lists to be the "forgotten element" of sorts. While generally good for glossaries, they're also incredibly useful for lists of links that need extra description or commentary appended to each one.

Comments (<!--hidden text...-->)

If you want to leave notes in your markup, HTML's comments are built for it. Comments are curious because they don't visually appear anywhere on the page, only in the page source.

<!--Seriously, paste this into your page. It won't appear.-->

Unlike normal HTML elements, comments have an opening tag of <!-- and a closing tag of -->.

So what's the point of having text that won't appear? Comments are useful in a number of cases, the first being simple explanation of what your markup is doing. If you have an incredibly cumbersome nest of non-semantic elements, a comment can help you clear up what you're looking at, even to yourself:

<table class="full_width">
<!-- Somnolian buttons -->
	<tr class="dark_row">
		<td class="item_header noborder">Community</td>
	</tr>
	<tr>
		<td class="noborder"><small>check out these sites too:</small>
		<img src="buttons/mariteaux.gif" alt="mariteaux" title="<3">mariteaux
		<img src="buttons/dcb.png" alt="dotcomboom" title="ssssss">dotcomboom
		<img src="buttons/borb.png" alt="carrot" title="*screams*">carrot</td>
	</tr>
</table>

Comments are also useful if you have a section of your page that's either obsolete or nonfunctional at the moment, but will be in the future. Instead of simply deleting the code, you can use a comment to hide the markup from being rendered (because elements inside a comment still won't appear) and to explain why it's hidden.

<!-- District not yet implemented
	<a href="../../../hollywood/" class="card" id="hollywood">
	<h2>Hollywood</h2>
	<p class="subtext">Cartoons, movies, and western media</p>
</a> -->

If you're into hiding things, though, comments are excellent for it. As comments will take any bit of text, you can use them to provide running commentary on parts of a page, hiding thoughts and feelings on your work, providing links to otherwise hidden pages, or anything else you can think of that you'd like to hide away from casual eyes.

<!--Hi, more commentary time!-->
<!--I started these all the way back in March, or...maybe it was April. Don't quite remember. The idea was to give each of the main characters at least one piece of writing in their library on toyhou.se, just a short little thing that establishes their character on their own, little-to-no dialogue, over the span of a day, starting in the morning with Kevin's and ending late at night with Seb's. And then I got stuck and stopped working on anything for a month.-->
<!--Only today have I been able to finish these off and get them posted. I'm not thinking about them any more than I need to. They're simple little things. I'll try to annotate some of the ones I have more to say on.-->
<h2 id="kevin">Kevin</h2>
<p>Kevin stirred. His leg twitched, and he rolled about happily in his sleep as the morning sun fell through the window and warmed the couch he slept on. It was one of those things he liked about Apricot Bay: sunlight. Lots of sunlight.</p>

Summary:

  1. Owing to its history as a scientific markup protocol, HTML features a variety of elements used for quotes, code samples, comments, and other "advanced" uses of text.
  2. For quoting sentences and phrases inline, the q element should be used, while on longer snippets of text with images or multiple paragraphs of text, the blockquote element is useful.
    • blockquote can take a single optional attribute, cite, for specifying the original source of the text.
  3. For code samples and snippets of text where whitespace (spaces and indentations) need to be preserved, use the pre (or "preformatted") element.
  4. If you need to refer to a line of code or a variable inline, the code element does the trick.
    • Please note that code does not preserve whitespace.
  5. Description lists are excellent for lists of terms or links that need a bit of explanation or definition to go along with them.
    • Description lists are started like normal lists, but use dt (description term) and dd (description details) elements instead of li.
    • By default, detail elements in the list are indented, while terms aren't.
  6. Comments simply do not get rendered with the rest of the page. They're only visible when you view the page source.
    • Comments are good for explaining a bit of markup, styling, or code with an unclear meaning.
    • Because elements inside comments don't get rendered either, you can use them to hide page elements that either don't work or haven't been fully implemented.
    • Or, if you're slightly more enterprising, you can hide running commentary, links to secret pages, manifestos, or any other text you can think of in the page source with a comment.

Further reading