Skip to content
Related Articles

Related Articles

HTML small Tag

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 03 Jun, 2022

The <small> tag in HTML is used to set small 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.
Syntax: 
 

<small> Contents... </small>

Example 1: 
 

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.

i) 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:

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>


<small> tag in nested form

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.

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>


<small> tag in nested form

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

ii) 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. 

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>

 

<small> tag in a non-nested form

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

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>


<small> tag in non-nested form

Example 2: 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
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!