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

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.