Learn How to use HTML small tag

Table of Contents

HTML: tag

In this series of learning HTML, we will teach you how to use HTML small tag with proper syntax and lots of examples. Let’s start on the HTML small tag.

Description for HTML small tag

The HTML  tag is used to indicate small print or fine print, which is text that is smaller than the surrounding text and is typically used to provide additional information or legal disclaimers.

The  tag can be used to change the size of text to make it smaller and less prominent than the surrounding text. It is a inline element and can be used within other block-level elements such as , <div>, or <li>, as well as within other inline elements.

Here is an example of how the  tag can be used in HTML:

<p>This is a paragraph of text, and <small>this is small print</small> that provides additional information.</p>

In this example, the  tag is used to indicate small print within a paragraph of text. The text within the  element is rendered in a smaller font size than the surrounding text, making it stand out as separate and less prominent.

It is important to note that the use of the  tag is for visual presentation purposes only and does not provide any semantic meaning to the content. If the content requires semantic meaning, it is recommended to use more specific tags such as <cite>, <code>, <time>, or <abbr>.

Syntax for HTML small tag

The HTML  tag is used to indicate that the text it contains should be rendered in a smaller font size than the surrounding text. The syntax of the  tag is as follows:

<p>This is some normal text. <small>This text is smaller.</small></p>

In this example, the  tag is used to make the text it contains smaller than the text in the surrounding paragraph. The  tag can be used to indicate that the text it contains is less important or of secondary importance to the surrounding text.

Note that the  tag should not be used to indicate that the text it contains is difficult to read, as this can make the text inaccessible to users with visual impairments. Instead, the size of the text should be controlled using CSS, and the text should be made accessible using appropriate HTML attributes and techniques.

Global Attributes

The  tag in HTML is used to indicate that the enclosed text is smaller in size than the surrounding text. However, it is important to note that the  tag should not be used to indicate text that is less important or of lesser significance than the surrounding text.

There are a few global attributes that can be used with the  tag or any other HTML tag, including:

class – Specifies one or more class names for an element, which can be used to apply CSS styles to the element.
id – Specifies a unique identifier for an element, which can be used with CSS or JavaScript to reference the element.
style – Specifies inline CSS styles for an element, which can be used to override styles defined in an external stylesheet.
title – Specifies a title or tooltip for an element, which is displayed when the user hovers over the element.

Here’s an example of how the  tag can be used with the class attribute:

<p>This is some text, and <small class="subtext">this is smaller text</small> that provides additional information.</p>

<style>
.subtext {
font-size: smaller;
color: gray;
}
</style>

In this example, the class attribute is used to apply a smaller font size and gray color to the enclosed text.

Event Attributes

Event attributes in HTML allow you to specify JavaScript code that should be executed in response to certain user actions or events, such as when a user clicks on an element or hovers over it. However, the  tag in HTML does not have any event attributes associated with it.

Event attributes are typically used with interactive elements such as buttons, links, and form elements, and can be added to the element using the on prefix followed by the name of the event. For example, you might use the onclick attribute to specify a JavaScript function that should be executed when a user clicks on a button:

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
alert("Hello!");
}
</script>

In this example, the onclick attribute is used to specify a JavaScript function called myFunction() that should be executed when the button is clicked. When the button is clicked, an alert box will be displayed with the message “Hello!”.

However, as I mentioned earlier, the  tag does not have any associated event attributes, as it is typically used to indicate that the enclosed text is smaller in size than the surrounding text. If you need to add interactivity to your HTML document, you should use other elements such as buttons, links, or form elements, and apply event attributes to those elements instead.

Other Attributes

In addition to global and event attributes, HTML elements can also have specific attributes that are unique to that element. However, the  tag in HTML does not have any specific attributes that are unique to it.

Some HTML elements have specific attributes that can be used to provide additional information or functionality. For example, the <img> tag has attributes such as src to specify the URL of the image, alt to provide a text description of the image, and width and height to specify the dimensions of the image.

However, the  tag does not have any specific attributes that are unique to it. The main purpose of the  tag is to indicate that the enclosed text is smaller in size than the surrounding text.

That being said, you can still use global attributes such as class, id, style, and title with the  tag to apply styles or provide additional information. For example, you might use the class attribute to apply a specific CSS style to the enclosed text:

<p>This is some text, and <small class="subtext">this is smaller text</small> that provides additional information.</p>

<style>
.subtext {
font-size: smaller;
color: gray;
}
</style>

In this example, the class attribute is used to apply a smaller font size and gray color to the enclosed text.

Note

Here are some important notes on using the  tag in HTML:

The  tag should be used to indicate that the enclosed text is smaller in size than the surrounding text. However, it is important to note that the  tag should not be used to indicate text that is less important or of lesser significance than the surrounding text.
The  tag does not have any specific attributes that are unique to it. However, you can still use global attributes such as class, id, style, and title with the  tag to apply styles or provide additional information.
The use of the  tag should be limited to cases where it is appropriate to make text smaller. It is important to ensure that the text remains legible and readable, even when it is smaller in size.
When using the  tag, it is a good practice to use CSS to control the font size and other styles of the enclosed text, rather than relying on the default browser styles.
The  tag is a semantic tag, which means that it is used to provide meaning and structure to the content of the web page. Using semantic tags can improve the accessibility and SEO of your web pages.

Browser Compatibility

The HTML small tag has essential support with the following browsers:

Chrome
Internet Explorer (IE)
Opera
Safari (WebKit)
Firefox (Gecko)
Android
Firefox Mobile (Gecko)
Edge Mobile
Opera Mobile
Safari Mobile

Examples for HTML small tag

We will discuss the HTML small tag below, with some examples of how to use the small tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

here’s an example of an HTML5 document that uses the  tag:

<!DOCTYPE html>
<html>
<head>
<title>Example Document with Small Tag</title>
<style>
body {
font-family: Arial, sans-serif;
}
.small-text {
font-size: smaller;
color: gray;
}
</style>
</head>
<body>
<h1>Example Document with Small Tag</h1>
<p>This is some regular text, and <small class="small-text">this is smaller text</small> that provides additional information.</p>
<p>This is some more regular text, and <small class="small-text">this is even smaller text</small> that provides more additional information.</p>
</body>
</html>

In this example, we have an HTML5 document that includes a <head> section and a <body> section. The <head> section includes a <title> tag to specify the title of the document, and a <style> tag to define a CSS style for the .small-text class.

In the <body> section, we have two paragraphs of text. The first paragraph includes some regular text, followed by a  tag with the class attribute set to small-text. This causes the enclosed text to be smaller in size than the surrounding text, and the CSS style defined in the <head> section is applied to the enclosed text.