HTML Text Formatting

Learn how to properly format text in HTML with semantic meaning

,

Bold text - for important text, for stylistic bold

Important text and bold text

is semantic, is presentational

,

Italic text - for emphasized text, for stylistic italic

Emphasized text and italic text

is semantic, is presentational

Underlined text (avoid for links to prevent confusion)

Underlined text example

Presentational only

Highlighted text for reference or notation purposes

This is highlighted text

Semantic - indicates relevance

<code>

Inline code snippet or computer code

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

Semantic - indicates code

Subscript text (lowered and smaller)

Chemical formula: H2O

Semantic - indicates subscript

Superscript text (raised and smaller)

Mathematical notation: x2

Semantic - indicates superscript

<del>, <ins>

Deleted and inserted text (for document edits)

<del>$100</del> <ins>$80</ins> (limited time)

Semantic - indicates changes

vs

indicates importance, is just visual boldness

<p><strong>Warning!</strong> This is <b>just bold</b> text.</p><p><strong>Warning!</strong> This is <b>just bold</b> text.</p>

Impact: Screen readers emphasize content

vs

adds verbal stress, is just visual italic

<p><em>You must</em> complete this, <i>said the teacher</i>.</p><p><em>You must</em> complete this, <i>said the teacher</i>.</p>

Impact: Screen readers change tone for content

Indicates text that is relevant or should be highlighted

<p>Search results: <mark>HTML</mark> formatting guide</p><p>Search results: <mark>HTML</mark> formatting guide</p>

Impact: Helps users find relevant content

<del> & <ins>

Shows document edits with semantic meaning

<p>Version 2: <del>old content</del> <ins>new content</ins></p><p>Version 2: <del>old content</del> <ins>new content</ins></p>

Impact: Clearly shows document changes

Semantic vs Presentational

Use semantic elements when meaning is important

Avoid

<p><b>Warning:</b> This is <i>important</i> information.</p><p><b>Warning:</b> This is <i>important</i> information.</p>

Why: Semantic elements convey meaning to assistive technologies

Avoid Overuse

Don't overuse formatting as it loses effectiveness

Avoid

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

Why: Too much formatting makes content harder to read

CSS for Styling

Use CSS for purely visual formatting

Avoid

<p>This needs <b><i><u>attention</u></i></b>.</p><p>This needs <b><i><u>attention</u></i></b>.</p>

Why: CSS provides more control and separates content from presentation

Accessibility

Ensure proper contrast and readable text

Avoid

<style>
  mark { 
    background-color: yellow; 
    color: white; 
  }
</style><style>
  mark { 
    background-color: yellow; 
    color: white; 
  }
</style>

Why: Low contrast text is hard to read for many users

Academic Paper Formatting

<article>
  <h1>The Effects of CO<sub>2</sub> on Climate</h1>
  
  <p>
    Recent studies <sup>[1]</sup> have shown that atmospheric 
    <strong>CO<sub>2</sub></strong> levels have increased by 
    <mark>47%</mark> since the industrial revolution.
  </p>
  
  <blockquote>
    <p>
      <em>"The correlation between CO<sub>2</sub> and global temperature 
      is now <ins>undeniable</ins> <del>debatable</del>."</em>
    </p>
    <footer>— Dr. <cite>Jane Smith</cite>, <cite>Climate Studies Journal</cite></footer>
  </blockquote>
  
  <p>
    The chemical reaction is: H<sub>2</sub>O + CO<sub>2</sub> ⇌ H<sub>2</sub>CO<sub>3</sub>
  </p>
</article><article>
  <h1>The Effects of CO<sub>2</sub> on Climate</h1>
  
  <p>
    Recent studies <sup>[1]</sup> have shown that atmospheric 
    <strong>CO<sub>2</sub></strong> levels have increased by 
    <mark>47%</mark> since the industrial revolution.
  </p>
  
  <blockquote>
    <p>
      <em>"The correlation between CO<sub>2</sub> and global temperature 
      is now <ins>undeniable</ins> <del>debatable</del>."</em>
    </p>
    <footer>— Dr. <cite>Jane Smith</cite>, <cite>Climate Studies Journal</cite></footer>
  </blockquote>
  
  <p>
    The chemical reaction is: H<sub>2</sub>O + CO<sub>2</sub> ⇌ H<sub>2</sub>CO<sub>3</sub>
  </p>
