---
title: 'Text Tags'
source: 'https://academia.sh/en/courses/web-fundamentals-and-html/text-tags'
course: 'Web Fundamentals and HTML'
language: en
updated: '2026-08-17T18:09:31+00:00'
license: 'CC BY-SA 4.0'
---
# Text Tags
Marking emphasis, quotation, abbreviation, definition, and code; whitespace collapsing and line-break behavior's dependence on the source text.
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:
```html
This station is at 1840 meters.
This station is at 1840 meters.
```
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.
```html
The installation report states that the slope's north face
was selected.
The slope's north face, receiving no direct light throughout the day, gives less
deviation in temperature measurement.
```
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.
```html
EASL is a point's vertical
distance relative to mean sea level. The North Slope station's EASL value is 1840 meters.
```
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.
```html
The download.sh script writes the message interrupted: partial
file deleted when stopped with Ctrl + C.
```
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.
```js
// 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("south\nnorth")));
console.log("adjacent :", JSON.stringify(textContent("southnorth")));
```
```
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`.
```html
```
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.