HTML Element

Publish in HTML Tutorial el 25/05/2025 16:10

The element is used to represent side-comments and small print, typically for disclaimers, caveats, legal restrictions, or copyright notices. It renders text one font size smaller than the parent element (from medium to small, or from large to medium).

While makes text visually smaller, it's important to note that it doesn't reduce the semantic importance of the content. Screen readers will still read it at normal volume and with the same importance as surrounding text.

Key Characteristics:

Inline element (doesn't create line breaks)
Reduces font size by one level (relative to parent)
Often used for legal text, disclaimers, or attribution
Can be nested to make text progressively smaller
Should not be used just for visual styling (CSS is better for that)

Basic Syntax

Here's how the basic tag looks in HTML:

And here's how it renders:

This text will appear smaller than surrounding content

Examples of Usage

Example 1: Copyright Notice

A common use of is for copyright notices at the bottom of pages:

Play Code

<footer>
  <p>© 2023 My Awesome Website. All rights reserved.</p>
  <small>This content is protected by international copyright law.</small>
</footer>

Example 2: Form Field Instructions

is perfect for providing supplementary information about form fields:

Play Code

<label for="username">Username</label>
<input type="text" id="username" name="username">
<small>Must be 6-12 characters, letters and numbers only</small>

Example 3: Nested Elements

You can nest elements to make text progressively smaller:

Play Code

<p>Main content text size</p>
<small>First level small text</small><br>
<small><small>Second level small text</small></small><br>
<small><small><small>Third level small text</small></small></small>

Example 4: Dynamic with JavaScript

Here's how you can use JavaScript to dynamically add small print to an element:

Play Code

<div id="price-container">
  <span class="price">$49.99</span>
</div>

<script>
  const container = document.getElementById('price-container');
  const disclaimer = document.createElement('small');
  disclaimer.textContent = ' * Price excludes taxes and shipping';
  container.appendChild(disclaimer);
</script>

Example 5: Toggle Visibility with JavaScript

This example shows how to toggle the visibility of a element:

Play Code

<p>Click the button to toggle legal notice:</p>
<button onclick="toggleNotice()">Toggle Notice</button>
<small id="legal-notice" style="display: none;">
  Legal notice: This content is provided as-is without warranties.
</small>

<script>
  function toggleNotice() {
    const notice = document.getElementById('legal-notice');
    notice.style.display = notice.style.display === 'none' ? 'inline' : 'none';
  }
</script>

Tips and Best Practices

Semantic Use: Only use for content that represents legal disclaimers, caveats, or side comments, not just for visual styling.
CSS Alternative: If you just want smaller text for design purposes, use CSS (font-size) instead.
Accessibility: Screen readers will read content normally - don't rely on it to convey importance.
Nesting: Avoid nesting more than 2-3 levels as the text may become too small to read.
Contrast: Ensure small text maintains sufficient contrast with its background for readability.