JavaScript String small() Method

What You’ll Learn

String.prototype.small() is a deprecated HTML wrapper method (same API as MDN String.prototype.small()). It returns a string that wraps your text in a <small> tag. Learn what it builds, why wrappers are discouraged, and how to replace them with DOM APIs or CSS — with five examples and try-it labs.

Introduction

Early JavaScript included helpers that wrapped text in HTML tags — small(), big(), bold(), italics(), and others. They made it easy to inject markup with innerHTML.

Today those wrappers are deprecated. small() still works in browsers for compatibility. The <small> element remains valid HTML (fine print / side comments), but you should create it with the DOM — not by concatenating tags as a string.

This page is part of JavaScript String Methods. Related topics include big() and link().

Understanding the small() Method

Calling str.small() does not create a live DOM node and does not take arguments. It concatenates an HTML string: <small> + text + </small>.

• It is an instance method on strings (auto-boxed if needed).
• It returns a new string — the original is unchanged.
• No parameters — just str.small().
• Prefer createElement("small") or CSS for real UI.

📝 Syntax

General form of String.prototype.small:

str.small()

Parameters

None.

Return value

A string beginning with a <small> start tag, then the text of str, then a </small> end tag.

Common patterns

"Hello, world".small();
// 'Hello, world'

// Prefer this in new code:
const elem = document.createElement("small");
elem.textContent = "Hello, world";
document.body.appendChild(elem);

Examples Gallery

Examples follow MDN String.small() patterns. Use View Output or Try It Yourself for each case.

const contentString = "Hello, world";
contentString.small();
// 'Hello, world'

<small>Hello, world</small>

"".small();           // ''
"A < B".small();      // 'A < B'
typeof "x".small();   // "string"

<small></small>
<small>A < B</small>
string

const contentString = "Hello, world";
const html = contentString.small();
// document.body.innerHTML = html;  // legacy pattern — avoid in new apps

console.log(html);
// Prefer createElement("small") instead

<small>Hello, world</small>
(prefer createElement — avoid string HTML wrappers)

"Hi".small();   // 'Hi'
"Hi".big();     // 'Hi'
"Hi".bold();    // 'Hi'
"Hi".italics(); // 'Hi'

<small>Hi</small>
<big>Hi</big>
<b>Hi</b>
<i>Hi</i>

const contentString = "Hello, world";
const elem = document.createElement("small");
elem.textContent = contentString;

// document.body.appendChild(elem);
console.log(elem.tagName);
console.log(elem.outerHTML);

SMALL
<small>Hello, world</small>

🚀 Common Use Cases

• Reading legacy tutorials — recognize HTML wrapper methods in old samples.
• Migrating old scripts — replace small() with createElement("small").
• Fine print / disclaimers — use a real <small> element (not the string method).
• Teaching string immutability — show that methods return new strings.
• Not for new apps — do not use small() to shrink UI text.
• Safer markup — prefer textContent + DOM over innerHTML strings.

📝 Notes

• small() is deprecated — standardized only for compatibility.
• The <small> element is still valid HTML; the string method is not recommended.
• It returns a string, not a DOM node.
• It takes no parameters.
• Other HTML wrappers (big(), bold(), fontcolor(), …) share the same fate.
• Avoid assigning untrusted strings to innerHTML.

💡 Best Practices