Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - STYCZEŃ 2021



PYTANIE NR 22.
Która z przedstawionych grup znaczników HTML zawiera znaczniki służące do grupowania elementów i tworzenia struktury dokumentu?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Grupowanie i tworzenie struktury dokumentu realizują elementy kontenerowe i sekcyjne, takie jak <div> (kontener), <article> (samodzielna sekcja treści) i <header> (nagłówek sekcji/strony). Pozostałe grupy dotyczą odpowiednio tabel (<table>, <tr>, <td>), formatowania inline (<span>, <strong>, <em>) oraz elementów pustych (<br>, <img>, <hr>).

Pełne wyjaśnienie:

Pytanie dotyczy tego, które znaczniki HTML służą przede wszystkim do grupowania elementów oraz budowania logicznej struktury dokumentu (szkieletu strony).

Odpowiedź "div, article, header" jest właściwa, ponieważ:

  • <div> to ogólny kontener (block-level), używany do grupowania elementów, np. pod układ CSS, wspólne style, siatkę, sekcje layoutu.
  • <article> jest elementem semantycznym służącym do wydzielenia samodzielnej części treści (np. wpisu, artykułu, elementu listy aktualności). Wpływa na strukturę dokumentu i jego znaczenie.
  • <header> definiuje nagłówek strony lub nagłówek konkretnej sekcji (np. artykułu). Pomaga porządkować strukturę i semantykę.

Pozostałe zestawy nie spełniają kryterium "grupowania i struktury dokumentu" w tym znaczeniu:

  • "table, tr, td" to elementy przeznaczone do tabel danych. Organizują komórki w wiersze i tabelę, ale nie są ogólnymi znacznikami do budowy struktury całego dokumentu; stosuje się je, gdy treść ma naturę tabelaryczną.
  • "span, strong, em" to elementy głównie inline lub typograficzne: <span> grupuje fragment tekstu na potrzeby stylowania, a <strong> i <em> nadają wyróżnienie/akcent semantyczny. Nie są to podstawowe elementy strukturalne strony (nie budują sekcji dokumentu).
  • "br, img, hr" to elementy o konkretnych funkcjach: <br> wstawia złamanie linii, <img> osadza obraz, <hr> wstawia tematyczne oddzielenie treści. Są to także tzw. elementy puste (bez treści), więc nie służą do obejmowania i grupowania innych elementów.

Wskazówka egzaminacyjna: gdy w odpowiedziach pojawiają się elementy semantyczne typu <article> i <header>, zwykle dotyczą one struktury i znaczenia dokumentu, a nie tylko formatowania wyglądu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest znacznik HTML <div> i do czego służy?
<div> to ogólny element kontenerowy do grupowania innych elementów w blok. Najczęściej używa się go do budowy układu strony i stosowania stylów CSS lub zachowań JS do całej grupy. Nie niesie domyślnej semantyki treści, dlatego w miarę możliwości warto używać elementów semantycznych.
Co oznacza znacznik <article> w HTML i kiedy go używać?
<article> opisuje samodzielny fragment treści, który mógłby istnieć niezależnie od reszty strony (np. wpis blogowy, wiadomość, post). Użycie <article> poprawia semantykę dokumentu, może pomóc w dostępności oraz w interpretacji treści przez narzędzia i wyszukiwarki.
Do czego służy znacznik <header> i gdzie może wystąpić?
<header> to nagłówek strony lub nagłówek konkretnej sekcji (np. artykułu). Może zawierać tytuł, logo, nawigację, metadane treści. <header> może pojawić się wielokrotnie w dokumencie, bo dotyczy także nagłówków sekcji, a nie tylko całej strony.
Jaka jest różnica między <div> a <span>?
<div> jest zwykle elementem blokowym i służy do grupowania większych fragmentów układu. <span> jest elementem inline i służy do objęcia małego fragmentu tekstu lub elementów w linii, najczęściej do stylowania. Oba są "niesemantyczne", ale różnią się typowym sposobem użycia.
Dlaczego <table> nie jest typowym znacznikiem do struktury całej strony?
<table> służy do prezentowania danych tabelarycznych (wiersze i komórki). Choć tworzy strukturę tabeli, nie jest to semantyczny szkielet dokumentu (sekcje, nagłówki, artykuły). Używanie tabel do layoutu jest uznawane za złą praktykę, bo utrudnia dostępność i utrzymanie.
Czy <strong> i <em> są znacznikami strukturalnymi HTML?
Nie w tym znaczeniu, w jakim mówi się o strukturze dokumentu. <strong> i <em> służą do wyróżnienia fragmentu treści (siła nacisku i akcent). To elementy inline, które opisują znaczenie w obrębie zdania, a nie budują sekcji typu nagłówek/artykuł/układ.
Co to są elementy puste w HTML, np. <br> i <img>?
Elementy puste (void elements) nie zawierają treści i nie mają znacznika zamykającego. Przykłady to <br>, <img>, <hr>. Ponieważ nie mogą obejmować innych elementów, nie służą do grupowania treści ani budowania kontenerów strukturalnych; wykonują konkretne, pojedyncze funkcje.
Jak rozpoznać na egzaminie znaczniki semantyczne HTML5?
Szukaj nazw sugerujących rolę w dokumencie, np. <header>, <article>, <nav>, <section>, <footer>. Zwykle opisują one część strony i jej znaczenie. W odróżnieniu od <div> i <span> niosą semantykę, więc pomagają w porządkowaniu treści i w czytelności kodu.
Jakie błędy najczęściej popełnia się przy doborze znaczników do struktury strony?
Częsty błąd to budowanie całej strony z samych <div> bez semantyki, co utrudnia analizę i dostępność. Inny błąd to używanie <table> do układu zamiast do danych. W zadaniach testowych mylą też elementy inline (<span>, <em>) z elementami sekcyjnymi.
Jak przygotować się do pytań o znaczniki strukturalne HTML na INF.3?
Najlepiej przećwiczyć mapowanie: "jaką rolę pełni ten element w dokumencie?" Naucz się grup: sekcyjne/semantyczne (<article>, <header>), kontenerowe (<div>), tabelaryczne (<table>), inline-formatujące (<span>, <strong>), oraz elementy puste (<br>, <img>). To przyspiesza wybór odpowiedzi.
info

To pytanie poprawnie rozwiązuje 60% zdających egzamin. średnie

Źródła:

  • WHATWG HTML Living Standard – element: div (sekcja "The div element"), https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element - dostęp 2026-02-27
  • WHATWG HTML Living Standard – element: article (sekcja "The article element"), https://html.spec.whatwg.org/multipage/sections.html#the-article-element - dostęp 2026-02-27
  • WHATWG HTML Living Standard – element: header (sekcja "The header element"), https://html.spec.whatwg.org/multipage/sections.html#the-header-element - dostęp 2026-02-27

Materiały:

  • Specyfikacja HTML (sekcje opisujące elementy &lt;div&gt;, &lt;article&gt;, &lt;header&gt;)
  • Dokumentacja MDN Web Docs dotycząca elementów semantycznych HTML
  • Ćwiczenia praktyczne: refaktoryzacja strony z nadmiarem &lt;div&gt; na semantyczne elementy (np. &lt;article&gt;, &lt;header&gt;)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego