W języku HTML, aby uzyskać następujący efekt formatowania
pogrubiony pochylony lub w górnym indeksie
należy zapisać kod:
Ta odpowiedź jest poprawna, bo dokładnie rozdziela zakres działania trzech elementów formatowania: element b obejmuje tylko słowo pogrubiony, element i obejmuje tylko słowo pochylony, a element sup obejmuje wyłącznie tekst górnym indeksie. W HTML bardzo ważne jest nie tylko to, jakiego znacznika użyjesz, ale też gdzie go otwierasz i gdzie zamykasz. Przeglądarka renderuje styl na podstawie zasięgu elementu, więc jeden znak przesunięcia może zmienić wygląd całego fragmentu. Z mojego doświadczenia to jest częsty błąd na początku nauki HTML: ktoś wie, że b pogrubia, i pochyla, sup daje indeks górny, ale nie pilnuje kolejności zamykania. W praktyce taki zapis przydaje się np. w opisach matematycznych, przypisach, jednostkach typu m² albo w prostych wyróżnieniach tekstu. W standardowym HTML warto też pamiętać o semantyce: do zwykłego wizualnego pogrubienia można użyć b, ale gdy tekst ma mieć znaczenie ważności, lepszy jest strong. Podobnie i oznacza wyróżnienie stylistyczne, a em nacisk znaczeniowy. Tutaj jednak pytanie dotyczy konkretnego efektu wizualnego, więc wskazany kod idealnie odpowiada podanemu wyglądowi.
W błędnych wariantach problem polega głównie na złym dobraniu znaczników albo na niepoprawnym określeniu ich zasięgu. Jeśli słowo pogrubiony zostanie objęte elementem i, to przeglądarka potraktuje je jako pochylone, a nie pogrubione. To niby drobiazg, ale w HTML każdy element działa tylko na fragment, który znajduje się pomiędzy jego otwarciem i zamknięciem. Nie można więc zakładać, że sama nazwa tekstu mówi przeglądarce, jak ma go sformatować. Ona patrzy wyłącznie na strukturę dokumentu. Pojawia się też błąd związany z mieszaniem indeksu dolnego i górnego. Element sub służy do indeksu dolnego, czyli np. w zapisie H₂O, natomiast tutaj potrzebny jest indeks górny, jak w m² albo x³, więc należy użyć elementu sup. Inna pułapka to zagnieżdżanie formatowania w taki sposób, że słowo pochylony trafia jednocześnie do obszaru pogrubienia i kursywy. Taki kod może być składniowo sensowny, ale efekt wizualny jest inny: tekst będzie pogrubiony i pochylony naraz, a w zadaniu wymagane jest tylko pochylenie. Szczególnie niebezpieczne jest też krzyżowe zamykanie elementów, gdy jeden znacznik zostaje otwarty wewnątrz drugiego, ale zamknięty w złej kolejności. W dobrym HTML struktura powinna być jak pudełka włożone jedno w drugie: najpierw zamykasz to, co otworzyłeś ostatnio. Moim zdaniem warto przy takich zadaniach czytać kod jak zakresy zaznaczenia w edytorze tekstu, bo wtedy od razu widać, który fragment naprawdę zostanie sformatowany.