Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik <p> tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): <mark> do zaznaczenia fragmentu tekstu jak zakreślaczem oraz <em> do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 <mark> służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. <em> natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz <mark>, potem go zamykasz </mark>, dopiero później otwierasz <em> i zamykasz </em>. Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe (<mark>) i jednocześnie podkreślić termin ważny dla autora lub kontekstu (<em>). Moim zdaniem lepiej stosować <em> zamiast <i>, bo <em> niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.
W tym zadaniu kluczowy problem w niepoprawnych odpowiedziach dotyczy dwóch rzeczy: semantyki znaczników oraz poprawnego zagnieżdżania i domykania tagów HTML. To są niby drobiazgi, ale w realnych projektach potrafią narobić niezłego bałaganu, zwłaszcza przy większych serwisach i integracji z arkuszami CSS czy skryptami JS. Po pierwsze, w części propozycji znaczniki są domykane w złej kolejności albo w ogóle brakuje domknięcia. HTML co prawda bywa tolerancyjny i przeglądarka jakoś to sobie "naprawi", ale z punktu widzenia standardów W3C jest to kod niepoprawny. Jeśli otwierasz <mark>, to najpierw musisz go zamknąć </mark>, zanim zakończysz inne znaczniki albo cały paragraf. Krzyżowe zagnieżdżanie typu: otwieram <mark>, w środku <em>, a zamykam najpierw </mark>, potem </em> – jest po prostu błędne. Walidator HTML od razu to wychwyci. Druga sprawa to obejmowanie znacznikiem <mark> zbyt dużego fragmentu tekstu, łącznie z innymi elementami inline, jak <i> czy <em>. W przykładzie graficznym widać wyraźnie, że podświetlone jest tylko jedno słowo, a kursywa dotyczy innego słowa poza zakreślonym fragmentem. Jeśli więc w kodzie wrzucimy <mark> na większy kawałek, łącznie z tekstem pochyłym, przeglądarka zaznaczy więcej niż powinna i efekt wizualny będzie inny niż na ilustracji. Kolejna kwestia to użycie <i> zamiast <em>. Technicznie <i> też zrobi kursywę, ale jest to element czysto prezentacyjny, bez znaczenia semantycznego. W nowoczesnym HTML5 zaleca się stosowanie <em>, bo podkreśla ono ważność fragmentu z punktu widzenia treści, a nie tylko wygląd. Czytniki ekranu i narzędzia dostępnościowe korzystają z tej informacji. Typowy błąd myślowy polega na tym, że ktoś patrzy wyłącznie na efekt wizualny: "ma być kursywa, to daję <i>" albo "ma się świecić na żółto, to obejmę <mark> wszystko". Tymczasem dobre praktyki frontendu mówią: najpierw semantyka i poprawna struktura, dopiero potem wygląd. Dlatego warto pilnować zarówno właściwego zakresu działania <mark>, jak i domykania tagów w logicznej, zagnieżdżonej kolejności. Dzięki temu kod jest czytelny, łatwiejszy w utrzymaniu i lepiej współpracuje z narzędziami deweloperskimi.