HTML Text Formatting Guide

Semantic and presentational text formatting in HTML

Bold text (presentational)

Note: Use for semantic importance

This is bold text.

Italic text (presentational)

Note: Use for semantic emphasis

This is italic text.

Underlined text

Note: Avoid - can be confused with links

This is underlined text.

Superscript text

Note: For exponents, footnotes, etc.

E = mc2

Subscript text

Note: For chemical formulas, etc.

H2O

Important text (semantic)

Note: Browsers typically render as bold

Warning: Hot surface.

Emphasized text (semantic)

Note: Browsers typically render as italic

You must complete the form.

Highlighted text

Note: Default background color is yellow

Search results for HTML formatting.

Smaller text

Note: Often used for legal disclaimers

Regular text Small disclaimer

<del>

Deleted text

Note: Typically rendered with strikethrough

Price: <del>$99</del> $79

<ins>

Inserted text

Note: Typically rendered with underline

My favorite color is <del>blue</del> <ins>red</ins>.

<code>

Inline code snippet

Note: Monospace font by default

Use the <code>printf()</code> function.

<kbd>

Keyboard input

Note: Represents user keyboard input

Press <kbd>Ctrl</kbd>+<kbd>S</kbd> to save.

<samp>

Sample output

Note: For program output samples

Output: <samp>File not found.</samp>

<var>

Variable name

Note: Typically rendered in italics

The variable <var>x</var> represents...

<abbr>

Abbreviation or acronym

Note: Use title attribute for full expansion

The <abbr title="World Health Organization">WHO</abbr> was founded...

<q>

Short inline quotation

Note: Browsers typically add quotation marks

She said <q>Hello world!</q>

<cite>

Citation or reference

Note: Typically rendered in italics

<cite>The Scream</cite> by Edvard Munch

<time>

Machine-readable date/time

Note: Use datetime attribute for parsing

The event is on <time datetime="2023-12-25">Christmas</time>.

Indicates important text

Note: Screen readers may emphasize

Warning: Do not touch.

Indicates emphasized text

Note: Screen readers may change tone

You must complete this.

Highlighted text for reference

Note: Like a highlighter pen

The key term is highlighted.

Side comments and fine print

Note: For legal disclaimers, etc.

Price: $9.99 + tax

<code>

Inline code snippet

Note: For short code references

Use <code>console.log()</code> for debugging.

Semantic Over Presentational

Use semantic elements that convey meaning rather than just visual styling

Good Example

<p><strong>Important:</strong> Read carefully.</p><p><strong>Important:</strong> Read carefully.</p>

Bad Example

<p><b>Important:</b> Read carefully.</p><p><b>Important:</b> Read carefully.</p>

Accessibility

Ensure text formatting works for all users, including screen readers

Good Example

<p><em>Please</em> fill out the form.</p><p><em>Please</em> fill out the form.</p>

Bad Example

<p><i>Please</i> fill out the form.</p><p><i>Please</i> fill out the form.</p>

Moderation

Avoid excessive formatting that reduces readability

Good Example

<p>Use <strong>sparingly</strong> for emphasis.</p><p>Use <strong>sparingly</strong> for emphasis.</p>

Bad Example

<p><strong><em><u>Everything</u></em></strong> is <mark>formatted</mark> <small>excessively</small>.</p><p><strong><em><u>Everything</u></em></strong> is <mark>formatted</mark> <small>excessively</small>.</p>

Technical Article

<article>
  <h1>JavaScript Closures</h1>
  
  <p>A <strong>closure</strong> is the combination of a function bundled together with references to its surrounding state. In other words, a closure gives you access to an outer function's scope from an inner function.</p>
  
  <p><em>Example:</em></p>
  
  <pre><code>function outer() {
  const name = 'John';
  
  function inner() {
    console.log(name);
  }
  
  return inner;
}</code></pre>
  
  <p>In this example, <code>inner()</code> forms a closure that includes the <mark>name</mark> variable from its parent scope.</p>
  
  <p><small>Note: Closures are created every time a function is created.</small></p>
