HTML Formatting - Learn It Quicker

Bold and Strong Text

The element indicates that text has strong importance, seriousness, or urgency. Browsers render it as bold by default, but the semantic meaning is more important than the visual appearance. Screen readers may use different intonation when reading strong text.

The element is a non-semantic way to make text bold without indicating any special importance. It's useful when you want bold text purely for visual reasons, like keywords in a document abstract or product names in a review.

Prefer over when the text has semantic importance. Use CSS for purely decorative bold styling. The distinction matters for accessibility and SEO.

<!-- Strong (semantic importance) -->
<p>Warning: <strong>Do not enter this area!</strong></p>
<p><strong>Important:</strong> Save your work frequently.</p>

<!-- Bold (non-semantic styling) -->
<p>The <b>HTML</b> specification defines web standards.</p>
<p>In <b>Figure 1.1</b>, you can see the results.</p>

<!-- CSS alternative for bold text -->
<p><span style="font-weight: bold;">Bold via CSS</span></p>

Italic and Emphasis

The element indicates emphasized text. Browsers typically render it in italics, and screen readers may use different vocal stress. Use for words you would naturally emphasize when speaking, like 'really' in 'I really mean it.'

The element italicizes text without semantic emphasis. It's appropriate for technical terms, foreign phrases, thoughts, ship names, or other content traditionally italicized by typographic convention.

The <cite> element represents the title of a creative work (book, movie, song, etc.). It's also rendered in italics by default but has specific semantic meaning.

<!-- Emphasis (stressed emphasis) -->
<p>I <em>really</em> think you should try this.</p>
<p>This is <em>not</em> what I expected.</p>

<!-- Italic (non-semantic) -->
<p>The term <i>HTML</i> stands for HyperText Markup Language.</p>
<p>She thought, <i>This can't be happening.</i></p>
<p>The word <i lang="fr">croissant</i> is French.</p>

<!-- Citations -->
<p>I just read <cite>To Kill a Mockingbird</cite> by Harper Lee.</p>
<p>As mentioned in <cite>The Elements of Style</cite>, clarity is key.</p>

Underline and Insert/Delete

The element underlines text and should be used for proper names in Chinese text, misspellings, or other cases where underline is typographically appropriate. Avoid using it for links or emphasis, as underlined text is strongly associated with hyperlinks.

The <ins> element represents inserted text, typically shown with an underline. The <del> element represents deleted text, typically shown with a strikethrough. These are useful for showing document revisions or changes.

Both <ins> and <del> can have cite and datetime attributes to document when and why changes were made.

<!-- Underline -->
<p>Avoid confusing <u>there</u> with <u>their</u> and <u>they're</u>.</p>

<!-- Inserted and deleted text -->
<p>My favorite color is <del>blue</del> <ins>green</ins>.</p>

<p>Price: <del>$99.99</del> <ins>$79.99</ins></p>

<!-- With datetime attribute -->
<p>
  Meeting time: 
  <del datetime="2026-01-15T09:00:00Z">9 AM</del>
  <ins datetime="2026-01-15T14:00:00Z">2 PM</ins>
</p>

Mark, Small, and Other Formatting

The element highlights text for reference purposes, like search results or quoted text. It's rendered with a yellow background by default, similar to a highlighter pen.

The element represents side comments and fine print, like copyright notices or legal text. It renders in a smaller font size but has semantic meaning beyond just sizing.

The <s> element represents content that is no longer accurate or relevant (strikethrough). Unlike <del>, it doesn't indicate editorial deletion but rather that something is outdated.

<!-- Highlighted text -->
<p>Search results for "HTML":</p>
<p><mark>HTML</mark> is the standard markup language for web pages.</p>

<!-- Small print -->
<p><small>Copyright © 2026 Company Name. All rights reserved.</small></p>
<p>Price: $50 <small>(plus shipping and handling)</small></p>

<!-- Strikethrough for outdated content -->
<p><s>This feature is deprecated</s> Use the new API instead.</p>
<p>Sale price <s>$100</s> now only $75!</p>

Subscript and Superscript

The element creates subscript text, positioned below the baseline. It's used for chemical formulas, mathematical notation, and footnote references.

The element creates superscript text, positioned above the baseline. It's used for exponents, ordinal numbers, and footnote markers.

These elements have semantic meaning and are important for mathematical and scientific content. Don't use them just for visual styling—use CSS instead.

<!-- Subscript for chemistry -->
<p>Water has the chemical formula H<sub>2</sub>O.</p>
<p>Carbon dioxide is CO<sub>2</sub>.</p>

<!-- Superscript for math -->
<p>The area of a square is a<sup>2</sup>.</p>
<p>E = mc<sup>2</sup> is Einstein's famous equation.</p>

<!-- Footnote references -->
<p>
  According to the study<sup>1</sup>, results were significant.
  Further analysis<sup>2</sup> confirmed these findings.
</p>

<!-- Ordinal numbers -->
<p>She finished in 1<sup>st</sup> place.</p>
<p>The 21<sup>st</sup> century began in 2001.</p>

Code, Keyboard, and Sample Output

The <code> element represents a fragment of computer code. It's rendered in a monospace font by default. Use it for inline code snippets, function names, or variable names.

The <kbd> element represents keyboard input or user input. Use it to indicate keys users should press or text they should type.

The <samp> element represents sample output from a computer program. Use it to show what a program displays or returns.

The <var> element represents a variable in a mathematical expression or programming context. It's typically rendered in italics.

For multi-line code blocks, use <pre><code> together. The <pre> element preserves whitespace and line breaks.

<!-- Inline code -->
<p>Use the <code>console.log()</code> function to debug JavaScript.</p>
<p>The <code>getElementById()</code> method returns an element.</p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Save your file with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Type <kbd>npm install</kbd> in the terminal.</p>

<!-- Sample output -->
<p>The program returned: <samp>Error: File not found</samp></p>
<p>Output: <samp>Hello, World!</samp></p>

<!-- Variables -->
<p>If <var>x</var> = 5 and <var>y</var> = 3, then <var>x</var> + <var>y</var> = 8.</p>

<!-- Multi-line code block -->
<pre><code>function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("World"));</code></pre>