jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-18 16:01:35 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to sup & sub elements lesson (#62701)

Browse Source
This commit is contained in:
Giftea ☕
2025-10-10 22:08:08 +01:00
committed by GitHub
parent 747b1ebebd
commit a124dd0aea
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md
View File

@@ -5,26 +5,34 @@ challengeType: 19
dashedName: how-do-you-display-mathematical-equations-and-chemical-formulas-in-html
---
# --description--
# --interactive--
The superscript element is used to display a piece of text as a superscript. A superscript is a symbol or letter printed above the normal line of text.
Here is an example using the superscript element to illustrate exponents:
:::interactive_editor
```html
<p>2<sup>2</sup> (2 squared) is 4.</p>
```
In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the browser, you would see that the second number 2 is smaller and slightly higher than the first number 2.
:::
In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the preview window, you will see that the second number 2 is smaller and slightly higher than the first number 2.
Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering:
:::interactive_editor
```html
<p>
Monseigneur is often written as <strong>M<sup>gr</sup></strong>.
</p>
```
:::
Superior lettering refers to letters written in superscript, usually to indicate abbreviations. The letters `g` and `r` are wrapped inside superscript tags to illustrate the abbreviation in this example.
It is important to note that the superscript element should only be used for typographical reasons. If you want style a piece of text with a raised baseline, then you should use CSS instead of the superscript element.
@@ -33,10 +41,14 @@ To represent chemical equations inside HTML, you would use the subscript element
Here is an example of using the subscript element to show the chemical representation for carbon dioxide.
:::interactive_editor
```html
<p>CO<sub>2</sub></p>
```
:::
The number two is wrapped inside `sub` tags to illustrate that the character should be a subscript.
Common use cases for the subscript element include chemical formulas, footnotes, and variable subscripts.