Poznaj Programowanie

Tagi HTML: i

Piotr Grochal 6 min. czytania

Tag <i> to jeden z podstawowych elementów HTML służących do oznaczania treści pisanej kursywą oraz do wyróżnień wynikających z konwencji typograficznych. W tym wpisie przejdziesz od podstaw i semantyki, przez atrybuty, aż po praktyczne i zaawansowane użycia w połączeniu z CSS i JavaScript.

Czym jest tag <i> – podstawy i ewolucja

Tag <i> (od “italic”) historycznie wywoływał kursywę i był elementem prezentacyjnym. W HTML5 zyskał znaczenie semantyczne – służy do treści, które zgodnie z konwencją zapisuje się kursywą (np. obce słowa, nazwy statków, gatunki, onomatopeje).

Według specyfikacji <i> nie służy do akcentowania emocji ani ważności (do tego jest <em>), a do samej stylizacji używaj CSS. Tag <i> jest liniowy (inline), więc nie przerywa ciągu tekstu i zajmuje tylko tyle miejsca, ile jego zawartość.

Przykład podstawowy – prosta kursywa:

<p>To jest zwykły tekst, a <i>to jest kursywą</i>.</p>

Wynik: To jest zwykły tekst, a to jest kursywą.

Różnica między <i> a <em> polega na tym, że <em> wprowadza akcent semantyczny (wyczuwalny np. dla czytników ekranu), a <i> realizuje konwencję typograficzną.

Kluczowe atrybuty tagu <i>

Tag <i> wspiera globalne atrybuty HTML, takie jak id, class, style, title czy lang. Nie ma swoich unikalnych atrybutów, ale w praktyce łączysz go z globalnymi dla większej kontroli. W praktyce najczęściej użyjesz:

  • class i id – do stylizacji CSS lub manipulacji w JavaScript;
  • style – szybkie nadpisanie stylu w linii (warto ograniczać do prototypów);
  • title – krótki podpowiednik po najechaniu kursorem;
  • lang – oznaczanie fragmentu w obcym języku, np. <i lang="la">Veni, vidi, vici</i>.

Przykład z atrybutami:

<i id="podkreslony" class="ikona" title="Nazwa statku" style="color: blue;">Titanic</i>

Praktyczne przykłady użycia <i> w HTML

1. semantyczna kursywa w tekście

Używaj <i> do utrzymania konwencji typograficznych w treści:

<p>Statek <i>SS California</i> zatonął w 1915 roku.</p>
<p>Dźwięk: <i>meow</i> kota.</p>
<p>Słowo obce: <i>bonjour</i> (fr.)</p>

Takie oznaczenia poprawiają czytelność i porządkują strukturę dokumentu.

2. <i> jako kontener dla ikon (Font Awesome i inne)

W codziennej pracy <i> bywa używany razem z fontami ikon (np. Font Awesome, Bootstrap Icons). To historycznie popularna praktyka – pod względem semantyki <i> i <span> są zbliżone, a dostępność zapewniają atrybuty ARIA.

Instalacja Font Awesome przez CDN (w <head>):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

Przykład przycisków z ikonami:

<button><i class="fas fa-heart" aria-hidden="true"></i> Lubię to</button>
<button><i class="fas fa-trash" aria-hidden="true"></i> Usuń</button>

Wynik: ikony pojawią się przed tekstem przycisków.

3. responsywne ikony z CSS

Połącz <i> z klasami CSS, by skalować ikony na różnych urządzeniach:

.ikona-mala { font-size: 1em; }
.ikona-duza { font-size: 2em; }
@media (max-width: 600px) {
.ikona-duza { font-size: 1.5em; }
}

A następnie użyj w HTML:

<i class="fas fa-bars ikona-duza" aria-label="Menu"></i>

Zaawansowane techniki: CSS i JavaScript z <i>

Stylizacja CSS dla <i>

Nie ograniczaj się do domyślnej kursywy – w razie potrzeby nadpisz style:

i {
font-style: italic; /* domyślne */
color: #666;
font-weight: 500;
}
i.klasa-specjalna {
font-style: normal; /* wyłącza kursywę */
font-family: "Font Awesome 6 Free";
}

Przykład galerii ikon:

<div class="galeria">
<i class="fas fa-home" title="Strona główna" aria-hidden="true"></i>
<i class="fas fa-user" title="Profil" aria-hidden="true"></i>
</div>

A taki CSS doda animację hover:

.galeria i {
display: inline-block;
margin: 10px;
transition: transform 0.3s, color 0.3s;
}
.galeria i:hover {
transform: scale(1.2);
color: red;
}

Interakcja z JavaScript

Dynamicznie zmieniaj ikonę, np. przełączanie stanu „ulubione”:

<button id="lajk">
<i class="far fa-heart" id="ikonka" aria-label="Dodaj do ulubionych"></i> Lubię
</button>

Skrypt przełączający klasę:

document.getElementById('lajk').addEventListener('click', function() {
const ikona = document.getElementById('ikonka');
if (ikona.classList.contains('far')) {
ikona.classList.remove('far');
ikona.classList.add('fas');
ikona.setAttribute('aria-label', 'Usuń z ulubionych');
} else {
ikona.classList.remove('fas');
ikona.classList.add('far');
ikona.setAttribute('aria-label', 'Dodaj do ulubionych');
}
});

Po kliknięciu ikona zmienia się z pustego na pełne serce – idealny wzorzec interakcji w UI.

Najczęstsze błędy i dobre praktyki

Oto lista rzeczy, na które warto zwrócić uwagę podczas pracy z <i>:

  • używanie <i> zamiast <em> – <em> służy do akcentu semantycznego, a <i> do konwencji typograficznych;
  • ikony bez opisu – dodaj aria-label (gdy ikona niesie informację) lub title jako podpowiedź;
  • ikony dekoracyjne czytane przez screen readery – dodaj aria-hidden="true", aby pominąć je w nawigacji asystującej;
  • SEO i semantyka – stosuj <i> zgodnie z przeznaczeniem, a do stylizacji używaj CSS;
  • responsywność – testuj rozmiar i czytelność ikon w media queries, bo font-ikony skalują się inaczej niż tekst.

Porównanie tagów do kursywy/ikon:

Tag Semantyka Typowe użycie Przykład
<i> Konwencja typograficzna (kursywa), symbole/ikony fontowe Nazwy, obce słowa, onomatopeje, piktogramy <i>meow</i>
<em> Akcent semantyczny Podkreślenie ważności w zdaniu <em>naprawdę</em>
<span> Neutralny kontener Dowolna stylizacja (CSS), alternatywa dla ikon z rolami ARIA <span class="ikona">★</span>