HTML Small Print

HTMLHTMLBeginner
Practice Now

Introduction

In this lab, you will learn how to use the HTML <small> tag to change the size of the text. You will also learn about the different ways to use the <small> tag and how to apply style to it.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/text_head -.-> lab-70835{{"`HTML Small Print`"}} html/para_br -.-> lab-70835{{"`HTML Small Print`"}} end

Add structure to your file

Create an HTML file named index.html in your text editor.

Add the HTML boilerplate to your file. Then, create a <body> tag and add the following code inside it:

<h1>Using the HTML small tag</h1>
<p>This is some text that we want to make smaller:</p>

Add the small tag

Add the <small> tag inside the <p> tag, and add some text between the opening and closing tags:

<p>This is some text that we want to make <small>smaller</small>:</p>

Add legal text using the <small> tag by copying and pasting the following code inside the <body> tag:

<p>
  This is just some regular text, but here is some <small>legal text</small>:
</p>
<small
  >This website is not responsible for any misinformation or errors. Please read
  carefully before trusting this website.</small
>

Apply style to small tag

Apply some styling to the <small> tag by adding the following code inside the <head> tag:

<style>
  small {
    font-size: smaller;
    color: red;
  }
</style>

Add small tag for side comments

Add a side comment using the <small> tag by copying and pasting the following code inside the <body> tag:

<p>
  This is just some text, but here is a <small>side comment</small> about this
  text:
</p>

Save your changes to the index.html file and open it in a web browser. You should see the changes you made to the <small> tag.

Summary

In this lab, you learned how to use the HTML <small> tag to change the size of the text and how to apply style to it. You also learned about the different ways to use the <small> tag, including for legal text, side comments, and small prints. Now you can use the <small> tag to add emphasis to your text and make it stand out.

Other HTML Tutorials you may like