Add Small Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the small tag in HTML.
What is Small Tag in HTML
The small tag is an HTML element used to indicate small text or fine print text. It is typically used to provide additional information or clarification that is not as important as the main text on a page. The small tag is often used in legal disclaimers, copyright notices, and other similar types of text.
The syntax for the small tag is straightforward. It requires an opening and closing small tag, and the text that needs to be displayed as small in the document is placed between these two tags.
Here's an example of how to use <small> tag in HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Small Tag Example</title> </head> <body> <p>This is a paragraph of text. <small>This text is smaller than the surrounding text.</small></p> <p>This product may cause side effects. <small>Consult your doctor before use.</small></p> <p>Offer valid while supplies last. <small>Some restrictions apply.</small></p> </body> </html>
Attributes of Small Tag
Here are the attributes we can use with the small tag:
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the small tag and use it to apply a specific style to that particular tag.
<p>This is a <small id="stext">small</small> text.</p>
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the small tags and use it to apply a specific style to all the small tags that belong to a particular class.
<p>This is a <small class="info">small</small> text.</p> <p>This is another <small class="info">small</small> text.</p>
In the above example, both small tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both small tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
The style attribute can be used to apply inline css styles to the small tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
<p>This is an <small style="background-color: green; color: white">small</small> text.</p>
The style="background-color: green; color: white" will change the background color of the small tag to green and its font color to white.
The title attribute can be used to add a tooltip or additional information to the small tag, which will only appear when the user places the mouse cursor on the smaller text.
<p>Offer valid while supplies last. <small title="You can buy only 2 products at a time">Some restrictions apply.</small></p>