</article>

Technical Documentation

<section>
  <h2>JavaScript <code>Array</code> Methods</h2>
  
  <p>
    The <code>Array.prototype.map()</code> method creates a new array with the results 
    of calling a provided function on every element.
  </p>
  
  <pre><code>const numbers = [1, 4, 9];
const roots = numbers.map(<mark>num => Math.sqrt(num)</mark>);
// roots is now [1, 2, 3]</code></pre>
  
  <p class="note">
    <strong>Note:</strong> <code>map()</code> does not mutate the original array.
  </p>
  
  <p>
    <small>Last updated: 2025-07-15</small>
  </p>
</section><section>
  <h2>JavaScript <code>Array</code> Methods</h2>
  
  <p>
    The <code>Array.prototype.map()</code> method creates a new array with the results 
    of calling a provided function on every element.
  </p>
  
  <pre><code>const numbers = [1, 4, 9];
const roots = numbers.map(<mark>num => Math.sqrt(num)</mark>);
// roots is now [1, 2, 3]</code></pre>
  
  <p class="note">
    <strong>Note:</strong> <code>map()</code> does not mutate the original array.
  </p>
  
  <p>
    <small>Last updated: 2025-07-15</small>
  </p>
</section>

E-commerce Product Page

<div class="product">
  <h1>Professional <mark>Wireless</mark> Keyboard</h1>
  
  <div class="price">
    <del>$89.99</del> <ins>$69.99</ins>
    <sup class="sale-tag">SALE</sup>
  </div>
  
  <p>
    <strong>Features:</strong> <em>Ultra-thin</em> design, 
    <mark>2-year battery life</mark>, and <code>Bluetooth 5.0</code> connectivity.
  </p>
  
  <div class="tech-specs">
    <h2>Technical Specifications</h2>
    <p>Dimensions: 14.5<sub>L</sub> × 5<sub>W</sub> × 0.5<sub>H</sub> inches</p>
    <p>Weight: 1.2<sub>lbs</sub></p>
  </div>
</div><div class="product">
  <h1>Professional <mark>Wireless</mark> Keyboard</h1>
  
  <div class="price">
    <del>$89.99</del> <ins>$69.99</ins>
    <sup class="sale-tag">SALE</sup>
  </div>
  
  <p>
    <strong>Features:</strong> <em>Ultra-thin</em> design, 
    <mark>2-year battery life</mark>, and <code>Bluetooth 5.0</code> connectivity.
  </p>
  
  <div class="tech-specs">
    <h2>Technical Specifications</h2>
    <p>Dimensions: 14.5<sub>L</sub> × 5<sub>W</sub> × 0.5<sub>H</sub> inches</p>
    <p>Weight: 1.2<sub>lbs</sub></p>
  </div>
</div>

Text Formatting Playground

Experiment with HTML text formatting in our live editor

Formatting Examples Preview

Ready-to-use examples covering different formatting scenarios

Live Preview

Formatting Elements

Bold importance

Emphasized

Highlighted

<code>

Code snippet

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

< Previous Next >

HTML Text Formatting

Text Formatting Elements

<strong>, <b>

<em>, <i>

<u>

<mark>

<code>

<sub>

<sup>

<del>, <ins>

Semantic Formatting

<strong> vs <b>

<em> vs <i>

<mark>

<del> & <ins>

Formatting Best Practices

Semantic vs Presentational

Recommended

Avoid

Avoid Overuse

Recommended

Avoid

CSS for Styling

Recommended

Avoid

Accessibility

Recommended

Avoid

Practical Formatting Examples

Academic Paper Formatting

Technical Documentation

E-commerce Product Page

Text Formatting Playground

Formatting Examples Preview

Formatting Elements