Lekcja 3.5: Indeks górny i dolny (<sup>, <sub>)
Indeksy górne i dolne w HTML
W HTML istnieją dwa znaczniki służące do tworzenia indeksów: <sup> (indeks górny) i <sub> (indeks dolny). Są one używane do formatowania tekstu, który powinien być wyświetlany odpowiednio powyżej lub poniżej normalnej linii tekstu, zazwyczaj mniejszą czcionką.
Znacznik <sup> (indeks górny)
Znacznik <sup> (od angielskiego "superscript") służy do tworzenia indeksu górnego - tekstu, który jest wyświetlany powyżej normalnej linii tekstu i zazwyczaj mniejszą czcionką.
<p>Wzór na pole koła: A = πr<sup>2</sup></p>
<p>Woda: H<sub>2</sub>O</p>Wzór na pole koła: A = πr2
Woda: H2O
Typowe zastosowania znacznika <sup>:
- Potęgi w matematyce: x2, 103
- Przypisy i odnośniki: Zobacz przypis1
- Oznaczenia stopni: 25°C, 90°
- Znaki towarowe: Microsoft®, TradeMark™
- Liczebniki porządkowe w językach obcych: 1st, 2nd, 3rd
Znacznik <sub> (indeks dolny)
Znacznik <sub> (od angielskiego "subscript") służy do tworzenia indeksu dolnego - tekstu, który jest wyświetlany poniżej normalnej linii tekstu i zazwyczaj mniejszą czcionką.
<p>Wzór chemiczny wody: H<sub>2</sub>O</p>
<p>Wzór na logarytm: log<sub>a</sub>(x)</p>Wzór chemiczny wody: H2O
Wzór na logarytm: loga(x)
Typowe zastosowania znacznika <sub>:
- Wzory chemiczne: H2O, CO2
- Indeksy w matematyce: xi, a1
- Podstawy logarytmów: log10
- Zmienne w fizyce: v0 (prędkość początkowa)
Łączenie indeksów górnych i dolnych
Możliwe jest łączenie indeksów górnych i dolnych, aby tworzyć bardziej złożone wyrażenia, szczególnie w matematyce i naukach ścisłych.
<p>Wzór na sumę: Σ<sub>i=1</sub><sup>n</sup> x<sub>i</sub></p>Wzór na sumę: Σi=1n xi
Zagnieżdżanie indeksów
Można również zagnieżdżać indeksy, aby tworzyć bardziej złożone wyrażenia, choć należy to robić z umiarem, aby zachować czytelność.
<p>Złożona potęga: (x<sup>2</sup>)<sup>3</sup> = x<sup>6</sup></p>
<p>Złożony indeks: a<sub>i<sub>j</sub></sub></p>Złożona potęga: (x2)3 = x6
Złożony indeks: aij
Alternatywy dla indeksów
Chociaż znaczniki <sup> i <sub> są standardowymi sposobami tworzenia indeksów w HTML, istnieją również inne metody:
CSS
Można użyć CSS do tworzenia indeksów za pomocą właściwości vertical-align:
<span style="vertical-align: super; font-size: smaller;">indeks górny</span>
<span style="vertical-align: sub; font-size: smaller;">indeks dolny</span>MathML
Dla bardziej złożonych wyrażeń matematycznych, lepszym rozwiązaniem może być użycie MathML lub bibliotek takich jak MathJax:
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>Najlepsze praktyki używania indeksów
- Używaj indeksów zgodnie z ich przeznaczeniem semantycznym -
<sup>dla indeksów górnych,<sub>dla indeksów dolnych. - Unikaj nadmiernego zagnieżdżania indeksów, które może prowadzić do problemów z czytelnością.
- Dla złożonych wyrażeń matematycznych rozważ użycie specjalistycznych narzędzi jak MathJax.
- Pamiętaj o dostępności - upewnij się, że treść jest zrozumiała nawet bez wizualnego formatowania.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz stronę HTML zawierającą wzory matematyczne i chemiczne, używając znaczników <sup> i <sub>.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Wzory Matematyczne i Chemiczne</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
}
.formula {
margin: 15px 0;
font-size: 18px;
}
h2 {
color: #2c3e50;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
</style>
</head>
<body>
<h1>Wzory Matematyczne i Chemiczne</h1>
<h2>Wzory Matematyczne</h2>
<div class="formula">
<p><strong>Wzór na pole koła:</strong> A = πr<sup>2</sup></p>
</div>
<div class="formula">
<p><strong>Wzór na objętość sześcianu:</strong> V = a<sup>3</sup></p>
</div>
<div class="formula">
<p><strong>Wzór na logarytm:</strong> log<sub>a</sub>(x) = y oznacza, że a<sup>y</sup> = x</p>
</div>
<div class="formula">
<p><strong>Wzór na sumę ciągu:</strong> S = Σ<sub>i=1</sub><sup>n</sup> a<sub>i</sub></p>
</div>
<h2>Wzory Chemiczne</h2>
<div class="formula">
<p><strong>Woda:</strong> H<sub>2</sub>O</p>
</div>
<div class="formula">
<p><strong>Dwutlenek węgla:</strong> CO<sub>2</sub></p>
</div>
<div class="formula">
<p><strong>Kwas siarkowy:</strong> H<sub>2</sub>SO<sub>4</sub></p>
</div>
<div class="formula">
<p><strong>Glukoza:</strong> C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
</div>
<h2>Przypisy</h2>
<p>Według badań<sup>1</sup>, regularne ćwiczenia poprawiają zdrowie.</p>
<p><sup>1</sup> Smith, J. (2025). Wpływ ćwiczeń na zdrowie. Journal of Health, 45(2), 112-120.</p>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz stronę z równaniami kwadratowymi, używając
<sup>i<sub>do formatowania zmiennych i wykładników. - Utwórz tabelę okresową pierwiastków (lub jej fragment), używając
<sub>do oznaczania liczb atomowych. - Napisz tekst z przypisami, używając
<sup>do oznaczania odnośników do przypisów na dole strony. - Stwórz przykład reakcji chemicznej z użyciem indeksów górnych i dolnych.
Najczęściej zadawane pytania
Do czego służą znaczniki <sup> i <sub>?
Znacznik <sup> służy do tworzenia indeksu górnego (tekst wyświetlany powyżej linii), używanego np. w potęgach, przypisach czy znakach towarowych. Znacznik <sub> tworzy indeks dolny (tekst poniżej linii), stosowany we wzorach chemicznych czy indeksach matematycznych.
Czy można zagnieżdżać indeksy górne i dolne?
Tak, można zagnieżdżać indeksy, np. <sup><sup>tekst</sup></sup>, ale należy to robić z umiarem, gdyż nadmierne zagnieżdżanie może prowadzić do problemów z czytelnością i renderowaniem w przeglądarkach.
Jak stworzyć złożone wyrażenie matematyczne w HTML?
Dla prostych wyrażeń wystarczą znaczniki <sup> i <sub>. Dla bardziej złożonych formuł lepiej użyć MathML lub bibliotek jak MathJax, które oferują lepsze wsparcie dla notacji matematycznej i są bardziej dostępne.
Czy można stylizować indeksy za pomocą CSS?
Tak, indeksy można stylizować za pomocą CSS, np. zmieniając ich rozmiar, kolor czy odstępy. Można też tworzyć indeksy za pomocą CSS używając właściwości vertical-align: super; lub vertical-align: sub; zamiast znaczników HTML.
Czy indeksy wpływają na SEO?
Same indeksy mają minimalny wpływ na SEO. Jednak używanie ich do poprawnego formatowania treści naukowych czy technicznych może poprawić użyteczność strony, co pośrednio może wpłynąć pozytywnie na SEO poprzez lepsze doświadczenie użytkownika.