Jak na stronie dodać indeks Górny i/lub Dolny w HTML i/lub CSS?

W języku skryptowym HTML jak i w CSS bardzo łatwo uzyskać efekt mniejszego tekstu u góry (indeks górny <sup>) lub dołu normalnego (indeks dolny <sub>). Chodzi np. o mały numerek (np. symbol do kwadratu) lub gwiazdkę na końcu akapitu lub w jego ciągu.

Indeksy z pomocą HTML

Na początek jak zwykle zaczniemy podstaw czyli HTML.

Indeks górny HTML <sup>

Indeks górny (mniejszy tekst z boku normalnego umiejscowiony u góry) uzyskać można poprzez zastosowanie elementu <sup> ( z języka angielskiego „superscript” czyli indeks górny).

przykład:

Przykładowy tekst ^{indeks górny}

Przykładowy tekst <sup>indeks górny</sup>

Indeks dolny HTML <sub>

Indeks dolny uzyskujemy poprzez zastosowanie elementu <sub> (z języka angielskiego „subscript” czyli indeks dolny).

przykład:

Przykładowy tekst _{indeks dolny}

Przykładowy tekst <sub>indeks dolny</sub>

Indeks górny i dolny w CSS – vertical-align

Jak większość znaczników HTML także i indeksy posiadają swoje wersje CSS.

Przykładowe klasa CSS:

.indexgorny {vertical-align: super;} // indeks górny
.indexdolny {vertical-align: sub;} // indeks dolny

Przykładowy tekst indeks górny

Przykładowy tekst indeks dolny

W HTML zapisujemy to następująco

Przykładowy tekst <span class="indexgorny">indeks górny</span>
Przykładowy tekst <span class="indexdolny">indeks dolny</span>

Efekt użycia w obu przypadkach jest praktycznie identyczny, a to który zostanie zastosowany zależy od naszych preferencji lub edytora tekstu z którego korzystamy.

Dodatkowe tagi:
index górny html i index dolny html lub CSS co warto wiedzieć
co warto wiedzieć i co to jest sub lub sup
indeksy CSS
mały teks u góry, na dole, poniżej, z boku