Znacznik <i> w HTML służy do oznaczania fragmentu tekstu pisanego kursywą, jednak zrozumienie jego zastosowania wymaga poznania zarówno semantyki tego elementu, jak i przykładów praktycznych.
Co to jest <i> w HTML?
Znacznik <i> (od ang. italic) sprawia, że zawarty w nim tekst wyświetla się pochyloną czcionką, najczęściej jako kursywa. Obecnie jednak jego rola nie ogranicza się wyłącznie do stylu – jest to element semantyczny, który oznacza fragmenty tekstu o innym głosie, tonie lub technicznie wydzielone, ale niekoniecznie wyjątkowo ważne. Typowe zastosowania to między innymi: wyrażenia obcojęzyczne, nazwy gatunków, terminy techniczne, myśli wewnętrzne w prozie czy cytaty tytułów książek.
W praktyce wygląd uzyskiwany poprzez <i> jest taki sam jak dla CSS-owego font-style: italic, ale sens użycia jest inny – w przypadku stylizacji bez określonego znaczenia zaleca się raczej CSS.
Budowa i działanie znacznika <i>
Kod znacznika otwierającego i zamykającego wygląda następująco:
<i>Treść do wyświetlenia kursywą</i>Przykład podstawowy –
<p>Tytuł książki to <i>Wiedźmin</i>.</p>Efekt:
Tytuł książki to Wiedźmin.
Przykłady zastosowania
Poniżej kilka praktycznych przykładów użycia <i> zgodnie ze współczesną semantyką HTML:
- Wyrażenie obcojęzyczne –;
<p>Łacińska sentencja: <i>Carpe diem</i> oznacza "Chwytaj dzień".</p>- Termin techniczny lub skrót –;
<p>Błąd typu <i>NullPointerException</i> występuje w Javie, gdy...</p>- Nazwy organizmów w nomenklaturze naukowej –;
<p>Gatunek <i>Panthera leo</i> to lew.</p>- Tytuły dzieł sztuki, książek, filmów, prasy –;
<p>Artykuł ukazał się w magazynie <i>Nature</i>.</p>- Wtrącenia myślowe bohatera –.
<p>To był trudny dzień, pomyślała <i>muszę odpocząć</i>.</p>Znacznik <i> a CSS oraz inne znaczniki
- Jeśli chcesz wyłącznie wystylizować tekst (pochylić bez semantycznego wyróżnienia), lepiej użyć CSS:
.kursywa { font-style: italic; }<span class="kursywa">Tekst pochylony przez CSS</span>- Do oznaczania silnego akcentu (ważności, a nie innej roli gramatycznej) służy
<em>
<em>Ważny tekst</em>która domyślnie również wyświetla tekst kursywą, ale ma inną semantykę (akcent emocjonalny).
Podsumowanie: kiedy używać <i>?
Zastosuj <i> gdy musisz oznaczyć tekst jako wyróżniony ze względu na inne znaczenie, rolę lub odrębność – nie tylko dla stylizacji. Dzięki temu Twoja strona będzie bardziej semantyczna i dostępna dla użytkowników oraz botów (np. czytników ekranu).
Najważniejsze cechy <i> –
- Wyświetla tekst kursywą,
- oznacza fragment tekstu o specjalnym znaczeniu, odróżniającym go od reszty,
- współczesne zastosowanie jest przede wszystkim semantyczne, nie tylko wizualne,
- najczęstsze użycie: cytaty tytułów, wyrazy obcojęzyczne, techniczne zwroty, myśli wewnętrzne.
Przy projektowaniu nowoczesnych stron internetowych korzystaj ze znacznika <i> świadomie – pomoże to utrzymać wysoką jakość, czytelność i dostępność Twojej treści.
