Mastering HTML Subscript Text

Introduction

In HTML, the <sub> tag is used to specify inline text which should be displayed as the subscript for solely typographical reasons. The content inside this tag is typically rendered with a lowered baseline using smaller text. In this lab, you will learn how to use the <sub> tag in HTML to display subscripted text.

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/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") subgraph Lab Skills html/basic_elems -.-> lab-70847{{"`HTML Subscript Text`"}} html/head_elems -.-> lab-70847{{"`HTML Subscript Text`"}} html/text_head -.-> lab-70847{{"`HTML Subscript Text`"}} html/para_br -.-> lab-70847{{"`HTML Subscript Text`"}} end

Add the HTML boilerplate

Create a new file called index.html.

Add the following code to index.html to create the basic HTML structure.

<!doctype html>
<html>
  <head>
    <title>HTML Sub Tag Lab</title>
  </head>
  <body></body>
</html>

Add the sub tag

Add the following code inside the <body> element to create a subscripted text.

<p>My chemical formula is H<sub>2</sub>O.</p>

This code will display the text "My chemical formula is H2O", where "2" will be displayed as a subscript.

Save the index.html file and open it in a web browser to view the output. You should see the subscripted text "H2O".

Summary

In this lab, you learned how to use the <sub> tag in HTML to display subscripted text. This is useful for displaying chemical formulas and other types of text that require a lowered baseline. By following the steps outlined in this lab, you can easily add the <sub> tag to your HTML code and create subscripted text.

HTML Subscript Text

Introduction

Skills Graph

Add the HTML boilerplate

Add the sub tag

Summary

Other HTML Tutorials you may like