Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - STYCZEŃ 2018



PYTANIE NR 3.
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?
Ilustracja przedstawia prostokątną ramkę z tekstem wewnątrz, co sugeruje, że jest to przykład użycia znaczników HTML do
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
<span> jest elementem liniowym, więc dwa kolejne <span> (bez narzuconego CSS autora) układają się obok siebie w tym samym wierszu, o ile starcza miejsca. Z kolei <div>, <p> i nagłówki (<h3>) są domyślnie blokowe, więc każdy zaczyna nową linię i wymusza złamanie wiersza.

Pełne wyjaśnienie:

Chodzi o zachowanie domyślne (gdy autor strony nie definiuje własnego CSS). W takim przypadku kluczowa jest kategoria elementu: liniowy czy blokowy.

Poprawna odpowiedź to użycie dwóch znaczników <span>, ponieważ <span> jest elementem liniowym. Elementy liniowe nie rozpoczynają nowej linii i mogą pojawiać się jeden po drugim w tym samym wierszu (dopóki szerokość wiersza na to pozwala). Atrybut style z letter-spacing zmienia jedynie odstępy między literami, nie zmienia natomiast faktu, że <span> pozostaje liniowy, jeśli nie nadamy mu innego sposobu wyświetlania.

Dlaczego pozostałe propozycje są błędne?

  • <h3>...</h3> (nagłówek) jest domyślnie elementem blokowym. Każdy nagłówek zajmuje "własny wiersz" i wymusza przejście do następnej linii przed i po elemencie.
  • <div>...</div> jest kontenerem blokowym używanym do grupowania większych fragmentów dokumentu. Domyślnie rozpoczyna nową linię, więc dwa <div> nie będą w jednym wierszu.
  • <p>...</p> oznacza akapit i również jest blokowy. Dwa akapity to dwa osobne bloki, dlatego tekst zostanie rozdzielony na oddzielne wiersze/akapitowe bloki.

Wskazówka egzaminacyjna: jeśli pytanie dotyczy "jednego wiersza bez CSS", zwykle sprawdza znajomość domyślnego zachowania elementów. W praktyce taki sam efekt można osiągnąć CSS-em (np. przez zmianę sposobu wyświetlania), ale tu jest to wykluczone warunkiem zadania.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to znaczy, że znacznik HTML jest liniowy?
Element liniowy (np. <span>) domyślnie nie zaczyna nowej linii i układa się obok innych elementów w tym samym wierszu. Zajmuje tylko tyle miejsca, ile potrzebuje jego treść, a złamanie wiersza następuje dopiero, gdy zabraknie miejsca.
Co to znaczy, że znacznik HTML jest blokowy?
Element blokowy (np. <div>, <p>, nagłówki) domyślnie rozpoczyna się w nowej linii i zwykle rozciąga się na całą dostępną szerokość. Dlatego dwa kolejne elementy blokowe pojawiają się jeden pod drugim.
Dlaczego <span> utrzymuje tekst w jednym wierszu bez CSS?
Ponieważ <span> ma domyślne zachowanie liniowe. Dwa sąsiadujące znaczniki <span> będą renderowane obok siebie w tej samej linii, o ile nie ma reguł CSS zmieniających sposób wyświetlania (np. na blokowy) i o ile szerokość kontenera na to pozwala.
Dlaczego <div> zwykle łamie tekst do nowej linii?
<div> jest domyślnie elementem blokowym, więc przeglądarka traktuje go jak osobny blok układu. Każdy kolejny <div> zaczyna się pod poprzednim, co w praktyce oznacza przejście do nowej linii nawet wtedy, gdy treść jest krótka.
Czy <p> może wyświetlić dwa fragmenty tekstu w jednym wierszu?
Domyślnie nie, bo <p> jest elementem blokowym i reprezentuje akapit. Dwa kolejne <p> utworzą dwa oddzielne bloki. W jednym <p> możesz mieć wiele elementów liniowych (np. <span>), ale same akapity będą rozdzielone.
Czy nagłówki <h3> są liniowe czy blokowe?
Nagłówki (<h1>–<h6>, w tym <h3>) są domyślnie blokowe. Oznacza to, że nagłówek tworzy osobny blok i zwykle pojawia się w nowej linii, a kolejny nagłówek zostanie wyrenderowany pod nim.
Co robi właściwość CSS letter-spacing w atrybucie style?
letter-spacing zmienia odstęp między znakami w tekście (zwiększa lub zmniejsza "rozstrzelenie" liter). Nie decyduje sama w sobie o łamaniu wiersza między elementami; o tym częściej przesądza to, czy element jest liniowy czy blokowy oraz dostępna szerokość.
Jakie błędy najczęściej popełnia się w zadaniach o <span> i <div>?
Najczęstszy błąd to zakładanie, że każdy "kontener" działa tak samo. Uczniowie wybierają <div>, bo jest popularny, ignorując fakt, że jest blokowy. Drugi błąd to skupienie na atrybucie style (np. letter-spacing), zamiast na domyślnym typie elementu.
Jak sprawdzić w przeglądarce, czy element jest liniowy czy blokowy?
Otwórz narzędzia deweloperskie (Inspektor) i zaznacz element. W panelu stylów zobaczysz reguły użytkownika (UA) i domyślne wartości, w tym sposób wyświetlania. Możesz też tymczasowo dodać regułę zmieniającą zachowanie i obserwować efekt.
Jak przygotować się do pytań o domyślne zachowanie znaczników HTML?
Ucz się "par" najczęściej mylonych elementów: <span> vs <div>, <a> vs <button>, <p> vs <br>. Twórz krótkie pliki HTML i testuj w przeglądarce bez własnego CSS. Zapamiętaj, które elementy są domyślnie liniowe, a które blokowe.
info

Około 68% zdających odpowiada poprawnie na to pytanie. średnie

Według specjalistów z branży: "&lt;span&gt; jest elementem liniowym, więc dwa kolejne &lt;span&gt; (bez narzuconego CSS autora) układają się obok siebie w tym samym wierszu, o ile starcza miejsca."

Źródła:

  • MDN Web Docs: "&lt;span&gt;: The Content Span element" (sekcja: default display/inline), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span - dostęp 2026-02-27
  • MDN Web Docs: "&lt;div&gt;: The Content Division element" (sekcja: default display/block), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div - dostęp 2026-02-27
  • MDN Web Docs: "&lt;p&gt;: The Paragraph element" (sekcja: default display/block), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p - dostęp 2026-02-27

Materiały:

  • Dokumentacja MDN Web Docs o elementach &lt;span&gt;, &lt;div&gt;, &lt;p&gt; oraz nagłówkach
  • Wprowadzenie do modelu formatowania CSS: elementy blokowe i liniowe (block/inline formatting context)
  • Ćwiczenia praktyczne: stworzenie prostego HTML i obserwacja łamania linii po zmianie znacznika
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego