Tag in HTML -Scaler Topics

Overview

In HTML, the tag is used to emphasize small text or information that is of secondary significance, such as copyright, side remarks, and legal disclaimers.

The HTML tag reduces the font size of the text in the page by a unit. This tag is also commonly referred to as the element. The HTML element should be used within the <body> tag.

It decreases the font size by one (from large to medium, from small to x-small). It has a inline display property. In HTML, the element is categorized as a phrase tag. (For additional information about tags in HTML, head over to HTML Tags).

Syntax

The tag is used in pairs. The content is written between the opening tag and closing tags. The basic syntax of the tag is given as:

Attributes

There are no specific attributes associated with the tag. It supports global attributes. The global attributes like class, id, dir, and style are often used with the tag in HTML.

Additionally, the element enables event attributes like onclick and onmousedown.

How to use Tag in HTML?

HTML tag makes text font one size smaller than the documents base font size, such as x-large to large, large to medium, etc.

In HTML, the font size is measured in standard units ranging from 1 to 7. The text's usual font size is three units by default. Additionally, the kind of the font-family of the text affects its size. For example, for the same font-size, Georgia looks bigger than Times New Roman but smaller than Verdana.

HTML Tag can be Used For Following Purposes:

1. Using tag to define legal restrictions and caveats

In HTML, cautions, legal restrictions, and disclaimers may all be shown using the element. Take a look at the example below, where the terms and conditions warning is provided in smaller text while the sale is marketed in standard sized print.

image alt

2. Using tag to represent copyright notice

The tag can be used to mark up a copyright notice or license agreement. Like this:

Detailed Description of HTML Small Tag

Examples

Let's examine several examples that use the tag in HTML.

Example 1- Using tag in a nested form

When the tag is used in a nested form, then the font size of the text or content within the tags varies in relation to the font size of the parent element.

Output: HTML Small Tag Code Output

As shown in the above example, the characteristics of the surrounding parent element are inherited by the nested elements. In this way, nesting of tags may be advantageous depending on the stylistic preferences.

The font size of the text within a tag will continue to decrease with respect to the size of the surrounding text if it is nested inside another tag numerous times.

However, the tag will automatically increase the font size of its text when the font-size of the parent element is raised.

Output: Example of Small Tag in HTML

This indicates that the ratio between the font size of the nested tag text and the parent element's text is same.

The font of the text may be decreased in accordance with the "depth" of the content by nesting tags within other elements.

Note: The tag can not reduce the font size of the text below than the browser's minimum font size. Run the following code to get a clear understanding of this:

As illustrated above, the font size of the text is not reduced after further nesting of tags.

Example 2- Using tag as a separate element

Whenever a tag is used as a separate element or in a non-nested form in the HTML document, then altering the font size of any element will not affect the font size or any other font characteristics of the text inside tags.

Output:

Usning small tag as separate element

Example 3- Using a CSS alternative for HTML tag

CSS font-size property can be used to display smaller text without using the element.

Styling the Tag Using CSS

Several CSS properties may be used to change the appearance of text styled within the element, including the ones listed below:

The text’s font style within can be changed to bold, italic, initial, etc. by using CSS- font-style property.
Use the CSS-font-weight property to change the font weight of the text to show it in a bold or thick manner.
Use the CSS background-color property to give the text a background color.
To decorate the text within tag, use CSS text-decoration property.

Learn More

To learn more about font styles and altering font sizes using CSS, visit the CSS-font-properties by Scaler Topics.

Accessibility Concerns

It is important to use the HTML element properly to deal with the accessibility concerns. This tag is used to indicate side remarks. For example, copyright statements or licensing information located in a footer.

The element is only meant to be used for small passages of text; it is not appropriate for lengthy sections of text like paragraphs, lists, etc. As a result, it is not recommended to mark up the whole of a Terms and Conditions page using the element.

Note: Avoid changing the text size using the tag.

HTML5 elements should indicate semantic meanings instead of only styling a document. The element in HTML5 may be used to indicate things like warnings or precautions, but it shouldn't be used to show subheaders.

This is semantically incorrect. Use semantic elements to show an HTML document's correct structure, and CSS to manage styling.

Note: The element in HTML5, along with the and elements, may seem to contradict the idea of keeping structure and presentation separate, yet they are all valid in terms of usage. Authors are encouraged to use their discretion properly when determining whether to use the tag or CSS.

Browser Compatibility

HTML tag is supported by various browsers:

Google Chrome 103.0
Microsoft Edge 12.0
Internet Explorer 11.0
Firefox 2.0
Safari 15.5
Opera 86.0
Samsung Internet 17.0

Conclusion

The tag in HTML defines smaller text like copyright and side comments.
It is a phrase tag which renders text with a smaller font.
tag supports Global and Event attributes.
The tag is only intended for tiny sequences of text.
In an HTML document, it is critical to appropriately employ the tag.
Although CSS may provide a similar or richer effect for the HTML element, this tag is not yet deprecated.

<small> Tag in HTML