Poznaj Programowanie

Tagi HTML: sub

Piotr Grochal 5 min. czytania

Tag <sub> — indeks dolny w HTML

Tag <sub> służy do reprezentacji indeksu dolnego (subscript) — pomniejszonego tekstu przesuniętego w dół względem linii bazowej.

Używaj go, gdy indeks dolny jest częścią znaczenia (semantyki) zapisu, a nie jedynie efektem wizualnym.

Składnia i podstawowe użycie

Podstawowa składnia wygląda następująco:

<sub>Zawartość</sub>

Element wymaga tagu otwierającego i zamykającego — wszystko pomiędzy nimi zostanie wyrenderowane jako indeks dolny.

Praktyczne przykłady zastosowania

Wzory chemiczne

Do zapisu liczby atomów w cząsteczce użyj indeksu dolnego:

<p>Wzór chemiczny wody: H<sub>2</sub>O</p>

Wynik: Wzór chemiczny wody: H₂O

Inny przykład — amoniak:

<p>Amoniak ma wzór: NH<sub>3</sub></p>

Wyrażenia matematyczne

Indeks dolny stosuj m.in. dla zmiennych indeksowanych (ciągi, macierze):

<p>Sekwencja: x<sub>n</sub> + y<sub>n</sub></p>
<p>Element macierzy: a<sub>ij</sub></p>

Wynik: xₙ + yₙ, aᵢⱼ

Uwaga: dla potęg używaj <sup> (indeks górny), np. E = mc², a nie indeksu dolnego.

Przypisy i referencje

Dla przypisów i odsyłaczy stosuj raczej indeks górny:

<p>Przykład przypisu<sup>1</sup></p>

Opisy techniczne i specjalistyczne

W dokumentacji technicznej indeks dolny często opisuje parametry lub warianty zmiennych:

<p>Parametr V<sub>max</sub> określa maksymalną prędkość.</p>
<p>Stała Plancka to h = 6.626 × 10<sup>-34</sup> J·s</p>

Semantyka vs. prezentacja

Stosuj <sub> wyłącznie wtedy, gdy brak indeksu dolnego zmienia sens zapisu (np. wzory chemiczne, notacje matematyczne).

Dla rozbudowanych wzorów matematycznych lepszym wyborem jest MathML, zamiast łączenia <sub> i <sup>.

Stylowanie CSS

Domyślne style przeglądarki możesz dostosować. Minimalna konfiguracja wygląda tak:

sub { vertical-align: sub; font-size: smaller; }

Najczęściej modyfikowane właściwości to:

  • font-size – zmiana rozmiaru czcionki;
  • vertical-align – dostosowanie wyrównania pionowego;
  • color – zmiana koloru tekstu;
  • font-family – wybór czcionki.

Przykład niestandardowego stylowania w kontekście strony:

<!DOCTYPE html>
<html>
<head>
<style>
sub { color: darkblue; font-size: 0.85em; font-weight: bold; }
</style>
</head>
<body>
<h2>Wzór chemiczny</h2>
<p>Kwas siarkowy: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>

Kontekst użycia w DOM

Element <sub> jest elementem liniowym (inline), co oznacza, że:

  • elementy nadrzędne – może być umieszczony wewnątrz dowolnych elementów zawierających treść frazową;
  • elementy potomne – może zawierać inną treść frazową (np. linki, wyróżnienia);
  • interfejs DOM – reprezentuje standard HTMLElement;

Oto kilka miejsc, w których możesz go poprawnie umieścić:

<p>Wartość to V<sub>in</sub> = 2.5V</p>
<h2>Parametr K<sub>d</sub> wynosi 10<sup>-3</sup></h2>
<li>Wzór: <strong>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></strong></li>

Komplementarny tag <sup> — indeks górny

<sup> reprezentuje indeks górny (superscript) i często występuje w parze z <sub>:

<p>E = mc<sup>2</sup></p>
<p>Pierwiastek z liczby: 5<sup>2</sup> = 25</p>

Przykłady łącznego użycia:

<p>Woda ciężka: <sup>2</sup>H<sub>2</sub>O</p>
<p>Notacja naukowa: 3.14 × 10<sup>-8</sup></p>

Dostępność i SEO

Prawidłowe, semantyczne użycie <sub> poprawia strukturę dokumentu i bywa lepiej interpretowane przez czytniki ekranu, choć nie wpływa bezpośrednio na SEO.

Alternatywy — MathML

W przypadku złożonych wyrażeń matematycznych zastosuj MathML dla pełnej kontroli nad renderowaniem:

<math xmlns="http://www.w3.org/1998/Math/MathML">
<msub>
<mi>x</mi>
<mn>1</mn>
</msub>
</math>

Podsumowanie praktyk

Poniżej znajdziesz skrótowe zestawienie właściwych i niewłaściwych zastosowań:

Zastosowanie Przykład Właściwe
Wzory chemiczne H<sub>2</sub>O ✓ Tak
Matematyka x<sub>n</sub> ✓ Tak
Przypisy Tekst<sup>1</sup> ✓ Tak (z <sup>)
Czysta dekoracja Ver<sub>sja</sub> 2 ✗ Nie
Zaawansowana matematyka Wielowarstwowe ułamki ⚠ Rozważ MathML

Najlepsze praktyki

Stosuj poniższe wskazówki, aby używać <sub> poprawnie i konsekwentnie:

  1. stosuj <sub> semantycznie – tylko wtedy, gdy indeks dolny zmienia znaczenie;
  2. łącz z <sup> – gdy jednocześnie potrzebujesz indeksu górnego i dolnego;
  3. nie nadużywaj stylowania – domyślne style przeglądarki zwykle wystarczają;
  4. rozważ alternatywy – dla złożonych wzorów matematycznych użyj MathML;
  5. testuj dostępność – sprawdzaj, jak indeksy są czytane przez czytniki ekranu.