Open In App

HTML <small> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The <small> tag in HTML is used to define smaller text, reducing font size. It decreases the font size by one size (from medium to small, from x-large to large). It has a display property of inline.

The <small> 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.

Syntax: 

<small> Contents... </small>

Example 1: In this example, we will implement the small tag in an HTML document.

HTML




<html>
 
<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h2>
        <small> Tag
    </h2>
 
    <!-- html small tag is used here -->
 
    <small>
        Welcome to GeeksforGeeks!
    </small>
 
</body>
 
</html>


Output: 
 

There are basically two ways in which you could use this <small> tag

1. In a Nested Form

When you use the <small> tag in a nested form then the <small> 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: In this example, we will implement the above form in an HTML document.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h2>
        Welcome To GFG
    </h2>
    <p style="font-size: 18px;">
        Geeks For Geeks
        <small>
            krlo ho jayega!
        </small>
    </p>
 
 
</body>
 
</html>



tag in nested form

Note: But when we increase the font size of the parent element, the <small> tag will automatically increase the font size of its text as well.

Example 2: In this example also, we will implement the small tag in an HTML document.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h2>
        Welcome To GFG
    </h2>
    <p style="font-size: 32px">
        Geeks for Geeks
        <small>
            krlo ho jayega
        </small>
    </p>
</body>
 
</html>



tag in nested form

Note: It means that the ratio between the font size of the nested <small> tag text and the parent element’s text is same.

2. In a non-nested Form

If the <small> 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 <small>tag text. 

Example 1: In this example, we will implement the above form in an HTML document.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h2>Welcome To GFG</h2>
    <p style="font-size: 18px">
        Geeks For Geeks
    </p>
    <small>
        Krlo ho jayega!
    </small>
</body>
 
</html>


Output:

tag in a non-nested form

Note : But if we change the font size of the paragraph, it will not affect the font size of the <small> tag text.

Example 2: In this example, we will implement the above form in an HTML document.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h2>
        Welcome To GFG
    </h2>
    <p style="font-size: 32px">
        Geeks For Geeks
    </p>
    <small>Krlo ho jayega!</small>
</body>
 
</html>



tag in non-nested form

Example 2: In this example we will use CSS property to set the font size smaller. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>small Tag</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!
    </div>
</body>
 
</html>


Output: 

Supported Browsers: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads