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

Czas czytania: < 1 minut

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. Wykorzystać to można do dodawania np. potęgi, dodawania symbolu „stopnia” przy temperaturze.

Indeksy z pomocą HTML – jak je zrobić?!

Na początek jak zwykle zaczniemy podstaw czyli HTML. Poznamy więc 2 znaczniki, które domyślnie dadzą nam możliwość zmiany wyglądu elementów wewnątrz nich. Jeden z nich sprawi, że tekst znajdzie się u góry a drugi u dołu.

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>

Skoro już wiemy co robi <sup> przejdziemy do kolejnego typu indexu.

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