|$ curl https://forge-ai.dev/api/markdown?path=docs/html/text-formatting

$cat docs/html-text-formatting.md

updated This week·30 min read·published

HTML Text Formatting

◆HTML◆Text◆Beginner◆Beginner

Introduction

HTML provides a rich set of inline elements for marking up text with semantic meaning, visual styling, and structural significance. These elements convey emphasis, importance, technical terminology, quotations, and more — enabling both browsers and assistive technologies to interpret content correctly.

Text formatting elements fall into two categories: semantic elements that carry meaning (like for importance and for emphasis) and presentational elements that only affect appearance (like for bold and for italic). Modern HTML5 encourages semantic markup over purely presentational shortcuts.

ℹ

info

Semantic elements are preferred over presentational ones. Screen readers and search engines extract meaning from and , but ignore and . Use the right element for the right purpose — not just for visual effect.

Inline Elements

HTML defines over twenty inline text elements. Each serves a specific semantic or presentational purpose. Understanding when to use each one is essential for writing meaningful, accessible HTML.

Element	Semantic	Purpose	Typical Rendering
<strong>	Yes	Strong importance, seriousness, urgency	Bold
<em>	Yes	Stress emphasis, change in meaning	Italic
<b>	No	Stylistic offset (keywords, product names)	Bold
<i>	No	Alternative voice (foreign words, technical terms)	Italic
<u>	No	Unarticulated annotation (misspelling, proper names)	Underline
<s>	Yes	Content no longer accurate or relevant	Strikethrough
<mark>	Yes	Highlighted / marked text for reference	Yellow highlight
<small>	Yes	Side comments, fine print, disclaimers	Smaller text
<sub>	Yes	Subscript (chemical formulas, math)	Subscript
<sup>	Yes	Superscript (footnotes, exponents)	Superscript
<ins>	Yes	Inserted content (edits)	Underline (green)
<del>	Yes	Deleted content (edits)	Strikethrough (red)
<code>	Yes	Inline code / programming source	Monospace
<kbd>	Yes	Keyboard input	Monospace, often boxed
<samp>	Yes	Sample program output	Monospace
<var>	Yes	Variable name in math or code	Italic
<abbr>	Yes	Abbreviation / acronym	Dotted underline (with title)
<cite>	Yes	Title of a creative work	Italic
<q>	Yes	Inline quotation	Quotes added by browser
<dfn>	Yes	Defining instance of a term	Italic (with tooltip)
<time>	Yes	Machine-readable date/time	None (semantic only)
<span>	No	Generic inline container (no semantics)	None

inline-elements.html

HTML

1	<!-- All inline text formatting elements in use -->
2	<p>
3	<strong>Warning:</strong> This action is <em>irreversible</em>.
4	Please review the <b>terms and conditions</b> before proceeding.
5	The <i>Fremdkapital</i> provision applies to all subsidiaries.
6	Check for <u>misspelled</u> words before submission.
7	This offer <s>expired December 2025</s> is now closed.
8	</p>
9
10	<p>
11	<mark>Key finding:</mark> Revenue grew 23% quarter over quarter.
12	<small>* Preliminary figures subject to audit.</small>
13	Chemical formula: H<sub>2</sub>O, E = mc<sup>2</sup>.
14	</p>
15
16	<p>
17	<ins>New section added per audit feedback.</ins>
18	<del>Old terms and conditions have been removed.</del>
19	</p>
20
21	<p>
22	Use <code>console.log()</code> to debug.
23	Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
24	Sample output: <samp>Hello, World!</samp>
25	Where <var>x</var> equals the input value.
26	</p>

Live preview of all inline text formatting elements:

preview

🔥

pro tip

Use only when no semantic element fits. It has no meaning, so it contributes nothing to accessibility or SEO. Every other inline element on this page carries semantics that machines can interpret.

Emphasis vs. Styling

