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:
Example
<!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:
- id
- class
- style
- title
id
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.
Example
<p>This is a <small id="stext">small</small> text.</p>In the above example, we assign an id attribute to the small tag with a value stext. In CSS and JavaScript, we can use the name stext to access the specific small tag whose id value is set to the name stext.
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.
class
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.
Example
<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.
style
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.
Example
<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.
title
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.
Example
<p>Offer valid while supplies last. <small title="You can buy only 2 products at a time">Some restrictions apply.</small></p>