<i>
Tekst w innym tonie lub głosie: obce wyrażenia, nazwy łacińskie, myśli bohatera, terminy techniczne.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p>Każda zmiana w kodzie przechodzi u nas <i lang="en">code review</i>.</p>
<p>Spojrzała na czerwony komunikat w konsoli. <i>Przecież wczoraj działało</i>, pomyślała.</p>Definicja i zastosowanie
#Element <i> oznacza fragment, który różni się od reszty tekstu tonem lub charakterem: obce wyrażenie, łacińską nazwę gatunku, termin techniczny, nazwę statku albo myśli bohatera. Przeglądarki wyświetlają go kursywą.
W odróżnieniu od <em> nie dodaje akcentu i nie zmienia sensu zdania. Tytuły dzieł oznaczaj za pomocą <cite>, a termin definiowany w zdaniu za pomocą <dfn>.
Obcojęzycznym wyrażeniom dodawaj globalny atrybut lang, np. <i lang="en">code review</i>. Czytnik ekranu przeczyta je wtedy z właściwą wymową.
Wiele bibliotek ikon używa <i> do wstawiania ikon. To działa, ale znaczeniowo jest nadużyciem. Lepiej sprawdzi się <span> z atrybutem aria-hidden="true".
Składnia
#<i>tekst w innym tonie</i>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
i {
font-style: italic;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Obcojęzycznym zwrotom dodawaj
lang, żeby czytnik ekranu przeczytał je poprawnie. - Nie wstawiaj ikon przez
<i>. Użyj<span aria-hidden="true">albo obrazka SVG z opisem. - Jeśli fragment trzeba wymówić z naciskiem, bo zmienia sens zdania, wybierz
<em>.
Powiązane hasła
#- <em>Akcent w zdaniu: słowo, które przy czytaniu na głos wymawia się z naciskiem.
- <b>Przyciąga uwagę do fragmentu tekstu bez nadawania mu większej wagi, np. do słów kluczowych.
- <cite>Tytuł dzieła: książki, artykułu, filmu, piosenki, gry albo programu.
- <dfn>Termin definiowany w tym miejscu tekstu, czyli pierwsze, objaśniające użycie pojęcia.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.