</article><article>
  <h1>JavaScript Closures</h1>
  
  <p>A <strong>closure</strong> is the combination of a function bundled together with references to its surrounding state. In other words, a closure gives you access to an outer function's scope from an inner function.</p>
  
  <p><em>Example:</em></p>
  
  <pre><code>function outer() {
  const name = 'John';
  
  function inner() {
    console.log(name);
  }
  
  return inner;
}</code></pre>
  
  <p>In this example, <code>inner()</code> forms a closure that includes the <mark>name</mark> variable from its parent scope.</p>
  
  <p><small>Note: Closures are created every time a function is created.</small></p>
</article>

Product Description

<section>
  <h1>Premium Coffee Beans</h1>
  
  <p>Our <strong>single-origin</strong> coffee beans are sourced directly from small farms in Colombia. <em>Freshly roasted</em> to bring out their natural flavors.</p>
  
  <p>Available in:</p>
  <ul>
    <li>Light roast <small>(fruity notes)</small></li>
    <li>Medium roast <small>(balanced flavor)</small></li>
    <li>Dark roast <small>(bold intensity)</small></li>
  </ul>
  
  <p>Price: $14.99 <small>per 12oz bag</small></p>
  
  <p><del>Was $16.99</del> <ins>Now 12% off</ins></p>
</section><section>
  <h1>Premium Coffee Beans</h1>
  
  <p>Our <strong>single-origin</strong> coffee beans are sourced directly from small farms in Colombia. <em>Freshly roasted</em> to bring out their natural flavors.</p>
  
  <p>Available in:</p>
  <ul>
    <li>Light roast <small>(fruity notes)</small></li>
    <li>Medium roast <small>(balanced flavor)</small></li>
    <li>Dark roast <small>(bold intensity)</small></li>
  </ul>
  
  <p>Price: $14.99 <small>per 12oz bag</small></p>
  
  <p><del>Was $16.99</del> <ins>Now 12% off</ins></p>
</section>

Scientific Paper Excerpt

<div class="paper">
  <h1>Effects of CO<sub>2</sub> on Plant Growth</h1>
  
  <p>Elevated CO<sub>2</sub> concentrations (800 ppm) resulted in a <strong>significant increase</strong> in biomass production compared to ambient conditions (400 ppm).</p>
  
  <p>The growth response followed the equation:</p>
  
  <p>y = 2x<sup>2</sup> + 3x + 5</p>
  
  <p><mark>Key finding:</mark> The effect was more pronounced in C<sub>3</sub> plants than in C<sub>4</sub> plants.</p>
  
  <p><small>Data collected from 2015-2020 at the University Research Center.</small></p>
</div><div class="paper">
  <h1>Effects of CO<sub>2</sub> on Plant Growth</h1>
  
  <p>Elevated CO<sub>2</sub> concentrations (800 ppm) resulted in a <strong>significant increase</strong> in biomass production compared to ambient conditions (400 ppm).</p>
  
  <p>The growth response followed the equation:</p>
  
  <p>y = 2x<sup>2</sup> + 3x + 5</p>
  
  <p><mark>Key finding:</mark> The effect was more pronounced in C<sub>3</sub> plants than in C<sub>4</sub> plants.</p>
  
  <p><small>Data collected from 2015-2020 at the University Research Center.</small></p>
</div>

Formatting Playground

Experiment with text formatting in our live editor

Formatting Examples Preview

Ready-to-use examples covering text formatting

Live Preview

Basic Formatting

This is bold, italic, and underlined text.

H₂O and E = mc² examples.

Semantic Formatting

Important: This is emphasized text.

The highlighted term and code snippet.

All examples will be loaded into an interactive editor where you can modify and test them

Basic Text Formatting

<b>

<i>

<u>

<sup>

<sub>

<strong>

<em>

<mark>

<small>

<del>

<ins>

<code>

<kbd>

<samp>

<var>

<abbr>

<q>

<cite>

<time>

Semantic Text Elements

<strong>

<em>

<mark>

<small>

<code>

Formatting Best Practices

Semantic Over Presentational

Accessibility

Moderation

Practical Examples

Technical Article

Product Description

Scientific Paper Excerpt

Formatting Playground

Formatting Examples Preview

Basic Formatting

Semantic Formatting

Continue Your HTML Journey

HTML Styles

HTML Quotations