Znacznik <em> w HTML służy do wyróżniania tekstu poprzez nadanie mu emfazy (podkreślenia znaczenia w zdaniu), co wpływa zarówno na wygląd treści, jak i jej interpretację przez przeglądarki oraz roboty wyszukiwarek.
Czym jest <em> i jak działa?
- Znacznik
<em>(skrót od emphasis) jest elementem języka HTML wykorzystywanym do podkreślenia, że dana część tekstu powinna być zaakcentowana w wymowie lub przekazie; - Stosując
<em>, sygnalizujesz, że zawarty w nim tekst jest szczególnie istotny z perspektywy sensu wypowiedzi, a nie tylko dla celów graficznych; - W większości przeglądarek tekst oznaczony
<em>wyświetlany jest kursywą (pochyleniem), jednak jego główne zadanie to semantyczne wyróżnienie treści.
Znaczenie semantyczne
- Znacznik
<em>daje jasny sygnał robotom wyszukiwarek, asystentom głosowym i innym narzędziom odczytującym strony, że wybrany fragment niesie ze sobą szczególną wagę lub sens, - jest to ważne w kontekście SEO – używanie
<em>we właściwych miejscach pozwala lepiej zrozumieć zawartość Twojej strony przez roboty indeksujące.
Różnica między <em> a <i>
| Znacznik | Znaczenie semantyczne | Wyświetlanie | Zastosowanie |
|---|---|---|---|
<em> |
Tak (emfaza) | Kursywa | Wyróżnienie fraz, na które położony jest nacisk znaczeniowy |
<i> |
Nie | Kursywa | Stylizowanie tekstu, np. tytuły, terminologia, cytaty obcojęzyczne |
Podczas gdy efekt wizualny obu znaczników jest podobny, tylko <em> niesie ze sobą informację o znaczeniu wyróżnionego tekstu.
Zasady użycia
- Znacznik
<em>jest znacznikiem parzystym – wymaga zamknięcia:<em>ważny tekst</em>; - jest to element typu inline – nie wpływa na strukturę blokową strony, a jedynie na formatowanie treści w obrębie akapitu;
- można go zagnieżdżać – kolejne poziomy zagnieżdżenia zwiększają stopień emfazy.
Przykłady zastosowań
Podstawowe użycie
<p>Te ciasteczka są <em>pyszne</em>!</p>
Wynik widoczny dla użytkownika:
Te ciasteczka są pyszne!
Wyróżnienie ważnej informacji w zdaniu
<p>Należy <em>bezwzględnie</em> zamknąć drzwi po wyjściu.</p>
Tu emfaza informuje, że zamknięcie drzwi to kluczowa czynność.
Zagnieżdżenie emfazy
<p>To nie jest <em>zwykły</em> deser – to <em><em>najlepszy</em> deser</em> na świecie!</p>
Tekst „najlepszy” otrzymuje podwójną emfazę, co może być odczytane przez programy odczytujące (np. czytniki ekranowe) jako jeszcze silniejsze zaakcentowanie.
Porównanie z <strong>
Znacznik <strong> używany jest do podkreślenia wagi lub ważności fragmentu tekstu, podczas gdy <em> akcentuje sens w kontekście, a nie siłę przekazu.
<p>Ta oferta jest <strong>wyjątkowa</strong>, bo <em>tylko dzisiaj</em> obowiązuje rabat.</p>
Najczęstsze błędy i dobre praktyki
- Nie używaj
<em>do samego stylizowania tekstu – jeśli chcesz tylko kursywy bez zaznaczania znaczenia, zastosuj CSS lub<i>; - stosuj
<em>tam, gdzie zmiana akcentu wpływa na sens lub odbiór zdania.
Podsumowanie
Znacznik <em> jest narzędziem do semantycznego wyróżniania tekstu w HTML – nie tylko zmienia wygląd tekstu na pochyły, ale także sygnalizuje, że dany fragment jest akcentowany w przekazie lub interpretacji. Sprytne stosowanie <em> pomaga budować treści lepiej zrozumiałe zarówno dla odbiorców, jak i dla automatów indeksujących stronę.
