Jaki efekt wizualny nadaje znacznik w HTML?

Znacznik <i> w HTML nadaje tekstowi efekt wizualny kursywy (pochylenia tekstu w prawo), co sprawia, że wyróżniony fragment jest wyraźnie odróżniony od reszty zawartości strony. Efekt ten jest analogiczny do formatowania „italic” stosowanego w procesorach tekstu.

Szczegółowy opis działania znacznika <i>

• Efekt wizualny – zamknięty tekst w znaczniku <i> wyświetla się kursywą, co oznacza, że litery są pochylone i lekko stylizowane. Przykład użycia;

Ten fragment <i>zostanie wyświetlony kursywą</i> na stronie.

• Wygląd – przeglądarki internetowe standardowo interpretują <i> jako instrukcję do wyświetlenia fragmentu tekstu pochyloną czcionką, bez dodatkowej zmiany koloru, rozmiaru lub innego atrybutu.

Znaczenie semantyczne

• HTML5 wprowadził spójniejsze rozróżnienie pomiędzy znacznikami semantycznymi a prezentacyjnymi. <i> jest uznawany za znacznik prezentacyjny, co oznacza, że koncentruje się przede wszystkim na wyglądzie, bez przekazywania dodatkowej informacji o ważności czy znaczeniu fragmentu tekstu.
• Warto odróżnić go od znacznika <em>, który również pochyla tekst, ale podkreśla akcent albo szczególne znaczenie fragmentu w kontekście zdania.

Przykłady zastosowania znacznika <i>

Poniżej prezentowane są praktyczne sytuacje, w których użycie <i> jest zgodne z dobrymi praktykami webdesignu:

• Wyrazy obcojęzyczne i terminy specjalistyczne –

W języku polskim używamy pojęcia <i>status quo</i>, by wskazać zastany stan rzeczy.

• Nazwy utworów lub dzieł sztuki –

Mój ulubiony obraz to <i>Gwiazda wieczorna</i> Wyspiańskiego.

• Fragmenty dialogów, myśli wewnętrznych lub cytatów –

Pomyślał: <i>Muszę spróbować jeszcze raz</i>.

• Ikony i piktogramy – w niektórych bibliotekach ikon (np. Font Awesome), <i> wykorzystywany jest do wstawiania ikon, np.;

<i class="fa fa-search"></i>

Uwagi dotyczące dostępności i właściwego użycia

• Nie należy stosować <i> do wyróżnienia fragmentu wyłącznie pod kątem sensu lub ważności – do tego lepiej służy znacznik <em>;
• Użycie <i> sugeruje, że dana część tekstu powinna wizualnie odróżniać się od reszty, ale nie niesie samodzielnej wartości semantycznej,
• Technologia asystująca (np. czytniki ekranu) nie przypisuje tekstowi w <i> innego znaczenia niż prezentacja, podczas gdy <em> jest interpretowane jako treść z zaakcentowanym znaczeniem.

Podsumowanie różnic

Stosując <i>, skupiamy się na wizualnym wyróżnieniu tekstu kursywą, natomiast decyzja o użyciu powinna zależeć od tego, czy wyróżnienie wynika tylko z chęci zmiany wyglądu, czy też z potrzeby przekazania użytkownikowi dodatkowego znaczenia.