All language subtitles for 11 - Superscripts, subscripts, and small text.en

- Let's talk about another situation

where you need to mark up certain bits of content

as having a different meaning than the rest.

Subscripts, superscripts, and small text.

Subscripts are characters that are set

below the normal baseline for text.

Did you ever take a chemistry class

and learn how to write the formula for water, H2O,

where the two is lowered down

than the H and the O?

The two character is typeset as a subscript.

It's set lower down.

Superscripts are characters that are set

above the normal baseline of text.

Mathematical formulas have lots of superscripts,

like five squared.

Or in footnotes, the little marker for a footnote

is a superscript.

To mark up subscripts and superscripts,

we'll use the sub and sup elements.

H2O looks wrong like this.

I'll wrap the two in its sub-element,

and now it drops down below the baseline

and gets a little smaller.

Next, let's format this number for the footnote.

If we wrap the little two in sup for superscript,

now it jumps up higher and gets a little smaller.

That makes more sense.

This is how to handle subscripts and superscripts

in HTML with the sub and sup elements.

You can use these in math as well.

Although if you are putting complex equations on a website,

you should look into MathML.

It's a specialized markup language for math,

and it's more powerful than what HTML can do.

The other situation that we find ourselves in,

we often need a way to mark something as fine print,

small stuff that's not important

but still needs to be there.

Copyright information is an example

or other content that might be tossed

into the footer on the bottom of a page.

We could wrap it in a paragraph element,

but if we want the browser to know

that this has very little prominence,

it's small in its level of importance,

we can mark it up with a small element.

Now, we don't use small because we just want to make

a certain passage of text smaller.

We use CSS to adjust the size of text

to be any size that we want, large or small.

It is correct, however, to mark text

that has a small meaning.

Just like you use strong to mark something

that has a lot of importance,

you can use small to convey

that something has very little prominence.

The fine print at the bottom of a page

regarding ownership of the content is a great example.

It's not that we want this text to go away.

We can just simply tell the browser,

"Hey, this is the fine print.

"It's not the main attraction."

Small, sub, and sup are the elements

that can help you get the details right

when it comes to typography and conveying

the full meaning of your content.