A common source of confusion is the difference between semantic emphasis and visual styling. HTML provides separate elements for each concern. The choice matters for accessibility, internationalization, and future-proofing.

You Want This	Use This (Semantic)	Avoid This (Presentational)	Why
Strong importance	<strong>	<b>	Screen readers emphasize <strong> with vocal stress
Stress emphasis	<em>	<i>	<em> changes sentence meaning; <i> does not
Deleted content	<del>	<s>	<del> represents an edit; <s> represents irrelevance
Inserted content	<ins>	<u>	<ins> tracks revisions; <u> is generic
Keyboard shortcut	<kbd>	<code>	<kbd> implies user input, not program output

emphasis-vs-styling.html

HTML

1	<!-- Semantic emphasis — use these -->
2	<p>
3	<strong>Please read the instructions</strong> before proceeding.
4	This is <em>not</em> a drill.
5	The meeting is <time datetime="2026-07-10T14:00">July 10 at 2 PM</time>.
6	</p>
7
8	<!-- Presentational styling — use CSS instead -->
9	<p>
10	This is <b>not</b> important, just visually bold.
11	The product name is <i>Synapse</i>, a foreign term.
12	The <u>word</u> is misspelled.
13	</p>
14
15	<!-- Content edits with dates -->
16	<p>
17	<del datetime="2026-07-01">The old policy was effective until June 2026.</del>
18	<ins datetime="2026-07-02">The new policy takes effect immediately.</ins>
19	</p>

✓

best practice

Default browser styles for and are identical to and , but the semantic difference is critical for screen readers, text-to-speech, and automated processing. Always choose the semantic element when the content's meaning warrants it.

Abbreviations

The <abbr> element marks up abbreviations and acronyms. The title attribute provides the full expansion, which appears as a tooltip on hover and is announced by screen readers. When the abbreviation is well-known (e.g., HTML, CSS), the title may be omitted.

abbreviations.html

HTML

1	<!-- Abbreviations with expansions -->
2	<p>
3	The <abbr title="World Health Organization">WHO</abbr>
4	published guidelines for <abbr title="HyperText Markup Language">HTML</abbr>
5	accessibility in collaboration with the
6	<abbr title="World Wide Web Consortium">W3C</abbr>.
7	</p>
8
9	<!-- Well-known abbreviations (title optional) -->
10	<p>
11	HTML5 supports semantic elements like
12	<abbr><abbr></abbr>,
13	<abbr><dfn></abbr>, and
14	<abbr><time></abbr>.
15	</p>
16
17	<!-- Using dfn for defining instances -->
18	<p>
19	<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
20	is a stylesheet language used to describe the presentation
21	of a document written in HTML.
22	</p>

ℹ

info

Use <dfn> to wrap the <abbr> when defining the term for the first time on the page. This creates a defining instance — assistive technologies can use this to build a glossary of terms.

Quotations

HTML provides two quotation elements: <q> for inline quotations and <blockquote> for block-level quotations. Both support the cite attribute to reference the source URL. Browsers automatically add quotation marks around <q> content.

quotations.html

HTML

1	<!-- Inline quotation -->
2	<p>
3	As Tim Berners-Lee once said,
4	<q cite="https://www.w3.org/People/Berners-Lee/">
5	The Web does not just connect machines, it connects people.
6	</q>
7	</p>
8
9	<!-- Block-level quotation -->
10	<blockquote cite="https://www.w3.org/TR/html52/">
11	<p>
12	The HTML language is the primary markup language for creating
13	web pages and other information that can be displayed in a web browser.
14	</p>
15	<footer>
16	— <cite>HTML 5.2 W3C Recommendation</cite>
17	</footer>
18	</blockquote>
19
20	<!-- Nested quotations -->
21	<p>
22	The report stated,
23	<q>
24	The user replied, <q>I understand the terms and conditions,</q>
25	before proceeding with the checkout process.
26	</q>
27	</p>

✓

best practice

