Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

W tym pytaniu kluczowe jest rozróżnienie elementów blokowych i liniowych w HTML. Częsty błąd polega na tym, że ktoś patrzy głównie na treść albo na atrybut style='letter-spacing:3px' i zakłada, że skoro oba fragmenty są podobne, to zostaną wyświetlone obok siebie. Tak to jednak nie działa. W domyślnym renderowaniu przeglądarki elementy takie jak p, h3 oraz div mają charakter blokowy. Oznacza to, że każdy z nich zaczyna się od nowej linii i zwykle zajmuje całą dostępną szerokość rodzica. Nawet jeśli w środku znajduje się krótki tekst, następny element blokowy zostanie przeniesiony niżej. Dlatego użycie dwóch akapitów p spowoduje dwa osobne akapity, często jeszcze z domyślnymi marginesami. Użycie dwóch h3 także nie jest dobre, bo h3 jest nagłówkiem semantycznym, a nie narzędziem do układania zwykłego tekstu. Z mojego doświadczenia to dość typowy błąd początkujących: nagłówki wybiera się, bo mają większy tekst, ale semantycznie opisują strukturę dokumentu. Div również jest blokowym kontenerem ogólnego przeznaczenia, więc bez zmiany display w CSS nie ułoży dwóch fragmentów w jednym wierszu. Jeżeli celem jest zaznaczenie części tekstu w ramach tej samej linii, właściwym elementem jest span. Inline style z letter-spacing zmienia jedynie odstępy między literami, nie zmienia typu elementu z blokowego na liniowy. W praktyce, gdy chcemy wpływać na układ, robimy to świadomie przez CSS, np. display: inline, inline-block albo flex, ale bez takich reguł trzeba polegać na domyślnym zachowaniu znaczników.