Lekcja 3.2: Kursywa (<i>, <em>)
Pochylanie tekstu w HTML
W HTML istnieją dwa główne znaczniki służące do pochylania tekstu (tworzenia kursywy): <i> i <em>. Podobnie jak w przypadku pogrubiania tekstu, te dwa znaczniki dają podobny efekt wizualny, ale mają różne znaczenie semantyczne i zastosowanie.
Znacznik <i>
Znacznik <i> (od angielskiego "italic") służy do wizualnego pochylenia tekstu bez nadawania mu dodatkowego znaczenia emfatycznego. Używamy go, gdy chcemy, aby tekst był wyświetlany kursywą ze względów stylistycznych lub konwencji.
<p>To jest normalny tekst, a <i>to jest tekst pochylony</i> za pomocą znacznika i.</p>To jest normalny tekst, a to jest tekst pochylony za pomocą znacznika i.
Zgodnie ze specyfikacją HTML5, znacznik <i> powinien być używany do tekstu, który jest w jakiś sposób odróżniony od normalnego tekstu, ale nie ma zwiększonego nacisku. Przykłady zastosowań:
- Terminy techniczne lub naukowe
- Wyrażenia w obcym języku
- Myśli lub monolog wewnętrzny postaci
- Nazwy własne (np. statków, książek, filmów)
- Terminy, które są definiowane
Znacznik <em>
Znacznik <em> (od angielskiego "emphasis") służy do oznaczania tekstu, który powinien być podkreślony lub zaakcentowany w mowie. Przeglądarki domyślnie renderują zawartość <em> jako pochyloną, ale jego głównym celem jest wskazanie, że tekst powinien być odczytany z naciskiem.
<p>Musisz <em>natychmiast</em> wypełnić ten formularz, inaczej stracisz szansę na stypendium.</p>Musisz natychmiast wypełnić ten formularz, inaczej stracisz szansę na stypendium.
Znacznik <em> jest używany, gdy chcemy zmienić znaczenie zdania poprzez podkreślenie konkretnego słowa lub frazy. Przykłady zastosowań:
- Słowa, które chcemy zaakcentować w zdaniu
- Frazy, które zmieniają znaczenie zdania, gdy są podkreślone
- Słowa, które byłyby zaakcentowane w mowie
Różnice między <i> a <em>
Główna różnica między tymi znacznikami leży w ich znaczeniu semantycznym:
| Znacznik <i> | Znacznik <em> |
|---|---|
| Służy do wizualnego pochylenia tekstu | Służy do podkreślenia emfazy (nacisku) na tekst |
| Używany dla tekstu, który jest inny stylistycznie | Używany dla tekstu, który powinien być zaakcentowany |
| Czytniki ekranu zazwyczaj nie zmieniają tonu przy czytaniu | Czytniki ekranu mogą zmienić ton lub nacisk przy czytaniu |
| Przykład: Mona Lisa to słynny obraz | Przykład: To naprawdę ważne |
Kiedy używać <i>, a kiedy <em>?
Wybór między <i> a <em> zależy od kontekstu i celu formatowania:
- Użyj
<em>, gdy chcesz podkreślić słowo lub frazę, aby zmienić lub wzmocnić znaczenie zdania. - Użyj
<i>, gdy tekst powinien być pochylony ze względów stylistycznych, konwencji lub gdy reprezentuje specjalny rodzaj tekstu (np. termin techniczny, wyrażenie w obcym języku).
Przykład pokazujący różnicę w użyciu:
<p>Książka <i>Władca Pierścieni</i> jest <em>niezwykle</em> popularna.</p>Książka Władca Pierścieni jest niezwykle popularna.
W powyższym przykładzie:
<i>jest użyte dla tytułu książki (konwencja stylistyczna)<em>jest użyte dla podkreślenia słowa "niezwykle" (emfaza)
Zagnieżdżanie znaczników
Znaczniki <i> i <em> można zagnieżdżać w innych elementach, takich jak paragrafy, nagłówki, listy itp. Można je również łączyć z innymi znacznikami formatującymi.
<p><em>Pamiętaj, że termin <i>in vitro</i> oznacza "w szkle"</em>.</p>Pamiętaj, że termin in vitro oznacza "w szkle".
Alternatywy dla pochylania tekstu
Chociaż <i> i <em> są standardowymi sposobami pochylania tekstu w HTML, istnieją również inne metody:
CSS
Można użyć CSS do pochylenia tekstu za pomocą właściwości font-style:
<p style="font-style: italic;">Ten tekst jest pochylony za pomocą CSS.</p>
<span style="font-style: oblique;">Ten tekst używa stylu oblique (podobny do italic, ale może wyglądać nieco inaczej).</span>Inne znaczniki semantyczne
W zależności od kontekstu, zamiast <i> lub <em> można użyć innych znaczników semantycznych, które mogą być renderowane jako pochylone (choć zależy to od przeglądarki i stylów CSS):
<cite>- dla cytatów, tytułów dzieł<dfn>- dla definicji terminu<address>- dla informacji kontaktowych<var>- dla zmiennych w matematyce lub programowaniu
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz krótki artykuł o filmie, używając znaczników <i> i <em> w odpowiednich kontekstach.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Recenzja Filmu</title>
</head>
<body>
<h1>Recenzja filmu <i>Incepcja</i></h1>
<p>Film <i>Incepcja</i> (ang. <i>Inception</i>) w reżyserii Christophera Nolana to <em>fascynująca</em> podróż przez warstwy ludzkiego umysłu. Premiera odbyła się w 2010 roku i od tego czasu film zdobył <em>ogromną</em> popularność wśród widzów na całym świecie.</p>
<p>Główny bohater, Dom Cobb (grany przez Leonardo DiCaprio), jest specjalistą od <i>ekstrakcji</i> - terminu używanego w filmie na określenie kradzieży pomysłów z podświadomości podczas snu. Jego nowym zadaniem jest <i>incepcja</i> - zaszczepienie idei w umyśle człowieka, co uważane jest za <em>prawie niemożliwe</em>.</p>
<p>Reżyser <em>mistrzowsko</em> łączy elementy science fiction, thrillera i dramatu psychologicznego. Szczególnie warto zwrócić uwagę na scenę z korytarzem hotelowym, która jest <em>absolutnie rewolucyjna</em> pod względem efektów specjalnych.</p>
<p>Jak powiedział sam reżyser: <i>"Chciałem stworzyć film, który będzie jednocześnie rozrywkowy i skłaniający do myślenia."</i> Moim zdaniem, <em>w pełni</em> mu się to udało.</p>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Stwórz słowniczek terminów naukowych, używając
<i>dla terminów i<em>dla podkreślenia ważnych elementów definicji. - Napisz dialog, w którym użyjesz
<em>do zaznaczenia słów, na które rozmówca kładzie nacisk. - Stwórz przykład, w którym pokażesz, jak zmienia się znaczenie zdania w zależności od tego, które słowo jest wyróżnione za pomocą
<em>. - Porównaj wygląd tekstu pochylonego za pomocą
<i>,<em>,<cite>i CSS (font-style: italic) w różnych przeglądarkach.
Najczęściej zadawane pytania
Jaka jest różnica między <i> a <em>?
Znacznik <i> służy do wizualnego pochylenia tekstu ze względów stylistycznych (np. terminy techniczne, wyrażenia obcojęzyczne), podczas gdy <em> oznacza emfazę - tekst, który powinien być zaakcentowany w mowie, zmieniając znaczenie zdania.
Czy <i> jest przestarzały w HTML5?
Nie, znacznik <i> nie jest przestarzały w HTML5. Został zredefiniowany i ma teraz konkretne zastosowanie semantyczne - do tekstu, który jest w jakiś sposób odróżniony od normalnego tekstu, ale nie ma zwiększonego nacisku.
Kiedy używać <cite> zamiast <i>?
Znacznik <cite> powinien być używany specyficznie do cytowania tytułów dzieł (książek, filmów, artykułów), podczas gdy <i> ma szersze zastosowanie dla tekstu, który jest stylistycznie odróżniony od reszty.
Czy lepiej używać CSS zamiast <i> i <em>?
Jeśli pochylenie tekstu ma tylko cel wizualny bez znaczenia semantycznego, lepiej użyć CSS. Jeśli jednak tekst ma znaczenie semantyczne (emfaza lub specjalny rodzaj tekstu), właściwsze będzie użycie odpowiedniego znacznika HTML.
Jak pochylić tekst za pomocą CSS?
Aby pochylić tekst za pomocą CSS, należy użyć właściwości font-style z wartością italic lub oblique. Przykład: p { font-style: italic; } lub span { font-style: oblique; }.