Dobre strony mojej strony
Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?
A.
<p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>
B.
<span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>
C.
<h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>
D.
<div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>
Pytanie z egzaminu CKE, styczeń 2018 (arkusz E.14-X-18.01).
W tej sytuacji najlepiej pasuje znacznik <span>, ponieważ jest to element liniowy, czyli inline. Oznacza to, że przeglądarka domyślnie nie przenosi go do nowego wiersza i nie tworzy przed ani po nim osobnego bloku. Dlatego zapis <span>Dobre strony </span><span style='letter-spacing:3px'>mojej strony</span> wyświetli tekst w jednym wierszu, o ile oczywiście jest wystarczająco dużo miejsca w oknie strony. Właściwość letter-spacing:3px tylko zwiększa odstępy między literami w drugim fragmencie tekstu, ale nie zmienia sposobu układania elementu w dokumencie. Moim zdaniem to bardzo ważne rozróżnienie: HTML określa strukturę i typ elementu, a CSS wygląd. W praktyce <span> stosuje się właśnie do wyróżniania krótkich fragmentów tekstu wewnątrz akapitu, nagłówka czy przycisku, np. do zmiany koloru jednego słowa, dodania odstępów między literami albo oznaczenia fragmentu tekstu do późniejszej obsługi w JavaScript. Zgodnie z dobrymi praktykami <span> nie powinien być używany jako zamiennik dla akapitu czy sekcji strony, tylko jako neutralny kontener dla tekstu w jednej linii.
W tym pytaniu łatwo pomylić znaczenie samego znacznika z efektem wizualnym nadanym przez styl. Atrybut style='letter-spacing:3px' wpływa jedynie na odstępy między znakami, czyli litery w tekście „mojej strony” będą bardziej rozsunięte. Nie powoduje on jednak, że element blokowy nagle zacznie zachowywać się jak element liniowy. To dość typowy błąd: ktoś widzi CSS w odpowiedzi i zakłada, że skoro jest styl, to układ będzie taki jak na przykładzie. Ale domyślne zachowanie znaczników HTML dalej ma znaczenie. Znaczniki <p>, <h3> oraz <div> są elementami blokowymi. Przeglądarka standardowo układa je od nowego wiersza i zajmują one całą dostępną szerokość kontenera. Dlatego dwa akapity <p> pojawią się jeden pod drugim, dwa nagłówki <h3> również zostaną rozdzielone, a dwa elementy <div> także utworzą osobne bloki. Nawet jeśli w drugim elemencie dodamy letter-spacing, to zmieni się tylko wygląd liter, nie przepływ dokumentu. Żeby takie elementy blokowe znalazły się obok siebie, trzeba by zastosować CSS, na przykład display:inline, display:inline-block albo układ flex. W treści pytania chodzi jednak o sytuację bez dodatkowego formatowania wpływającego na sposób wyświetlania. Dlatego należy wybrać element, który już domyślnie jest liniowy. Takim neutralnym znacznikiem jest <span>. Z mojego doświadczenia najlepiej zapamiętać to tak: <div> grupuje większe bloki strony, a <span> małe fragmenty tekstu w tej samej linii.