Text Tags

Headings named the sections; this lesson marks up the text that fills them. Paragraph text looks structureless at first glance, but there is information inside it waiting to be declared: why a word stands out, what an abbreviation stands for, where a quotation comes from.

This lesson also shows a transformation the parser applies to text. Whitespace and line breaks in the source text do not carry over to the document as they are.

Paragraph

The p element declares a paragraph. It cannot contain another paragraph, a list, or a heading; as seen in the Document Object Model lesson, an open paragraph closes on its own when such an element is opened.

The space between paragraphs is the presentation layer’s decision. Writing empty paragraphs to separate text adds meaningless nodes to the outline and can be announced as an empty paragraph by a screen reader.

Emphasis and Importance

Four elements are often confused because their default appearances are the same, two by two.

Element	What it declares
em	The sentence’s emphasis is on this word
strong	The content is important, serious, or urgent
i	The text carries a quality set apart from the flow (a foreign word, a term, a thought)
b	The text should draw attention, without adding meaning

The difference between em and i shows up in how it is read aloud. em is emphasis that changes the sentence’s meaning:

<p><em>This</em> station is at 1840 meters.</p>
<p>This station is at <em>1840</em> meters.</p>

The two sentences carry the same words and say different things; the first foregrounds which station is being talked about, the second foregrounds the elevation’s value. Screen readers can voice this distinction.

strong, by contrast, declares importance, not emphasis; it does not change how something is read aloud, it declares the content’s weight. Used nested, the degree of importance increases.

The i and b elements carry no meaning. Marking a Latin species name with i or a product code with b is valid; these elements are not “write in italics” and “write in bold” commands, they are “there is something different here” declarations. If only appearance is wanted, the right place is the presentation layer.

Quotations

There are two elements, and the distinction is not length, it is whether the quote sits within the flow.

q is a quotation appearing inside a sentence. blockquote is a quotation block that stands on its own. Both can carry the source’s address with the cite attribute.

<p>The installation report states that <q cite="/report/2019">the slope's north face
   was selected</q>.</p>

<blockquote cite="/report/2019">
  <p>The slope's north face, receiving no direct light throughout the day, gives less
     deviation in temperature measurement.</p>
  <footer>Installation Report, <cite>Measurement Network Technical Notes</cite></footer>
</blockquote>

The cite attribute carries the source’s address and is invisible in most browsers. The cite element, by contrast, marks a work’s name — a book, a report, an article. The two are separate things, and the cite element is not used to mark a person’s name; it marks a work’s name.

Abbreviation and Definition

abbr marks an abbreviation and carries its expansion with the title attribute. dfn marks the place a term is defined — not every place the term appears.

<p><dfn><abbr title="elevation above sea level">EASL</abbr></dfn> is a point's vertical
   distance relative to mean sea level. The North Slope station's <abbr title="elevation
   above sea level">EASL</abbr> value is 1840 meters.</p>

The title attribute’s content is accessible only when the mouse pointer is hovered over it; access by keyboard or touchscreen is not reliable. For this reason the expansion is also written at least once in the document as open text — the definition sentence above does this job.

Code, Input, and Variable

Four elements are for technical text and are shown by default in a monospace font: code marks a code fragment, kbd the keys the user presses, samp a program’s output, var a variable’s name.

<p>The <code>download.sh</code> script writes the message <samp>interrupted: partial
   file deleted</samp> when stopped with <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

The value of this distinction is in search and conversion: extracting every command example in a document is done with a single query if code elements are marked.

Whitespace Is Collapsed

Whitespace sequences in the source text do not carry over to the document as they are. Space, tab, and line-break sequences collapse to a single space; whitespace at the start and end of a section is dropped.

// whitespace.mjs — model of the whitespace-collapsing rule
function collapse(text) {
  return text.replace(/[ \t\n\r]+/g, " ").replace(/^ | $/g, "");
}

const source = "Measurement       interval\n        is ten minutes.\n\n    Recording time is UTC.";
console.log("source (chars)   :", source.length);
console.log(JSON.stringify(source));
console.log("--- after collapsing ---");
const result = collapse(source);
console.log("result (chars)   :", result.length);
console.log(JSON.stringify(result));

console.log("--- non-breaking space does not collapse ---");
const regularSpaces = "18" + "   " + "degrees";                  // three regular spaces
const nonBreaking = "18" + "   " + "degrees"; // three times  
console.log("regular :", collapse(regularSpaces).length, "chars");
console.log("nonbreak:", collapse(nonBreaking).length, "chars");

console.log("--- tag spacing across consecutive lines ---");
const textContent = (d) => collapse(d.replace(/<[^>]+>/g, ""));
console.log("line break :", JSON.stringify(textContent("<em>south</em>\n<em>north</em>")));
console.log("adjacent   :", JSON.stringify(textContent("<em>south</em><em>north</em>")));

source (chars)   : 78
"Measurement       interval\n        is ten minutes.\n\n    Recording time is UTC."
--- after collapsing ---
result (chars)   : 59
"Measurement interval is ten minutes. Recording time is UTC."
--- non-breaking space does not collapse ---
regular : 10 chars
nonbreak: 12 chars
--- tag spacing across consecutive lines ---
line break : "south north"
adjacent   : "southnorth"

The rule has three consequences. First, the source text can be freely indented and split across lines for readability; the text that carries over to the document does not change. Second, the non-breaking space written with the   character reference does not undergo this collapsing; it is used when two words must not be allowed to separate. Using it in place of an ordinary space causes the text not to be found in search results. Third, as the last two lines show, writing two elements on separate lines puts a space between them; writing them side by side does not. The source text’s formatting can change the visible result.

Line Break and Preformatted Text

The collapsing rule has two exceptions.

The br void element forces a line break. It is used only where the line break is part of the content — an address, a poem, discrete short lines. It is not used to separate paragraphs.

Inside the pre element, whitespace and line breaks in the text are preserved. Code listings and aligned output are placed in this element; in technical documents, pre is used together with code.

<pre><code>time,temperature,humidity
07:00,-4.2,72
07:10,-4.1,71</code></pre>

The line break right after the opening tag is discarded by the parser; the one before the closing tag is not. This is why the closing tag is written flush against the last line in the example above.

Summary

• em declares the sentence’s emphasis, strong the content’s importance; i and b show the text carries a separate quality, without adding meaning.
• q is a quotation within the flow, blockquote a quotation standing on its own; the cite attribute carries the source’s address, the cite element a work’s name.
• abbr carries an abbreviation’s expansion with title; because access to this content is not reliable, the expansion is also written at least once in the document as open text.
• Whitespace sequences collapse to a single space and whitespace at the edges is dropped; the non-breaking space does not undergo this collapsing.
• Writing two elements on separate lines puts a space between them; the source text’s formatting can affect the visible result.
• br is used only where the line break is part of the content; whitespace and line breaks are preserved inside pre.

Next Step

Inline markup structured the inside of the paragraph. Some content, though, is not a paragraph: ordered steps, items of equal standing, term–description pairs. Writing these as paragraphs destroys structural information. The next lesson takes up list elements and shows ordered lists’ numbering rule, along with the attributes that decide where the numbering starts.