Znacznik <i> w HTML to element służący do wyróżniania fragmentów tekstu poprzez zastosowanie pisma pochylonego (kursywy). Jednak jego rola nie ogranicza się jedynie do zmiany wyglądu – ma on również znaczenie semantyczne, czyli określa dodatkowy sens lub kontekst dla przeglądarek, wyszukiwarek i technologii asystujących.
Czym jest <i>?
- Wygląd – treść ujęta w znacznik
<i>domyślnie wyświetlana jest kursywą (italikiem); - Znaczenie semantyczne – współczesne standardy HTML opisują ten znacznik jako przeznaczony do “innego głosu lub klimatu”, a nie tylko arbitralnego pochylania tekstu. Powinien być używany do wydzielenia fragmentów tekstu, które mają odmienny ton, są terminami technicznymi, obcojęzycznymi słowami, nazwami własnymi, cytatami lub potocznościami.
Przykłady użycia <i>
- Wyrażenia obcojęzyczne i pojęcia techniczne –
W języku polskim słowo <i>status quo</i> oznacza „aktualny stan”. - Terminy naukowe lub specjalistyczne –
Bakterie z rodzaju <i>Staphylococcus</i> mogą powodować zakażenia. - Nazwy własne (tytuły książek, filmów, dzieł sztuki) –
Lubię czytać <i>Władcę Pierścieni</i>. - Frazy idiomatyczne, potoczne, cytaty dialogowe –
Powiedział mi tylko jedno słowo: <i>carpe diem</i>. - Nazwy klas, komend, zmiennych w tekstach programistycznych –
Użyj funkcji <i>print()</i>, aby wyświetlić tekst. Kiedy nie używać <i>
- Do czystego formatowania – jeśli chcesz po prostu pochylić tekst ze względów estetycznych, lepiej użyj CSS (np.
font-style: italic;). Znacznik<i>ma sens, kiedy treść rzeczywiście wymaga “innego głosu” lub kontekstu; - Aby wskazać akcentację semantyczną – jeśli celem jest zaznaczenie istotności treści, zamiast
<i>należy użyć<em>, który również wyświetla tekst kursywą, ale wyraża akcent semantyczny (nacisk) nad daną informacją.
Różnica względem innych znaczników
| Znacznik | Efekt wizualny | Znaczenie semantyczne | Przykładowe zastosowanie |
|---|---|---|---|
<i> |
Kursywa | Inny głos, termin, cytat, tytuł | Wyrażenia obcojęzyczne, terminologia |
<em> |
Kursywa | Akcentowanie, podkreślenie sensu | Podkreślenie ważnych fragmentów |
<b> |
Pogrubienie | Brak, czysto wizualne wyróżnienie | Wyróżnienia stylistyczne, nie semant. |
<strong> |
Pogrubienie | Silne zaakcentowanie, istotność informacji | Bardzo ważne komunikaty |
Najważniejsze wskazówki
- Stosuj
<i>tylko tam, gdzie wyróżnienie wynika z kontekstu lub stylu wypowiedzi, a nie dla zwykłego efektu wizualnego. - Zawsze dbaj o dostępność – czytelnik korzystający z czytników ekranu powinien rozumieć, dlaczego dany fragment jest wyróżniony.
- Techniki CSS traktuj jako uzupełnienie, nie zamiennik poprawnej semantyki.
Prawidłowe i świadome użycie znacznika <i> wpływa nie tylko na estetykę strony, ale też ułatwia odczyt i interpretację treści osobom korzystającym z narzędzi wspomagających oraz algorytmom wyszukiwarek.
