Elementy i, b, em i strong – różnica

> Dodaj do ulubionych

Niektóre elementy języka HTML dają podobny efekt wizualny, przez co niektórzy, zwłaszcza początkujący, użytkownicy mają problem ze zrozumieniem, czym się różnią. Do najczęściej mylonych znaczników zaliczają się elementy i oraz em (standardowo wyświetlane przez przeglądarki czcionką pochyloną) oraz b i strong (standardowo wyświetlane przez przeglądarki czcionką pogrubioną).

Semantyka a prezentacja

Kluczem do zrozumienia tych różnic jest znajomość pojęcia semantyka. W dawnych czasach, przed powstaniem HTML5, w języku HTML istniały tzw. elementy prezentacyjne, czyli takie, których używało się wyłącznie w celu osiągnięcia określonego efektu wizualnego, np. znacznik i kiedyś służył do pochylania tekstu, a b do pogrubiania.

W HTML5 zmieniono podejście i całkowicie zrezygnowano z elementów prezentacyjnych. Od tej pory elementy HTML nie służą do nadawania tekstowi określonego wyglądu, tylko do nadawania mu określonego znaczenia, czyli wartości semantycznej. Do definiowania wyglądu służą kaskadowe arkusze stylów, czyli CSS.

Nowe definicje

Choć w HTML5 nie ma już elementów prezentacyjnych, część znaczników, które miały taki charakter w HTML 4, nadal są obecne w nowym standardzie. Teraz jednak mają inne zastosowanie. Na przykład element i, który kiedyś służył tylko do oznaczania tekstu pisanego kursywą (stąd też jego nazwa wywodząca się od angielskiego słowa italic), teraz służy do oznaczania fragmentów, które w jakiś sposób odstają od kontekstu, np. terminów technicznych, wyrażeń w obcym języku, jednostek taksonomicznych itd.

Z kolei elementy em i strong, choć nie były znacznikami prezentacyjnymi we wcześniejszych wersjach języka HTML, np. HTML 4, w HTML5 zostały lekko zmodyfikowane. Kiedyś oznaczały odpowiednio „emfazę” i „mocną emfazę”. Obecnie zaś element em oznacza zaakcentowanie (np. przeglądarki czytające treść stron na głos silniej zaakcentowałyby jego treść), a element strong reprezentuje coś ważnego.

To, że zawartość elementu i przeglądarki domyślnie wyświetlają kursywą jest sprawą drugorzędną. Jest to związane z tym, że w tradycyjnym druku tego typu elementy tekstu także oznacza się w ten sposób. Nie znaczy to jednak, że nie można tego zmienić. Jeśli autor strony internetowej będzie miał takie życzenie, to za pomocą CSS może zmienić sposób prezentacji zawartości elementu i na czcionkę normalną albo pogrubioną, w dowolnym kolorze i rozmiarze.

Podsumowanie

Podsumowując, i, em, b oraz strong to elementy semantyczne, nie wizualne, które służą do oznaczania fragmentów tekstu zgodnie z ich znaczeniem semantycznym. W poniższej tabeli znajduje się zwięzłe podsumowanie ich zastosowań z konkretnymi przykładami.

Porównanie zastosowania elementów HTML5 b, em, i oraz strong
ElementZastosowaniePrzykłady
bZwrócenie uwagi czytelnika – nie nadaje oznaczonemu tekstowi większej wagi. Specyfikacja zaleca stosowanie go w ostateczności, tzn. kiedy nie pasuje żaden inny, bardziej konkretny, element (domyślnie pogrubienie)
  • Słowa kluczowe w streszczeniu artykułu
  • Nazwy produktów w recenzjach
emEmfaza, zaakcentowanie – odpowiednik „zaakcentowania” w mowie (domyślnie kursywa)
  • To nie jest dobry pomysł…
  • Posprzątaj to, ale już
iOdmienność od kontekstu (domyślnie kursywa)
  • Wyrażenia w obcym języku
  • Terminy
  • Jednostki taksonomiczne
  • Myśli postaci fikcyjnej
  • Nazwy statków
  • Kiedy słowo nie jest używane w swoim podstawowym znaczeniu, np. Czasownik biegać odmienia się następująco…
  • Tekst czytany przez lektora
  • Transliteracja obcych słów
strongWażny tekst (domyślnie pogrubienie)
  • Uwagi i ostrzeżenia
  • Definiowane pojęcia