Use cite on <q> and <blockquote> to link to the source, not on <cite>. The <cite>element itself marks up the title of a creative work (book, article, song) — not a person's name or a URL.

Code Formatting

HTML provides four distinct elements for marking up code-related content. Each serves a different purpose and should be used according to what the text represents — source code, user input, program output, or variable names. Together they provide clear semantics for technical documentation.

Element	Meaning	Example
<code>	Source code fragment	Use <code>fetch()</code> for API calls
<kbd>	Keyboard input	Press <kbd>Enter</kbd> to submit
<samp>	Program output	Terminal shows <samp>Done</samp>
<var>	Variable / mathematical expression	Solve for <var>x</var>
<pre>	Preformatted text (preserves whitespace)	Code blocks, ASCII art, poetry

code-formatting.html

HTML

1	<!-- Code formatting elements in use -->
2	<p>
3	To fetch data, use the
4	<code>fetch()</code> API with async/await.
5	</p>
6
7	<p>
8	Save the file by pressing
9	<kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>
10	(or <kbd><kbd>Cmd</kbd> + <kbd>S</kbd></kbd> on macOS).
11	</p>
12
13	<p>
14	After running the build script, the terminal displays:
15	<samp>Build successful. Output written to /dist.</samp>
16	</p>
17
18	<p>
19	The quadratic formula solves for
20	<var>x</var> where <var>x</var> = (-<var>b</var> ± sqrt(<var>b</var><sup>2</sup> - 4<var>ac</var>)) / 2<var>a</var>.
21	</p>
22
23	<!-- Preformatted code block -->
24	<pre><code>const greet = (name) => {
25	return `Hello, ${name}!`;
26	};
27
28	console.log(greet("World"));
29	// Output: Hello, World!</code></pre>

Live preview of code formatting elements:

preview

🔥

pro tip

Use <pre><code>...</code></pre> for multi-line code blocks. The <pre> preserves whitespace and line breaks, while <code> provides the semantic meaning. For inline code on the same line as text, use just <code> without <pre>.

Best Practices

Semantic Markup Checklist

◆Always use for importance, never for text that carries weight — screen readers add vocal emphasis

◆Use for stress emphasis that changes sentence meaning; use for foreign words, technical terms, or alternative voice

◆Mark up every abbreviation with <abbr> and include the title attribute for the first occurrence

◆Use <del> and <ins> for content edits with the datetime attribute to track when changes were made

◆Wrap inline code in <code>, keyboard shortcuts in <kbd>, program output in <samp>, and variables in <var>

◆Use <q> for inline quotations (browsers add quotes) and <blockquote> for long quotations

◆Apply <cite> only to the title of a creative work — not to a person's name or a URL

◆Use <time> with a machine-readable datetime attribute for dates, times, and durations

◆Reserve for highlighting text for reference purposes (search results, key findings)

◆Use for fine print, disclaimers, and side comments — never for large blocks of content

◆Wrap mathematical formulas with for subscripts and for superscripts

◆Avoid nesting inline elements unnecessarily — each element should serve one clear purpose

Accessibility Considerations

◆Screen readers treat and differently — they change the vocal pitch and emphasis, which and do not

◆The title attribute on <abbr> is read aloud by most screen readers, making expansions accessible without visual tooltips

◆Preformatted text in <pre> may cause horizontal scrolling on small screens — consider wrapping in an accessible scroll container

◆Use aria-label on <time> elements when the text content is not self-explanatory (e.g., relative dates like 'yesterday')

◆Ensure color is not the only indicator for highlights — use a combination of background, border, or icon

◆The <q> element's automatic quotation marks are not announced by all screen readers — test your content with actual AT

Live preview of a well-formatted document using semantic text elements:

preview

$Blueprint — Engineering Documentation·Section ID: HTML-16·Revision: 1.0

X GitHub YouTube Instagram Facebook Buy me a coffee Sponsor