HTML small Tag

The tag in HTML is an inline element used to display text in a smaller font size, typically for less important or secondary information.

It is commonly used for fine print, disclaimers, or secondary information.
The tag does not change the semantic meaning of text but visually deemphasizes it.

HTML

<html>
<head>
    <title></title>
</head>
<body>
    <h1> GeeksforGeeks </h1>
    <h2> &lt;small&gt; Tag </h2>
    <small> Welcome to GeeksforGeeks! </small>
</body>
</html>

Output:

Syntax:

<small> Contents... </small>

Note: The tag also supports the Global Attributes and Event Attributes in HTML. This tag is not deprecated, but it is possible to achieve better results or nearly the same effect with CSS.

Working with small Tag

There are basically two ways in which you could use this tag.

1. In a Nested Form

When you use the tag in a nested form then the tag will going to change the font size of the text in between it with respect to the parent element's font size which means changing text with respect to its surroundings.

Example 1: Implement the above form in an HTML document.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2> Welcome To GFG </h2>
    <p style="font-size: 18px;">
        Geeks For Geeks
        <small>
            A platform to learn coding and computer science concepts.
        </small>
    </p>
</body>
</html>

Output:

Note: The tag uses relative sizing, so it scales with the parent element’s font size.

Example 2: Implement the small tag in an HTML document.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2> Welcome To GFG </h2>
    <p style="font-size: 32px">
        Geeks for Geeks
        <small>
            Your go-to platform for learning programming and computer science.
        </small>
    </p>
</body>
</html>

Output:

2. In a non-nested Form

If the tag is used as a separate element in the HTML document, then changing the font size of any element will not going to affect the font size of the tag text.

Example 1: Demonstrates the tag displaying secondary text in a relatively smaller font within a paragraph.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>Welcome To GFG</h2>
    <p style="font-size: 18px">
        Geeks For Geeks
        <small>
            Your go-to platform for learning programming and computer science.
        </small>
    </p>
</body>
</html>

Output:

Note : If we change the font size of the paragraph, it will not affect the font size of the tag text.

Example 2: Shows text rendered smaller relative to surrounding content.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2> Welcome To GFG </h2>
    <p style="font-size: 32px">
        Geeks For Geeks
    </p>
    <small>
        A platform to learn coding, data structures, and algorithms.
    </small>
</body>
</html>

Output:

Example 3: Using CSS property to set the font size smaller.

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            text-align: center;
        }
        h1 {
            color: green;
        }
        .gfg {
            font-size: smaller;
        }
    </style>
</head>
<body>
    <h1> GeeksforGeeks </h1>
    <h2> font-size: smaller; </h2>
    <div class="gfg">
        Welcome to GeeksforGeeks! (using CSS smaller)
    </div>
    <p>
        <small>
            Welcome to GeeksforGeeks! (using &lt;small&gt; tag)
        </small>
    </p>
</body>
</html>

Output:

Working with small Tag

1. In a Nested Form

2. In a non-nested Form

Explore